Many people are still using Google Maps, and some of them don’t know how to use API or even a graphical UI. That’s why we have prepared a special guide for you which you can read below!

1. Introduction

Last update: 2019-09-17

Usability and expandability of tools provided by Google is changing and developing all the time. In this article you will find the information about option that you can use in Google Maps: multiple markers. By using this you are not only provide your potential customers with more info and locations, but also make it easier to find your business and for you to maintain your GMaps pages.

But before we will dive into the guide, we could briefly look at what the Google Maps exactly is.

2. About Google Maps

Everyone, even people who are not really into Google tools should know what is Google Maps. You may ask – why? Because every person who has a mobile phone or a computer at least once checked where he can find the location of a store, or maybe a sightseeing place. You could have noticed multiple markers on the map once you were looking for a shop in your city and choose one which is the nearest or one which offers what you need. Of course, it is not only about the stores, you might check if there are some available services like the car wash and many more, but the aim is always the same – to find a place which you need for something. In this tutorial, we will learn you how to pinpoint multiple locations on Google Maps and how to display a map with multiple business locations on your website.

Now, when we have looked at what we are talking here about, we can now switch to the practice. Below you will find various methods of adding multiple markers to google maps. These ones have been checked by us, and we can guarantee they work. Let’s check them out.

3. Adding multiple markers to Google Maps

3.1 Graphical Method

Graphical method is the easier one. It works for people who do not use API, and want the simpliest setup possible. That’s why we prepared a fast how to, that you can find here:

3.2 Pre-Step: Google Maps Creator

Adding multiple pins to the map is quite easy, at first, sign in to Google Maps with your Google account and we can start marking your places!

Now, once you are acknowledged with the interface, expand the menu list which you can find in the top-left corner. To start adding and editing multiple places on your map you need to choose the option “your places”.

When you choose the option you will notice a new window named “your places”, it has 4 columns:

• Labeled – Places like home, work and many others which you are going to label.
• Saved – Places which you saved
• Visited – Places which you marked as already visited.
• Maps – All your maps which you have created before.

To create a Map with multiple locations, go to the “Maps” column and under the maps which you have already created you should notice a special button – “Create Map”. Once you click the button you will be redirected to a special Google Maps creator.

3.3 Adding multiple markers

The creator is called Google My Maps and you can add everything you want there, starting with multiple markers, layouts, driving directions any many more. We will focus here only on adding multiple pins to the Google Maps so if you want to read more about Google My Maps you should check our tutorial how to build a store locator with Google My Maps.

Now, you might be wondering how to add the marker to your Google Map which you have generated before. Under the search field you should notice a pinpoint icon and by clicking on it we will start adding a marker.

After clicking on the icon, Google will ask you to drop the point on the map, once you do it there will be displayed an editor of the marker, where you can change its title and description.

Let’s be honest, even the best people can’t manually place the mark on the coordinates which they need. Doing it automatically would be much better and thanks to the search field, you can easily place the pinpoint perfectly on the place which you wanted to mark.

Adding multiple points on Google Maps through search field is pretty easy and you can use in two ways:

• Searching by Coordinates – If you generated some coordinates in Google Maps or by the other methods before, you can paste them and Google My Maps will automatically put a marker on the place with that coordinates.

• Searching by name – Just type a name of your city, street, or whatever you want and Google will suggest you some results of the search, then you can choose which one is correct for you and place a marker there.

As you could have already noticed, when you add manually a marker, you instantly see the pop-up which let you change the name and the description, but when you add a multiple Google Map pins automatically, you can only click “add to the map”, you can also view the location in Google Maps to check its photos etc, if it is already a popular location.

Of course, after you add the location marker to your layout you will notice edition options, where you can:

• Change style of the marker – you can change the colour and a shape of the icon.
  
• Change name and description – nothing to describe there, you just edit these 2 values.
• Add photos – You can upload photos and logos which might help you to describe the marker.

If you can’t notice your place on the Google Maps you can always use an “add missing place” option which is located on the left menu of the Google Maps. Thanks to you can add a missing place on the map and the mark will be added to your interface.

3.4 Displaying pinpoints on Google Map

We have already added multiple map points in the map creator, but you must still wonder “Yes, I’ve added my markers already but, what’s now?”. Pretty simple – back to Google Maps and open the map you have created before.

Success! Now you know how to add multiple map markers on Google Maps! But for some people, it might not be enough…

3.5 Embed Google Maps with multiple markers

If you just wanted to create map markers thanks to which you can go sightseeing to the other country or city, you already have learned anything. If you are a developer or even just an owner of some online stores, restaurants, etc. we haven’t learned you everything yet.

Adding an HTML code of your map is pretty easy and even non-coders should be fine with it.
At first, you have to generate it and then you can prepare yourself to paste it into your website code. On the GIF below you can notice how to generate an HTML code of the map which you have created before.

