NearPlace

Join 1,400+ marketers, founders, UX designers, and software engineers and receive our next insights:


September 2018
M T W T F S S
« Aug    
 12
3456789
10111213141516
17181920212223
24252627282930

Categories


How To Add Multiple Markers on Google Maps

NearPlaceNearPlace

Last update: 2018-08-23


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!


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.


Graphical Method


Fast How-to

  1. Go to Google Maps
  2. Find “your places”.
  3. Press the button “Create a Map”.
  4. Use the icon of a marker to add it manually.
  5. Use the search field to add marker automatically
  6. Change style of the markers if you want.
  7. Save the map.
  8. If you want to show your map on a website, make it public.
  9. Generate an HTML code.
  10. Add the map to your website.

 

Google Maps – Introduction

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!

Google-maps-interface

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”.

google-maps-your-places

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

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.

google-map-create-map

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.

google-my-maps-interface

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.

google-my-maps-marker-add

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.

google-maps-add-pinpoint

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.

google-my-maps-search-field

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

google-maps-search-by-coordinates

google-maps-place-multiple-markers

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.

google-maps-add-marker

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

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.

google-maps-missing-places

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.

google-maps-result

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

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.

google-maps-multiple-markers-code-generate

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

google-maps-set-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.

google-maps-code-implementation-shopify

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

google-maps-code-implementation-wordpress

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.


API Method


Fast How-to

  1. Go to Google Maps Platform
  2. Create an account if you haven’t done it yet.
  3. Generate an API key.
  4. Enable Maps JavaScript API
  5. Secure your API key.
  6. Copy the code from the Google developers website.
  7. Change the height of the map if you want.
  8. Add new markers through JavaScript code.
  9. Add new markers animations and icons.

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.

google-platform

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.

google-platform-aim-choice

Then you select a project.

google-platform-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

google-platform-billing-account

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

google-platform-account-details

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.

google-platform-api

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.

google-platform-enable-javascript-maps

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

api-security-settings

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.

google-dev-copy-paste-code

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

google-maps-adding-api-to-code

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.

google-maps-map-style

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.

google-maps-api-map-heigh

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.

google-maps-api-code-description

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.

google-maps-api-add-multiple-markers
You can also add a nice icon to your map markers by only adding one value “icon”.

google-maps-api-marker-icon

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

google-maps-api-marker-animations

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.

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.

stacked

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.
copy-code.gif

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

api-key

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

cluster-functions

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.

marker-labels

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.

markers-display

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.

clusters_display

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.

locations

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.
google-clusters-effect

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.

google-clusters-effectt

Geolocation in the Google Maps API & Alternative

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.

google-maps-geolocation

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.

geolocation-copy-code

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.

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.

getcurrentposition-function

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…

infowindow

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.

handlelocationerror

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.

geolocation-success

Here, is what hapens when you block the geolocation.

geolocation-failure

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.

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.

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.

mapbox-geolocation

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!

mapbox-code

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.

mapbox-success

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

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.

bing-maps-preview

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.

bing-maps-button

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.

bing-maps-end

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.

here-button

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

here-allow-your-current-position

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

here-end

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.

Final thoughts

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.

Nearplace-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.