Google Maps API Version 3 Tutorial Day 1

The Google Maps API is one of my favorite and also probably the most powerful APIs out there. I’ve seen and made very neat applications with this API, now it’s your turn to make one.

A Simple Map

The HTML Markup

The HTML you need to render a map a very little. You need a div tag where the map will appear, some CSS to specify the size of the map and a javascript line to include the google maps library.

<html>
<head>
<style type="text/css">
div#map{
width:750px;
height:500px;
}
</style>
</head>
<body>
  <div id="map"></div>

  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

</body>
</html>

The previous code is the HTML markup for a map that measures 500X750 and will be rendered in a div with the ID “map”. Notice my “sensor” parameter when I include the library. The value of this parameter specifies whether you, the developer, will want to access a user’s location, the alternative value is false.

The Javascript Code

Before you render the map you need to set a few settings, I like to put all this code in a function which I call after my page loads.

window.onload=function() {
  // code to render your google map
}

The simplest map needs three settings, the zoom level (zoom) , map type (mapTypeId) and center coordinates (center). The values for these settings are specified in an array which we will then pass to the rendering function. The settings can be typed in any order.

My map settings are:

    var settings = {
      mapTypeId: google.maps.MapTypeId.ROADMAP, // map type
      zoom: 3, // map type
      center: new google.maps.LatLng(30, -90) // coordinates
    };

I will talk about each of this settings below, but first let’s render the map.
The function used to display the map needs two parameters, the place where you want to render the map and the three basic settings we just made.

    var map = new google.maps.Map(document.getElementById("map"), settings);

Notice that we made an object call "map", that’s because you can later use that variable to add/remove/modify stuff on your map.

Here is the full code so far:

<html>
<head>
<style type="text/css">
div#map{
width:750px;
height:500px;
}
</style>
</head>
<body>
  <div id="map"></div>
  
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
  window.onload=function() {
  
    var settings = {
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 3,
      center: new google.maps.LatLng(30, -90)
    };
	
    var map = new google.maps.Map(document.getElementById("map"), settings);
  }
  
  

</script>
</body>
</html>

Now we can talk about the map setting in more detail.

The Center Coordinates

The center coordinates are your latitude and longitude specified in the constructor in that order. You can also assign these constructor to a variable and use that variable as your setting, this makes much easier to read code in my opinion. Compare both.

Before:

   var settings = {
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 3,
      center: new google.maps.LatLng(30, -90)
    };

After:

var coordinates=new google.maps.LatLng(30, -90);
   var settings = {
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
      zoom: 3,
      center: coordinates
    };

Zoom Values

Your zoom values can go from 0 to 20, 0 been the farthest.

Map Types

You are probably wondering if you can use the other map types in google maps, of course you can. All you need to do is change the last word in your map type constant to the other type of map you need.

google.maps.MapTypeId.MAPTYPE

Map types include :

  • HYBRID: This map type displays a transparent layer of major streets on satellite images.
  • ROADMAP:  This map type displays a normal street map.
  • SATELLITE:  This map type displays satellite images.
  • TERRAIN:  This map type displays maps with physical features such as terrain and vegetation.

More Map Options

There are many more map options than the three I listed here, but they are too many so I’ll cover them in the next post. In the mean time leave a comment and share this article.