Learning never exhausts the mind

Last Updated by

In this article I'm going to look at how you can add pins, waypoints and routes to Google Maps embedded in your website. I'm going to expand on the examples from the previous article so if you haven't seen that one, head over to part one on the list below.

Using the code from the Getting started with Google Maps article, I've setup a map view of the gorge:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=***YOUR KEY HERE***" type="text/javascript"></script><script type="text/javascript">function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setMapType(G_SATELLITE_MAP);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(51.2863,-2.7503), 14);
        // Extra code goes below this line

      }
}</script><div id="map_canvas" style="width: 550px; height: 350px"></div><script type="text/javascript">function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(initialize);</script>

This will display a nice map as shown in the image below.

Google Maps API Markers

Google Maps API Markers

Adding Markers to Google Maps

Markers are used to identify points on the map. All you need to do to add a basic marker is to add the two lines below to the code above. The previous article shows you how to get latitude and longitude from Google Maps.

var point = new GLatLng(51.282798,-2.765477);
map.addOverlay(new GMarker(point));

This will show up as a simple red pin on the map. This will mark the start point of the walk (the car park).

Google Maps API Markers

Google Maps API Markers

You can change the icon from the default using some slightly different code. All this does is create an "option" parameter and adds it to the addOverlay function.

var point = new GLatLng(51.282798,-2.765477);
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
markerOptions = { icon:blueIcon };

map.addOverlay(new GMarker(point, markerOptions));

Changing the Google Maps Pointer Icons

Sometimes you may want to add letters to identify specific points of interest on the map rather than the default dot. This can also be done quite easily using the code below.

var point = new GLatLng(51.282798,-2.765477);
var letteredIcon = new GIcon(G_DEFAULT_ICON);
letteredIcon.image = "http://www.google.com/mapfiles/markerA.png";
markerOptions = { icon:letteredIcon };
var marker = new GMarker(point, markerOptions);

The image url points to Google markers, simply replace markerA.png with markerB.png, markerC.png and so on. The letter must be in upper case.

You can also host icons on your website and link to them, simply replace the google url with your own. Here is a great resource for downloading Google maps icons.

Adding Clickable Captions to Google Maps

The next logical step is to add a caption to the marker so people know what you are marking and why!

Having added the marker to the map, a caption can be added using Google API events as shown below.

var point = new GLatLng(51.282798,-2.765477);
var letteredIcon = new GIcon(G_DEFAULT_ICON);
letteredIcon.image = "http://www.google.com/mapfiles/markerA.png";
markerOptions = { icon:letteredIcon };
var marker = new GMarker(point, markerOptions);

GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("This is the carpark at the start of the route.");
  });

map.addOverlay(marker);

This should result in a map marker as shown below. Once clicked it will expand a caption bubble with your text.

Google Maps API Markers with Text

Google Maps API Markers with Text

Adding Images

Why not add an image to the caption and show people what is there? I'm going to start adding these to my maps to show the routes walked and the views you can expect from each vantage point. The parameter to the call of openInfoWindowHtml simply takes in any html content, so you can add an image url to it as well and link it to the full size.

var point = new GLatLng(51.282798,-2.765477);
var letteredIcon = new GIcon(G_DEFAULT_ICON);
letteredIcon.image = "http://www.google.com/mapfiles/markerA.png";
markerOptions = { icon:letteredIcon };
var marker = new GMarker(point, markerOptions);

GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("<p>This is the carpark at the start of the route.</p><img src='https://lonewolfonline.net/uploads/2010/03/cheddar-gorge-views-3-150x150.jpg'/>");
  });

map.addOverlay(marker);
Adding Pictures to Google Maps

Adding Pictures to Google Maps

Adding Routes to Google Maps

The final thing I want to talk about today is adding routes to the map. Google calls these "polylines". All this is an array of points on the map. So let's create a short "polyline" route on the map. I'm not going to do it all because there are quite a few, hopefully it will be enough to get you started. The more points you add the more accurate the route will be.

var polyline = new GPolyline([
new GLatLng(51.282356,-2.767838),
new GLatLng(51.283308,-2.767269),
new GLatLng(51.285858,-2.765284),
new GLatLng(51.286301,-2.764576),
new GLatLng(51.286221,-2.763235),
new GLatLng(51.286556,-2.761851),
new GLatLng(51.288133,-2.75875),
new GLatLng(51.289757,-2.751369),
new GLatLng(51.28969,-2.745962),
new GLatLng(51.288737,-2.745565)
], "#00ff00",5); 
map.addOverlay(polyline);

In this example the value "#00ff00" represents a green line. You can change this to be any valid HTML hex colour value. The single digit at the end (5) tells Google how thick to draw the line in pixels. The end result should look something like this:

Google Maps Polylines and Routes

Google Maps Polylines and Routes

3 thoughts on “Adding Pins, Points and Routes to Google Maps API
  • 18th November 2012 at 12:00 am

    I love your tutorial.

    I'm so reluctant to use Google for programming resources mainly because most examples are nothing more than borrowed information displayed in a non-common sense format.

    Your examples were perfect, right to the point, easy to understand and even the cut and paste worked as shown!

    Thank you, John Turcott

    Reply
  • 7th June 2012 at 12:00 am

    Brilliant tutorial, thanks!!

    Reply
  • 12th December 2011 at 12:00 am

    Thanks for this tutorial, it was a great help in getting me started within minutes!

    Reply

Leave a Reply

Fields marked with * are mandatory.

We respect your privacy, and will not make your email public. Hashed email address may be checked against Gravatar service to retrieve avatars. This site uses Akismet to reduce spam. Learn how your comment data is processed.