Google Maps API: simple map with own coulours, InfoWindow with logo, bouncing marker and custom dropdown navigation

published on September 15, 2010 in Website Design

Easily integrate a map of your office on your website with Google Maps API.

As I have been playing with the latest version of the Google Maps API (v3), I thought it may be useful to some if I was to share the code I ended up using on one of our websites.

The Google Maps API shouldn’t be mistaken for Google Places maps even if it uses the same technology. The former allows business owners to incorporate one, or multiple, maps on their website, and it is the one discussed in this post.

The third version of the API allows you to customise many elements with a little bit of Javascript programming. Hopefully this tutorial will help you create your own map and if you have any questions, please do not hesitate to ask them in the comments.

Before we start, this is the finished version of the map, complete with bouncy marker and custom colours (click on the marker if you find it annoying):

Step 1: create an empty HTML document called map.html and copy/paste the following into it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xml:lang="en" lang="en">
<head>
<title>Google Map API Example</title>
<meta http-equiv="Content-Type"  content="text/html; charset=UTF-8" />
<style type="text/css"  media="screen">
<!--
	/* 
	Defines map size using CSS height/width of placeholder.
	Using a class in case we need more than one map on the page.
	*/
	.gmap{height:300px; width:600px;} 
-->
</style>
<!-- call to the map API on Google -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- call to our javascript function file with the map code -->
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<!-- div placeholder for the map, you could also use  paragraph tags -->
<div id="googlemap" class="gmap"></div>
</body>
</html>

Step 2: create the external javascript file to hold the Google Maps native function calls and customisation. Call it script.js. Copy/paste the following into it:

window.onload = function(){
 //googlemap is the id of the placeholder in map.html
 if(document.getElementById('googlemap')){ 
  //your office coordinates latitude / longitude, if you change the variable name, you will also need to update line 8 and 14
  var office = new google.maps.LatLng(52.02955,-0.72299); 
  // zoom level defines the default scale of the map, the center is aligned to the coordinates from the previous line, the backgroundColor is the colour of the placeholder while the map loads (make it the same colour as your website background
  var mapOptions = { zoom: 14, center:office, backgroundColor: "#ffffff" };
  // generates map with the options defined above
  var map = new google.maps.Map(document.getElementById("googlemap"), mapOptions);
  // this is the InfoWindow (speech bubble) that contains the logo, it can contain HTML instead of an image
  // adding a style="display:block" to fix the wrong size issue when InfoWindow only contains an image
  var infowindow = new google.maps.InfoWindow({ content: '<p><img display="block" src="maplogo.gif" alt="map logo" /></p>'});
  //the marker. If you do not want the marker to bounce, simply deleted the line that contains animation: google.maps.Animation.BOUNCE and uncomment the one below
  //var marker = new google.maps.Marker({ position:office, map: map}); 
  var marker = new google.maps.Marker({ position:office, map: map, animation: google.maps.Animation.BOUNCE }); 
  //opens the InfoWindow, not needed if InfoWindow is not used
  infowindow.open(map,marker);
  //move the center of the map left and down to allow space to view the infowindow, not needed if InfoWindow is not used
  map.panBy(10,70);

  //function that makes the marker stop bouncing when clicked (it can be annoying). Delete it if not using the bouncing marker
  google.maps.event.addListener(marker, 'click', function() { 
  if (this.getAnimation() != null) { this.setAnimation(null); } 
  else { this.setAnimation(google.maps.Animation.BOUNCE); } });

  //map customisation
  //colours of the different map elements
  //change the hue hex colour to the main colour of your site and it should look ok
  var colours = [
   { featureType: "administrative", elementType: "all", stylers: [ { saturation: 40 }, { hue: "#ffcc00" } ]},
   { featureType: "landscape", elementType: "all", stylers: [ { hue: "#ffcc00" }, { saturation: 40 }, { lightness: 0 } ] },
   { featureType: "poi", elementType: "all", stylers: [ { hue: "#ffcc00" }, { saturation: 40 } ] },
   { featureType: "road", elementType: "all", stylers: [ { hue: "#ffcc00" }, { saturation: 40 } ] },
   { featureType: "transit", elementType: "all", stylers: [ { hue: "#ffcc00" }, { saturation: 40 } ] },
   { featureType: "water", elementType: "all", stylers: [ { hue: "#ffcc00" }, { saturation: 40 } ] } 
  ];

  //applying colours to map
  var styledMapOptions = { map: map, name: "Map"}
  var myStyledMap = new google.maps.StyledMapType(colours,styledMapOptions);

  //defining new map style
  map.mapTypes.set('colouredMap', myStyledMap);
  map.setMapTypeId('colouredMap');

  //setting up the navigation options as a dropdown with thee options: your custom map colours, satellite view and hybrid view
  map.setOptions({ mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: ['colouredMap', google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID] } });
 }
}

I’ve commented the Javascript file to make it easier to customise the map elements. The style=”display:block” on the image (in script.js) fixed the InfoWindow scrollbar issue that seems to occur when the image is on its own.

And that’s all you should need to create your very own map with custom drop down, colours, logo and a bouncy marker. Other elements of the map can be customized and all the details can be found on Google Javascript Reference.

subscribe

Leave a Comment. This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.

CommentLuv badge

Previous post:

Next post:

©2017 NetAccountant.net - All rights reserved
Site Map | Legal Stuff