Dec 142012
 
Article Javascript

Google maps gives users validated with a Google account the possibility to add annotations to a map, to mark places, as well as to highlight paths and closed areas.

The Google maps API also allows to add annotations to the map using javascript. This post reviews how to create these custom maps, both in the Google Maps frontend and by using the API.

In a previous post we already explained how to add a marker to the map, by instantiating a google.maps.Marker object. The icon to be shown can be specified by setting the “icon” parameter of the Marker:

var icon_hospital = 'icons/red-cross.png';

var hospitalMarker = new google.maps.Marker({
      position: new google.maps.LatLng(-27.0,131.0),
      map: map,
      icon: icon_hospital
});

In the Google maps frontend, the user creates a custom map by selecting “My places  >  CREATE MAP”:

 

Then the map is given a name, and optionally a description. In the same dialog the user chan choose whether to make the map “Public”, or “Unlisted”. If the map is unlisted, only users that know the url of the map will be able to access it:

 

 

On the image above we can also see that at the top of the map new buttons are shown to add markers to the map, as well as to highllight paths and regions on it.

When a marker is added, a popup dialog is displayed to give it a title, and optionally a description. The icon to be shown at the marker position can also be chosen from a set of default icons:

 

 

How to refer to Google maps default icons in the API

The icons that the user can choose in the Google maps frontend can also be referenced in the API. For instance, the icons to display a plane and its shadow are located at the urls:

  • http://maps.gstatic.com/mapfiles/ms2/micons/plane.png
  • http://maps.gstatic.com/mapfiles/ms2/micons/plane.shadow.png

To find the url of a given icon, we can navigate to google maps using a Firefox browser with firebug. After we add the icon to the map, the resulting html code can be inspected to find the name of the icon.

The parameters “icon” and “shadow” of a marker can be given these urls as values. Alternatively, These urls can be used to create “MarkerImage” objects, and then those objects are assigned to the “icon” and “shadow” parameters.

By using “MarkerImage” objects, it is possible to control the size and placement of the icons. With MarkerImage objects it is also possible to use “sprites” to minimize the page load time.

var myshadow = new google.maps.MarkerImage(
    'http://maps.gstatic.com/mapfiles/ms2/micons/plane.shadow.png',
    new google.maps.Size(59, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(8,32)
);
var myLatlng = new google.maps.LatLng(-25.3,131.0);
var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hi, Australia!",
    icon: 'http://maps.gstatic.com/mapfiles/ms2/micons/plane.png',
    shadow: myshadow
});

 Posted by at 7:52 am

 Leave a Reply

(required)

(required)