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.
- Go to Google Maps
- Find “your places”.
- Press the button “Create a Map”.
- Use the icon of a marker to add it manually.
- Use the search field to add marker automatically
- Change style of the markers if you want.
- Save the map.
- If you want to show your map on a website, make it public.
- Generate an HTML code.
- 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!
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.
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.
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…
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.
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.
- Go to Google Maps Platform
- Create an account if you haven’t done it yet.
- Generate an API key.
- Secure your API key.
- Copy the code from the Google developers website.
- Change the height of the map if you want.
- 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.
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.
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.
Remember to secure your API key, so others will not use it.
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 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.
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.