I’m tweaking a customers website today and spending time tidying up some small issues. One of these issues was to display map widgets, more than one, multiple google maps widget for each of the companies three offices. This would have been super easy using a CMS like Drupal but this is to be added to a custom HTML5 website. Even so, “Sounds pretty straightforward” I thought and volunteered 😉

*sigh* After an hour of reading radically different google maps tutorials, trying (and failing) to get the maps to display, I was starting to mutter swear words. But then YAY! after a strong coffee, and an afternoon doughnut I was able to figure out the gremlins and see the maps in all their glory.

I finally got Google Maps embedded in my page, working lovely, using a mixture of code examples from various sources. Heavily modified, it works beautifully and of course, is hopefully very readable for any other code-monkey out there. So its time to write it down before it fizzles out of my brain forever. If you came here after googling (or bing’ing) every combination of “multiple google maps on one screen” possible then I hope this helps…

So you want to display more than one google map on your web page?

For starters, get your addresses in order. In this example I have used three different addresses, but hopefully you will see how easy it is to add more, or less of them. For each address, you will need to know the latitude and longitude of the address to be mapped. This is easy if you use this free address to latitude/longitude convertor. Follow the link and write down the co-ordinates of your address.

Assuming you know nothing about Google Maps – then you just need to follow these steps:

1. Write a little java script file (example below)
2. Style the maps layout using CSS
3. Decide where you want to display the maps on the page and add a link to the Google Maps Javascripts to your HTML
4. ​save, refresh browser and congratulate yourself

Voila! Simples. So lets do it:

First, if you have never used google maps or are not familiar with java script or CSS then read this first https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map?hl=ar#introduction

(1) Create the MAP.JS java script file

So, using a text editor (NOTEPAD will do – but I prefer notepad++) create a file called map.js and edit this into it:

/*! Funky Google Maps scripts

-- Latitude /Longitude for addresses are:
396 Congress Park Drive Dayton, OH 45459 - (39.630159, -84.175937)
18201 Von Karman Ave, Irvine, CA 92612 - (33.677705, -117.852974)
27 Old Glouchester Street, London, UK WC1N3XX - (51.520614, -0.121825)
*/
function initialize() {
 var myLatlngOH = new google.maps.LatLng(39.630159,-84.175937);
 var myLatlngCA = new google.maps.LatLng(33.677705,-117.852974);
 var myLatlngUK = new google.maps.LatLng(51.520614,-0.121825);
 var mapOptionsOH = {
 zoom: 5,
 center: myLatlngOH,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 mapTypeControl: 0
 }
 var mapOptionsCA = {
 zoom: 5,
 center: myLatlngCA,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 mapTypeControl: 0
 }
 var mapOptionsUK = {
 zoom: 5,
 center: myLatlngUK,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 mapTypeControl: 0
 }

 var mapOH = new google.maps.Map(document.getElementById('map-OH'), mapOptionsOH);
 var mapCA = new google.maps.Map(document.getElementById('map-CA'), mapOptionsCA);
 var mapUK = new google.maps.Map(document.getElementById('map-UK'), mapOptionsUK);

 var markerOH = new google.maps.Marker({
 position: myLatlngOH,
 map: mapOH,
 title: 'Company Office - Ohio'
 });
 var markerCA = new google.maps.Marker({
 position: myLatlngCA,
 map: mapCA,
 title: 'Company Office - California'
 }); 
 var markerUK = new google.maps.Marker({
 position: myLatlngUK,
 map: mapUK,
 title: 'Company Office - London'
 });
} 

google.maps.event.addDomListener(window, 'load', initialize);

Looking at this code, you can see that I have defined three separate office addresses, Ohio, California and London.

You can also see how all my variables link together because they either end in OH, CA or UK.

Edit them as you wish! 🙂

(2) Define how your want your maps to display using CSS

/* Google Maps define size for CONTACTS page */
#map-OH {
 width: 175px;
 height: 120px;
 background-color: #CCC;
}
#map-CA {
 width: 175px;
 height: 120px;
 background-color: #CCC;
}
#map-UK {
 width: 175px;
 height: 120px;
 background-color: #CCC;
}

Add this to any existing *.CSS file that is loaded in your HTML.

If you don’t know how to add it you can also create a file called map.css and reference it in the same way you do the map.js javascript file.

(3)Display the maps on your website

Add Link to Google Maps javascript inside the <head> tab of your HTML page that will have the maps in it:

 <script src="https://maps.google.com/maps/api/js?libraries=adsense&amp;sensor=false"></script>
 <script src="/assets/js/map.js"></script>

<div id="map-OH" class="masked location-image pull-right"></div>

These classes are specifying specific layout function I am using – you can ignore them.

Anyway – it ends up looking like this:

Anyway… I hope that helps someone out there!