The “Adding markers to Google Maps” Tutorial

Google, Local SEO

This tutorial will show you how to geocode addresses and place markers on a google map. We will also zoom and pan the map to show the most appropriate view based on marker locations. This is a very useful feature for showing office locations or marking multiple key points on a map.

What is needed for this tutorial:

A server to host the page.
Basic knowledge of HTML and Javascript (or the ability to copy and paste).

Example

Step 1 – Creating the map:

The first thing we need to do is to load an instance of google maps onto our webpage. This gives us our base map that we will manipulate and add markers to.

Create a blank HTML file in your program of choice and paste in the following code:

Save the file and upload this to your web server. When you view the page through a browser you should now see the below.

This code uses jQuery to load the map once the page is ready. Initialising an instance of google maps is as easy as the following:

var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);

The function takes 2 parameters, the ID of the element we want to load the map into and list of options. In this example we specify 3 options, a latitude and longitude coordinate to centre the map on, a zoom level and a map type. For more information on other options available please visit the Google Maps API page.

Step 2 – Adding the markers:

Now that we have our map we can start adding our markers. Before this is possible we need to translate our address information into Latitude and Longitude coordinates. In this example we have our address information in an array. We will loop through the array translating the address information into coordinates and placing them on the map.

Paste the following code below the line containing var map = new google.maps.Map…

Save the file and upload it to your web server. When you view the page through a browser you should now see the below.

The code we just added firstly creates an array of address information in a variable called addressArray. Google’s Maps API is clever enough to geocode various types of information including postcodes, city names and counties, as well as full addresses.

I have used 3 random pieces of address information. You may want to add to or change these to relevant addresses.

Now that we have our addresses we need to loop through each piece of information. Inside the loop we are using Google’s geocoder to translate the address to coordinates and place a marker on the map. We also check whether the geocoding was successful. If Google is unable to translate the address an alert box is displayed with an error message. For more information of Google’s error messages please view the Google Maps API page. More on optimising Google My Business.

Step 3 – Adjusting the map to suit the markers:

We now have a map with our markers on it, but what if we place a marker outside of the visible area? The user may never see it or know it’s there. To prevent this we can automatically adjust the map to pan and zoom to a point that shows all markers.

Firstly we need to create a new instance of LatLngBounds. This is used to determine the boundaries that need to be visible on the map. It returns the most south-western point and most north-eastern point.

Paste the following line above our for loop:

var markerBounds = new google.maps.LatLngBounds();

Now that we have our instance we can add the marker points to it and increase the boundaries to show all of the points. To do this we need to add 2 lines to our “for” loop.

markerBounds.extend(results[0].geometry.location); map.fitBounds(markerBounds);

These need to be inserted at the end of the loop, after the marker creation. Look for the code below and add the 2 lines after the closing “});”

var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location });

Google My Business.

Your JavaScript should now be as follows.

Save the file and upload this to your web server. When you view the page through a browser you should now see the below.

Summary

I hope you have enjoyed the tutorial, I have spent a bit of time recently using the Google Maps API and I love it. If you’re interested I highly recommend checking out the Google Maps examples section to see some of the more advanced applications that are achievable using the Maps API.