Website development and design blog, tutorials and inspiration

Adding Pins, Points and Routes to Google Maps API

How to use the Google Maps API

By , Written on in HTML/CSS

Adding Pins, Points and Routes to Google Maps API

889 words, estimated reading time 5 minutes.

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.
 
Google Maps Series
  1. Embed Google Maps on your Website
  2. Getting Started with the Google Maps API
  3. Adding Pins, Points and Routes to Google Maps API

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

  1.  
  2. <script src="http://maps.google.com/maps?file=api&v=2&key=***YOUR KEY HERE***" type="text/javascript"></script><script type="text/javascript">function initialize() {
  3. if (GBrowserIsCompatible()) {
  4. var map = new GMap2(document.getElementById("map_canvas"));
  5. map.setMapType(G_SATELLITE_MAP);
  6. map.addControl(new GSmallMapControl());
  7. map.addControl(new GMapTypeControl());
  8. map.setCenter(new GLatLng(51.2863,-2.7503), 14);
  9. // Extra code goes below this line
  10.  
  11. }
  12. }</script><div id="map_canvas" style="width: 550px; height: 350px"></div><script type="text/javascript">function addLoadEvent(func) {
  13. var oldonload = window.onload;
  14. if (typeof window.onload != 'function') {
  15. window.onload = func;
  16. } else {
  17. window.onload = function() {
  18. if (oldonload) {
  19. oldonload();
  20. }
  21. func();
  22. }
  23. }
  24. }
  25. 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

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.

  1. var point = new GLatLng(51.282798,-2.765477);
  2. 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.

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

Changing the Pointer Icon

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.

  1. var point = new GLatLng(51.282798,-2.765477);
  2. var letteredIcon = new GIcon(G_DEFAULT_ICON);
  3. letteredIcon.image = "http://www.google.com/mapfiles/markerA.png";
  4. markerOptions = { icon:letteredIcon };
  5. 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 Captions

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.

  1. var point = new GLatLng(51.282798,-2.765477);
  2. var letteredIcon = new GIcon(G_DEFAULT_ICON);
  3. letteredIcon.image = "http://www.google.com/mapfiles/markerA.png";
  4. markerOptions = { icon:letteredIcon };
  5. var marker = new GMarker(point, markerOptions);
  6.  
  7. GEvent.addListener(marker, "click", function() {
  8. marker.openInfoWindowHtml("This is the carpark at the start of the route.");
  9. });
  10.  
  11. 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.

  1. var point = new GLatLng(51.282798,-2.765477);
  2. var letteredIcon = new GIcon(G_DEFAULT_ICON);
  3. letteredIcon.image = "http://www.google.com/mapfiles/markerA.png";
  4. markerOptions = { icon:letteredIcon };
  5. var marker = new GMarker(point, markerOptions);
  6.  
  7. GEvent.addListener(marker, "click", function() {
  8. marker.openInfoWindowHtml("<p>This is the carpark at the start of the route.</p><img src='http://cdn.timtrott.co.uk/2010/03/cheddar-gorge-views-3-150x150.jpg'/>");
  9. });
  10.  
  11. map.addOverlay(marker);
Adding Pictures to Google Maps
Adding Pictures to Google Maps

Adding Routes

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.

  1. var polyline = new GPolyline([
  2. new GLatLng(51.282356,-2.767838),
  3. new GLatLng(51.283308,-2.767269),
  4. new GLatLng(51.285858,-2.765284),
  5. new GLatLng(51.286301,-2.764576),
  6. new GLatLng(51.286221,-2.763235),
  7. new GLatLng(51.286556,-2.761851),
  8. new GLatLng(51.288133,-2.75875),
  9. new GLatLng(51.289757,-2.751369),
  10. new GLatLng(51.28969,-2.745962),
  11. new GLatLng(51.288737,-2.745565)
  12. ], "#00ff00",5);
  13. 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

Last updated on: Wednesday 21st June 2017

Comments
  1. John Turcott
    John Turcott

    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

  2. Richard
    Richard

    Brilliant tutorial, thanks!!

  3. Marvin
    Marvin

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

Leave a Reply

Your email address will not be published.