Remember, to generate the code you need to set your map to the public view.

To show you how to install Google Maps as a script we will use our Shopify website.
You just need to paste the HTML code to the header or footer, or wherever you want to have your Google Map with multiple pinpoints.

To prove that it also works on other platforms we will also try to install a code on a WordPress website.

If you are using a CMS software and you are not sure where you can paste the code, you probably should check our guide about how to add a store locator or Google Maps to Shopify but if you are using other CMS or other e-commerce platforms on your website. On the Nearplace website, you will find tutorials for every popular platform.

4. API Method

API Method is harder to use, but it seems to allow more control over the entire process. It have less point’s to acomplish than the graphical method, but they require more time and are more complicated. Here you can find the fast how to for API method:

4.1 How to use Google Maps API on a website

If you have any knowledge about coding, and you would like to add everything through the code, using Google Maps API might be a great idea to show your multiple locations.

First, you need to create an account on Google Maps Platform which requires a couple of things to choose. The first choice you have to do is to check what are you planning to use on your map.

Then you select a project.

Now you have to create your billing account because Google has decided recently that now if you want to create an account you have to type in your credit card info, so they can charge you when you use the free limit. You can read more about it in our other article

In the next steps, you need to choose your account type, and insert your personal data. You can’t avoid this step.

When you’re done with inserting your personal data, creating a trial account is done and you can use Google Platform. Immediately after creating an account you will also notice a pop-up with your API key.

Now to work with your Google Maps API key you need to enable Maps JavaScript API but it should be already enabled when you create an account.

Remember to secure your API key, so others will not use it.

4.2 Adding multiple markers as a script

To show you how you can use Google API we will use a normal code editor, which might be used to build a website. A good start is to copy the first code from Google’s dev website so it will be much easier at the beginning for everyone.

Remember to enter your API code, otherwise, your map will not work properly.

Ok, if your map is already working let’s focus on adding multiple pinpoints to the map because it is our main aim. You can notice many values in the code. Let’s start with map width and height which you can see in <style> section.

Modifying height isn’t really hard especially if you insert a value with %, but also you have a possibility to type your own value e.g.1000px.

Now once you want to add more than one marker just do everything like with a first marker. Maybe it took much space but is the most simple method you could have ever imagined.

From the technical view of adding multiple pinpoints to the Google Maps, it is all. Check the GIF below to make sure you’ve done everything right.

You can also add a nice icon to your map markers by only adding one value “icon”.

If you are a fan of good animations you can always animate your own pinpoints through the API code.

As you could have noticed it isn’t really hard to create multiple basic pinpoints, but for people who have never been coding it might be hard. Once again we advise you to visit a Google developer website because you can find there almost everything about the Google API modifications. Hopefully, our guide on how to add multiple markers through the API helped you a lot with your website and you will continue your journey with the Google Maps.

4.3 Google Maps Clusters – Introduction 

If you followed the entire API tutorial now probably you have an ability to create few simple markers. For small companies or short trips(depends on the aim of the map) it is enough, but once you would like to have like 20 markers and they are close to each other you might notice a new problem. Check on the screen below how terrible the map looks with many markers next to the each other.

There is one perfect solution for that problem – Map Clusters. Now you must be thinking and asking yourself – how can I cluster the map? It is a little bit more advanced method than adding simple markers but thanks to the Google guides even non-coders should be fine with it. Just follow the steps you are going to see below.

First, you do not need the previous code with simple markers if you want to create map clusters. Just go to the Google Developers website and copy the code with the clusters made written by Google Devs.

Always when you paste the new Google Maps code remember to insert your JavaScript API KEY!

Once your map is working you should notice 4 the most important elements of the code.

4.3.1 Marker labels

Variable labels or whatever you want to name it in your code, allows you to “name” your markers. The value which you have inserted will be displayed on a marker as its label. If you insert “1234567” markers will be displayed with the numbers, if you want to display numbers with the letter then you can insert “A1B2B56” etc. Remember you can only display a single sign on the marker.

4.3.2 Multiple Markers Display function

As you can notice the function read your locations and label values and then gives every marker its label. Thanks to it also the map knows where it should display the markers, it is the most important thing in our code, so better don’t mess it up. It is like adding simple markers but in a more automatic way.

4.3.3 Cluster display function

It is a short function which bases on our map settings and on the function with markers which we have mentioned before. You can also set the imagePath so the clusters will look just as you want.

4.3.4 Your Locations

You add every location you would like to have on your map by its latitude and longitude. Thanks to it function which gathers all the locations can work properly and display the markers on the map.

4.4 How to add a Google Map cluster

Once you know all the important functions it is a piece of cake. The first step is adding all the required locations to your map, without it, the function will not know where it should place your map markers.

