Multi-point maps with Google Maps Javascript API

Google has made it fairly straightforward to create custom maps you can embed into a website. This is really useful if you want to show multiple locations for your store, all the churches in your diocese, your favourite coffee spots, or if you're looking for a really nerdy way to show every place you ever got a bee sting.

This guide isn’t fully comprehensive, since there are a lot of additional options you could invoke. But this is what you need to get a basic multi-point map running.

Get an API key.

To run a map on Google Maps Javascript API, you need to create a key. Visit Google Maps Platform and click on “Get Started”. Follow the links for “Javascript API”, and request the key.

With your key in hand, you’re ready to get coding.

1. A couple lines of HTML and JS.

Your file begins simply with the Javascript API script and a div with the ID of “map”.

That’s the basics.

2. Get your map data.

Next, you must structure your map data as a javascript array. In my database, I have each location stored with the following properties:

• title
• coordinates (latitude and longitude)
• unique id

And a few more, which are used when we activate the marker’s pop-up info window.

• image (if you need one)
• description
• url

Retrieve your location data and store it in a $markers array.

Note: You can create a custom HTML string for each marker, giving you total control over the info window that will display when you click on a marker.

3. Create a new script where the map will be built.

A few things happen in this new script, which are important to notice.

• The $markers array we created from our database is stored to a javascript array by the same name.
• A new instance of Google Maps is stored to var map inside the initMap() function. (initMap() is called by the first script we put in the page.)
• Within map’s options, you can set the centering point of the map using latitude and longitude.
• We loop through the locations saved to markers in order to add each marker to the map.
• An “info window” is created (the pop-up you see when you click on a marker).
• bindInfoWindow() function binds the info window to its marker.

At this point, you will have a functioning map. However, it needs some enhancement. Left in this state, each info window will stay open even as you click new markers. Next we will add a function that will close previously opened info windows.

4. Close the unnecessary windows.

The function closeOtherWindows() makes it possible to close previously opened info windows so that the screen doesn’t fill up with them. The function checks to see if the Windows array has at least 1 element in it. If it does, the .close() method is called, which closes the open window (predictably), and resets the array count to 0.

closeOtherWindows(); is called within bindInfoWindow() before infowindow.open() so that previously opened windows are closed before a new one is opened.

After infowindow.open() runs, the window instance is added to Windows array so that it can be closed next time an info window is requested.

Cartography achieved!

And that’s all there is to it. Your map will connect to Google Maps Javascript API, take in all your locations, open info windows when markers are clicked, and will close previously opened ones to ensure your user’s screen stays clean.