Tutorial Google Maps

Google Maps:

So, let’s try building a site with Google Maps support and hope for the best…!
I have never done this from scratch so this will be my first time as well..

Prerequisite:

Google Maps API key(google wants confirmation that you are not going to abuse Google Maps). Create a HTML page and load google maps API on your site, you will also need to load prebuilt javascript libraries and adding your own custom javascript code

Getting your API key is easy goto https://code.google.com/apis/console :

You will need to log on with your google account, enter some project information(you can use http://localhost as web-address)

click on services, scroll down to Google Maps API v3 and press the slider to ON position(accept any declarations, and sell your soul! 🙂 )

Then double check the “Services” Menu in active tab to make sure Google Maps API V3 is activated.  In API Access menu you should have a “Simple API Access” area, and the API key within the “Simple API Access” frame is what you need for your website, you will paste it and replace your_api_key.

You will be provided a html template from google, I will repost it here:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s