ONE NET WIKI Free and professional IT Wiki

8 steps to add Multiple Markers on Google Maps Using Google Maps API

2018-09-05 ONE NET WIKI

google-maps-api.jpg

Most times, we need more flexibility in adding multiple markers on Google Maps. After all, the method to add multiple markers on Google Maps website and introduce the map graphic restricts our development flexibility and the use of more advanced functions.

Herein, this guide could help you add multiple markers through the Google Maps JavaScript API onto your website.


1. Go to Google Maps Platform

1.png


2. Start to create a project by clicking "Get started" button on the top right 

1) Pick services you want.

2.png

2) Select a project. (Create an account if you haven’t done it yet)

4.png

3) Set up your billing.

5.png

6.png

7.png

8.png

Now, you enable your Google API project.


3. Generate an API key

  • Navigate to the APIs & Services→Credentials panel in GCP Console.

  • Select Create credentials, then select API key from the dropdown menu.

  • Click the Create button. The API key created dialog box displays your newly created key.

1.png


4. Secure your API key

An API key is unrestricted by default. To prevent unauthorized use and quota theft, restrict your API key.

api-key-application-restrictions.png


5. Enable Maps JavaScript API

Now go to API Library and enable Maps JavaScript API.

2018-09-07_083725.png

1.png


6. Try to add a marker to a map

Copy the code from the Google Maps Platform and try to add a marker to a map.

2018-09-07_090237.png

7. Add new markers through JavaScript code

Change the coordinates of your markers and 

2018-09-07_091205.png

8. Add new markers icons and animations

When you create Marker object, you can add attributes "icon" and animation to realize more styles and animations.

api-icon.gif

api-add-marker-animations2.gif


Congratulations! Now you are done with adding Multiple Markers on Google Maps Using Google Maps API.

Editor's Note: All the articles in this website are original. If reproduced, please indicate the source and link.
1252
0
All Comments (0)
Expand to publish a comment

Web Development


Web Management


Web Marketing


Web Security