News

How to get started with the Google Maps API

Register for an API key and take the first steps to adding visual interest to your web projects with Google Map elements

1

Access the API console

When using the majority of Google’s API services you are required to first request an API key. You can do this by visiting the Developer home at developers.google.com and clicking the API console icon under the Developer Tools section, or directly via code.google.com/apis/console. You must have a valid Google account to access the console, so create one if required before logging in.

New project

Click the red Create Project button, enter a project name and tick the Terms of Service agreement before clicking Create. You will be prompted to validate the new project via SMS or telephone message and enter a code. With the project created and open, click the ‘APIs & auth’ item from the left-side menu. Here you’ll see a list of selected APIs – the only one you need switched on is Google Maps API v3.

Generate API key

Choose the ‘Credentials’ link from the left-side menu and click the Create New Key button under Public API access. Here we want a Browser key, so pick this button, leave the HTTP referrers box blank for now and click on Create. You should now have a 39-character string, which we will add to the <head> of our HTML page. As shown in the code, the ‘&sensor=false’ addition indicates we will not be using GPS.

<title>Google Maps API Demo</title>    
<script src=”http://maps. googleapis.com/maps/api/js?key=REPLACE_ WITH_YOUR_API_KEY&sensor=false”><script>

Function mapSetup() 1

We now need some code to initiate the map, which starts with a function where we set a variable with specific options. This starts with ‘center’ and latitude/longitude co-ordinates for centring on a specific location, in our case Alberta, Canada. The ‘zoom’ value sets the default resolution, with zero most distant. You may also change the HYBRID part of ‘.MapTypeId’ to Roadmap, Satellite or Terrain should you want to display an alternative map view instead.

<script>
   var myCoords = new google.maps.    LatLng(56.4,-115);    
   function mapSetup()
   {    
   var mapSettings = {
   center: myCoords,
   zoom: 7,
   mapTypeId: google.maps.MapTypeId.    HYBRID
   };



Function mapSetup() 2

The <script> continues creating a new map object by passing in our identified page element we want to contain the map, here a <div> called mapCanvas, as well as the mapSettings from above. You can then attach an event listener that builds the map once the page has finished loading. In your page <body> you will need to add the <div> element with the appropriate id and desired dimensions.

var myMap=new
   google.maps.map(document.getElement ById“mapCanvas”),mapSettings);
}

google.maps.event.addDomListener(window, ‘load’, mapSetup);
</script>
   BODY:
   <div id=”mapCanvas” style=”width:     1000px; height: 760px;”></div>

Markers and bubbles

Quickly add a marker icon by passing in your co-ordinates to a new marker object and attaching it to the map. We may also use a similar method to add a text bubble floating above the marker. Add the following code lines to the end of the mapSetup() function before the closing bracket and the on load listener. Save your page and test in your browser to view the map!

var myMarker=new google.maps.    Marker({
   position: myCoords
   });

   myMarker.setMap(myMap);
   var myBubble = new google.maps.    InfoWindow({
   content: “Welcome to Canada!”    
   });
   
myBubble.open(myMap, myMarker);       }    
   google.maps.event.addDomListener     window, ‘load’, mapSetup);

×