NearPlace

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


July 2018
M T W T F S S
« Jun    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Categories


How To Add Multiple Markers on Google Maps

NearPlaceNearPlace

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…

Adding a Google Map to the website

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

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.