Tania Rascia Web Design and Development

Skip Navigation
Google Maps APIs for Multiple Locations

Google Maps APIs for Multiple Locations

/ 49 responses

I was working on making a locations page for a multi-location restaurant concept. The overwhelming trend currently is to include a Google map with a marker for each location.

Huge companies that have locations all over the globe have massive map databases and much different hurdles to overcome – being able to search by town or zip code, Wi-fi availability, hours, and so on.

For my particular project, I only had a few needs:

  • Include a map on my page
  • Show a marker for each location
  • Each marker shows the address and can provide directions

In order to do this, I was going to need Google Maps APIs, a part of Google Developers.

My biggest misconception with Google Maps APIs before looking into them is that you’re embedding Google Maps as we know it into the site. I thought that by simply including a marker for the location, all the information would pop up in the sidebar, such as address and a search bar for directions.

This turned out not to be the case – you get the map, but simply including a marker does not lead to any of the expected actions. I figured out something that worked for me, and I’m going to write about the steps I took in case anyone is struggling in a similar situation.

API stands for Application Program Interface. For web development, this usually means a third-party software that you can embed into your website.

Get a Google Maps Javascript API Key

Google Maps APIs come in a few flavors – Android, iOS, Web, and Web services. Simply embedding a map into your site with a few markers falls under the web category, which is known as Google Maps Javascript.

The first step is to get an API key.

You’ll have to agree to their terms and services.

They’ll want you to give it a name and decide on any restrictions. If you place no restrictions on it, anyone can use it and use up your quota. The Maps are only free up to a certain point.

After that, it’ll pop up with some super-secure looking string of characters, and now you have a key.

An API key grants a developer access to an API.

Now that I have a key, I can begin implementing Google Maps into my site.

Embed a Map Into Your Site

The documentation for Google Maps APIs is extensive. They have a pretty good “Hello, World!”, or getting started guide. It’s important to make sure everything is set up correctly before you can move on to attempting more advanced concepts.

As with anything interactive on the web, there are three components – HTML, CSS, and JavaScript. The example on the site puts everything into one file, but we’ll just start off dividing them into three separate files, since that’s how you’ll have your project set up in reality.


I have a regular HTML5 document, linking to a CSS stylesheet and JS script. The map will be contained in the <div id="map"></div>. Of course, you must replace YOUR_API_KEY with the key from the previous step.

<!DOCTYPE html>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Google Maps APIs</title>

	<link href="style.css" rel="stylesheet">


	<div id="map"></div>

	<script src="script.js"></script>
	<script async defer 



The CSS provided by Google is for a full screen map. I’m putting it in style.css.