Then add the labels which fit you at the most and if you haven’t changed anything in the naming of your variables the Google Map cluster should already work with all of your pinpoints on the map. Now you can see how much the code from Google Devs help. You just need to change some details and it is all.

As you see the Map clusters are really important when you want to manage many markers e.g in one city. It helps not only you but also the other people who want to check something on your map. Hopefully thanks to us you have learned how to add a cluster and multiple pins at once.

5. Geolocation in the Google Maps API & Alternative

There are of course more methods than this two, and also alternatives to them. We have widely described these two because they are most popular and easiest to understand. But if you want something different and you know what you want to do, you can check out some different ways of adding multiple markers to GMaps below.

5.1 Google Maps API current location

You should have already noticed that geolocation, in other words, is a navigation to your current position on the map. When you open the Google Maps it asks you if you allow them to know your location. Once you accept, the map will show your current location. It is really useful in case of driving direction because you can just share your location and just insert the destination point.

Now when you know something about the geolocation, let’s try to code this feature into our map. As with every feature you want to add to your map, you should just copy the entire code from the developer’s website. It is always the easiest way to learn the code and make feature working really fast.

The code looks a little bit complicated but once you analyze it deeper there shouldn’t be a problem to understand it. If you haven’t read the beginning of the tutorial you should know that our map is generated in initmap() function.

Now to make geolocation work we need to call the getCurrentPositionfunction which will read the position of our device and give it to the special variable with coordinates.

Then we need to handle the info windows so the user will actually know what happens if geolocation was successful. Also, we can centre the map on the current user’s position, because who would like to scroll the map to his current location, if the default centre place is far away…

The last important part of the code is the handleLocationError function which will return errors if something goes wrong. In our case, we have the information returned when the user blocks the geolocation feature or when the browser which you are using does not support geolocation.

That is pretty much all about adding the basic Google Map with the geolocation and it works for sure as you can see it on the GIF below. If it doesn’t in your case, be sure that your browser supports geolocation and if it does, check your code once again.

Here, is what hapens when you block the geolocation.

Also, remember to insert your API key otherwise the map will be not working and if you would like to make your map much more attractive to the user, check our new tutorial about the Google Maps Customization.

5.2 Google Maps geolocation alternatives

It is obvious that Google Maps is not the only mapping platform which allows the user to use geolocation, that’s we have prepared a short list of the geolocation features from the competitors of Google.

5.2.1 MapBox

Mapbox as one of the biggest competitors of Google Maps also have a possibility to code the geolocation feature. It looks really nice and doesn’t ask you if you want to allow it to show your current location or not(at least for me it is sometimes annoying). You just have the big icon in the top-right corner and once you click it, you will be asked to allow the geolocation feature.

The code looks even shorter than Google one but we will not really describe the entire MapBox coding here. Just check it out on your own!

Overall the map and the button look really nice and it might be a good alternative to Google Maps if you are looking for one.

If you would like to know more about the Mapbox features don’t hesitate and check our Mapbox tutorial.

5.2.2 Bing Maps

Bing Maps which is owned by Microsoft also might be a good alternative if you are looking for a nice geolocation. We will not show you the code in this case but the graphical map UI which Bing Maps offers as a preview is enough to see if the geolocation is good enough for you.

You can also easily print this map or share it with the others, so if you are a non-coder you really doesn’t need their API to be happy.

On the right, you have a special button which starts the geolocation. Once you click it just as with the Mapbox it will ask you if you allow it to share your current position or not.

In my opinion, the button looks the best compared to the others mapping platforms, it has also a special list which you can expand and it will show your country, voivodeship and city.

5.2.3 Here

Same goes with the Here Maps, you don’t really need an API to get your current location, they also offer a nice graphical map creator with the geolocation option. The UI is really intuitive, so you should notice the geolocation button really fast.

Just press it and as every other mapping tool, it will ask you if you allow them to know your current location.

Once you agree, the map will centre on your current location, so as you see it was pretty simple and intuitive.

It is always good to compare other geolocation features so you really can see if the Google geolocation fits you at the most or not really. We leave the choice to you and if you are still not really decided after this short comparison, check our big comparison about other Google Maps alternatives where we type also about pricing and the other things.

6. Summary

In our tutorial, we showed you how to add multiple markers on Google Maps manually and automatically, and how you can add the Google Maps to your own website thanks to the HTML code. Overall the process is really easy and shouldn’t cause many troubles if you have followed our guide step by step. Also if you would like to manage many business locations, you should also try the type of the app called a store locator.

Except for a nice map and markers, Nearplace also offers a store finder which may help you to bring more customers to your website and it looks much better than Google Maps listings. If you would like to try our app it is completely free for unlimited locations and the only thing which is required is to sign up on our website!. Anyway if you liked our tutorial or you still have some questions please leave us a comment and we will try to answer you immediately.