body {
	height: 100%;
	margin: 0;
	padding: 0;
#map {
	height: 100%;

The html and body classes need to have 100% height, as well as the map id. Setting the margin and padding to 0 resets the browser.

This code is fine, but I would prefer setting something along the lines of height: 60vh to the map id. 60vh would equal 60% viewport height, so would therefore take up 60% of the available screen real estate. This way, a user would be able to easily scroll past the map to whatever additional content you have. For the sake of this article, I’ll just leave it at 100%, because I have no additional content.

At this point, you’re finished with HTML and CSS as far as it pertains to the map.


I’m going to insert Google’s starting example here in script.js.

var map;

function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {
			lat: -34.397,
			lng: 150.644
		zoom: 8

I’m declaring the map variable, initiating the map with the initMap() function, and placing the Google Map into my CSS map id inside the map variable.

The center is deciding where the map should be centered (Sydney, New South Wales, Australia) and zoom decides how far in it will be zoomed.

Now you should have a functioning map.

Customizing the Map

I have a map, but it doesn’t do anything specific yet. You can zoom in and out, toggle between street and satellite view, and click-and-drag the map.

I wanted to add a marker, so I looked at the Markers page on the documentation. However, adding a marker does just that – and nothing else. I then moved on to Info Windows, which is adding details to a marker. I thought the pop up might have whatever information Google Maps has on the area, but an Info Window only contains your own content.

The Google Places API Web Service seems to integrate a bit more with the Google Maps database, but is also far more difficult to implement, so I stuck to the Google Maps Javascript API for my project.

In my search for a simple, effective way to include multiple markers with addresses and information, I found this excellent post on StackOverflow. I can’t take credit for this solution. It’s a very flexible bit of code that really helped me out on my project.


Let’s define a goal and then make it happen.

  • I’m going to use Chipotle for my example.
  • The location will be Chicago.
  • I’m going to pretend that only three Chipotle locations exist, but more might come.
  • Each location will have a popup with name, address, a link to directions

For this I’m going to need to know the addresses of the locations as well as the latitude and longitude. Get Lat Long from Address is an amazing self-explanatory resource I found and used.


Here are my three locations.

5224 N Broadway St, Chicago, IL 60640
(41.976816, -87.659916)

1025 W Belmont Ave, Chicago, IL 60657
(41.939670, -87.655167)

6600 N Sheridan Rd, Chicago, IL 60626
(42.002707, -87.661236)

The other thing I want is a URL that leads to getting directions to this location. For that, I simply went to Google Maps, typed in the address I wanted, and clicked on Get Directions. I can now get a link to the map at this point, so I click Share or Embed Map and get the URL.

Now I have everything I need to build my custom map. First I’ll call that initMap function.

function initMap() {
// More

Then I’ll make an object for each location. Each object is a variable that will contain the info box, latitude and longitude.

	var broadway = {
		info: '<strong>Chipotle on Broadway</strong><br>\
					5224 N Broadway St<br> Chicago, IL 60640<br>\
					<a href="https://goo.gl/maps/jKNEDz4SyyH2">Get Directions</a>',
		lat: 41.976816,
		long: -87.659916

info is a string in which I’ve written the name and address of my location, as well as a link to directions on Google Maps. Adding a \ at the end of a string line allow you to continue writing it on the next line.

I’ve also created objects for belmont and sheridan.

Now I’m going to create an array in a variable called location that contains info, lat, and long.

	var locations = [
      [broadway.info, broadway.lat, broadway.long, 0],
      [belmont.info, belmont.lat, belmont.long, 1],
      [sheridan.info, sheridan.lat, sheridan.long, 2],

I’m going to call the map the same way as I did in the “Hello, World!” example. I’m going to zoom to 13 because all my locations are close together, and center it on the latitude for Broadway, since it’s the middle location.

	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 13,
		center: new google.maps.LatLng(41.976816, -87.659916),
		mapTypeId: google.maps.MapTypeId.ROADMAP

With the final bit of code, the amount of markers and info windows will dynamically update based on our locations variable.

	var infowindow = new google.maps.InfoWindow({});

	var marker, i;

	for (i = 0; i < locations.length; i++) {
		marker = new google.maps.Marker({
			position: new google.maps.LatLng(locations[i][1], locations[i][2]),
			map: map

		google.maps.event.addListener(marker, 'click', (function (marker, i) {
			return function () {
				infowindow.open(map, marker);
		})(marker, i));

Here is the final, complete JavaScript.

function initMap() {
	var broadway = {
		info: '<strong>Chipotle on Broadway</strong><br>\
					5224 N Broadway St<br> Chicago, IL 60640<br>\
					<a href="https://goo.gl/maps/jKNEDz4SyyH2">Get Directions</a>',
		lat: 41.976816,
		long: -87.659916

	var belmont = {
		info: '<strong>Chipotle on Belmont</strong><br>\
					1025 W Belmont Ave<br> Chicago, IL 60657<br>\
					<a href="https://goo.gl/maps/PHfsWTvgKa92">Get Directions</a>',
		lat: 41.939670,
		long: -87.655167

	var sheridan = {
		info: '<strong>Chipotle on Sheridan</strong><br>\r\
					6600 N Sheridan Rd<br> Chicago, IL 60626<br>\
					<a href="https://goo.gl/maps/QGUrqZPsYp92">Get Directions</a>',
		lat: 42.002707,
		long: -87.661236

	var locations = [
      [broadway.info, broadway.lat, broadway.long, 0],
      [belmont.info, belmont.lat, belmont.long, 1],
      [sheridan.info, sheridan.lat, sheridan.long, 2],

	var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 13,
		center: new google.maps.LatLng(41.976816, -87.659916),
		mapTypeId: google.maps.MapTypeId.ROADMAP

	var infowindow = new google.maps.InfoWindow({});

	var marker, i;

	for (i = 0; i < locations.length; i++) {
		marker = new google.maps.Marker({
			position: new google.maps.LatLng(locations[i][1], locations[i][2]),
			map: map

		google.maps.event.addListener(marker, 'click', (function (marker, i) {
			return function () {
				infowindow.open(map, marker);
		})(marker, i));

Now all of our locations are on the map with their respective info box.

I’ve put this project up on GitHub – all you would have to do is insert your own API key.

View on GitHub

Thank you for reading! I'm Tania Rascia, and I write no-nonsense guides for designers and developers. If my content has been valuable to you, please help me keep the site ad-free and continuously updated with quality tutorials and material by making a donation. Any amount helps and is greatly appreciated! Otherwise, let me know any ideas you have on a course you'd be eager to see.

Write a response

Your email address will not be published.


  • Paolo says:

    Great !

    After hundreds docs and pieces of examples, this is definitely what I was looking for.
    This will help a lot of low-middle level developers (I’m part of, obviously).

    I now would like to understand how to scale the map to fit all plots and give different colors to plots under conditions, then I can consider it done !

    Really, really many thanks.

  • Saikiran says:

    Hi Tania Rascia,

    I have one query about the google Maps ie., i have received the every 5 seconds latitude and longitude details based on that i can draw a graph i am use the google maps waypoints but it is not work exactly what i am expected because it have only 23 limitations was there not exceed that limitation points and i am draw a line using google maps poly but i am not satisfied that result.Please help me i am waiting your replay.

    I need like this way

    Point A -> Point B -> Point C-> like this unlimited until i am stop the device to get the longitude and latitude points.

  • Rogerio says:

    thx a lot, you are wonderfull!

  • Monika says:

    Thank you very much. It worked for me.

  • Juris says:

    Excellent! Thank You! As non-english speaker I even had difficulty to find info, as searhing for “where to buy google maps” isn’t a really good search. Ha ha ha…

  • Aruni says:

    Thank very clear

  • rams says:

    Hi I have followed as you mentioned , still i am not able to place the markers . in above Locations array for what that 0,1,2. Kindly explain that is there any relationship for lat,long.

  • Jawad Ramazany says:

    Thank you for your useful and complete scripts that is great. Would you assist me for API key code on JS page? which codes should be placed?
    Have a nice day


  • Ari says:

    Hai, im so happy to get this code, thnks fr sharing it. get in touch w/ me! visit my site. http://www.muhammadaridha.pe.hu

  • Riley says:

    This is a great tutorial, for those who might want to skip the coding, there are also third-party services who utilize the Google Maps API as part of their offering, and allow users to show the visitor dynamically the nearest location to them based on their IP network and also GPS on mobile.

    The map can be embedded in a page, or shown as a popup. These tools are pretty handy for anyone non-technical or trying to save IT resources by not having to do this themselves. One company I know has this offering is Personyze, anyway, hope it’s useful to someone.

  • John Anwoh says:

    Hey i am back….lol,
    Could you help to link the markers with lines?

    i would appreciate it a lot.


  • vedat says:

    I tried to make a donation but paypall is not working in Turkey. regards…

  • Frank says:

    Do you know how many hours I’ve been searching the internet on how to do this?
    Your instructions are clear and to the point!

    Thank you!

  • Dalton says:

    Great tutorial, I appreciate it is an old tutorial but just wondered if you had encountered the issue of google maps not dropping pins for locations that share the same postcode. It displays the first and ignores the other locations sharing that postcode. This is a huge problem as we may have 8 businesses sharing the same postcode and because of the google issue 7 out of 8 businesses dont show on the map.

    Is this something you have encountered and hopefully found a resolution to?

  • silue amadou says:

    thank for for the app but i dont how i can doallod it

  • Abhishek Parmar says:

    how to use multiple google map in C#
    this is only one map
    not only one but multiple map to show it

  • Ben says:


    Excellent tutorial thanks so much! I have everything working but I’m having a nightmare trying to get the markers to load automatically on page load i think it’s something to do with…

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

    But i can’t get it to work.

    can anybody help please?

  • Alan says:

    Thanks for the tutorial.

    I’ve set up the code on my WP web page except the map doesn’t appear.

    What am I missing?

    Please help.

  • Jesus Hilario Hernandez says:

    Awesome! This clears a lot up for me. I like the dark theme in code examples!

  • Mark says:

    Thanks for this, very helpful. How would it be possible to get the inputs address, latitude and longitude from a database? Somehow you’d have to replace the var’s broadway etc. with the id from the database as well, best I can tell.

  • Avneet says:

    how could i add searchbox on this map……..please explain with code

  • Anonymous says:

    Thank for this tt. But if I want to add more like image what should i do?

  • Anonymous says:

    Good tutorial, thanks!

  • Grant says:

    Great work Tania! This was a AWESOME help for me for stetting up a map with 35 pins / locations.

    I also added a set of 3 custom pins and added them to the locations array PLUS added custom Map style (from snazzymaps.com)

    Below is an example of my approach, this may be helpful to others (note details have been changed but this should assist others!).

    Once again, thanks for your awesome post!

    Grant – NZ

  • Rosie Niv says:

    Thank you! It was very helpful.

  • John Johnson says:

    Excellent. Nothing more need be said.

  • Robert says:

    Thank you so much for this tutorial. It has helped the middle school I work for to add our sports venues to our website. Awesome! Our kids thank you too!

  • Paola Soto says:

    I loved your explanation, it really helped me!

    I just have a question, I’m sure is possible but i just started working with scripts and is still difficult for me. Is there a way to make a button outside the map with the locations that, when someone clicks it, could center on an specific marker? maybe with an -if-

    This is what i’m trying to do:


  • ysanmiguel says:

    Simply Perfect, Thank you very much!!! 😉

  • Hashim says:

    Hi, I need a little help there.

    I just implemented the same solution by following the google map docs. But I’m stuck now, what I have done is, I’m getting multiple locations(lat and long) from the 3rd party server by using javascript ajax. But now I want to implement places API through the search input text box on the same map, but when I implement the search box my ajax function is not triggering. I have all the markers on that map and now I want to search place through input box and show the marker on that same map along with other markers after submitting places search. If you have done or have any suggestion about it. Let me know.


  • ljnet says:

    Great! Thanks for the guide.

  • Awesome article ! Help me so much!!! Tks

  • Joe says:

    This was incredibly helpful — thanks so much for sharing!

  • Drago Kanostrevac says:

    This is called a guide,

    I will be ready to use it afternoon.

    Thank You very much!

  • Jorge says:

    Hello Tania,

    This code is very helpful. I have a questions: How can you load custom markers icons base on locations type?

    • Yinka says:

      Hello Tania, thanks for your suggestions and help on this matter. However, my own situation is how to pass multiple locations as a query string to google map from my powerbuilder application. For a single location, the following syntax works for me i.e
      sAddress = “city” + ‘+’ + string(lat) + ‘+’ + string(long) where sAddress is the query string. I need to know how to change this string for multiple locations for instance, when i read many customer records from a table and i need to show their locations on the map.

  • Liam says:

    Fantastic guide. Spent hours trying to work this out and looking through guides. This one is the best by far. 10/10

  • Shariful says:

    Thank you very much for such a useful post. I downloaded the code from Github but it’s not working. Then I added my own api code. Still same. When I refresh the page I can see the map for a glance. Then I get an error message. It’s saying “See the JavaScript console for technical details.” I tried your project from Githum to here: http://msiapurno.com/test/g-map-api (with my own api).

    Can you please check?

    • Tania says:

      This is your error: The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google Developers Console.

      There’s a problem with your API key.

  • Jim says:

    Many thanks for this! I tried the code at Github and it didn’t work. Then I copied the js code from this page and it did work. Not sure what the difference is.

    Anyway, much appreciated!!! I was able to use this to create a website for a food truck that updates its upcoming schedule via a backend. So the js script is dynamically built. You can check it out at http://rawkngrub.com

    If you ever get to Memphis, I owe you something from the truck!

Tania's List

My tutorials, guides, and articles for web designers, developers, and autodidacts, sent out once a month or so. No bullshit, ads, or tricks.