here is the link to Google Maps Platform for mention :
hypertext transfer protocol : //developers.google.com/maps/documentation/javascript/overview
Overview of the 5 Step Process
- Create or open the .html you are going to work with.
- Copy and paste the script tag provided in the Google Maps Platform at the bottom of the body tag.
- Get an API key (the unique identifier for your map) to insert in the script where YOUR_API_KEY placeholder is.
- Create a div with id=”map” (where the map will be displayed) and a style for that div.
- Create initMap() function in another script tag where you will use the google.maps.Map and google.maps.Marker objects to call map and markers on the div with id=”map”.
Details
That ’ s all you need to do to call the map using Google API ! The following are the details :
1 ) and 2 ) are straight-forward. Just go ahead and paste that handwriting tag before the end of
To get started, google “ Google API comfort ” or go to :
hypertext transfer protocol : //console.developers.google.com/projectselector2/apis/dashboard ? pli=1 & supportedpurview=project
Before you start, make certain you enable billing on Google Cloud Project and “ Activate ” your absolve trial ( pop-up book on top of your screen or click the navigation bar on the top leftover, then click charge ). There is a $ 200 monthly credit rating, and this is more than enough to cover for the majority of the websites with centrist traffic. In other words, this is complimentary. here is a pricing board for your Reference :
hypertext transfer protocol : //cloud.google.com/maps-platform/pricing/sheet/
Without the charge report, you will get a BillingNotEnabledMapError in the cabinet. here is a link that shows the tilt of errors you might encounter and how you might go about them :
hypertext transfer protocol : //developers.google.com/maps/documentation/javascript/error-messages # api-not-activated-map-error
Hit “ Create Project ” and create a project with a name you favor .
Click the Navigation Bar on the acme leave recess and go to APIs & Services > Dashboard .
Click “ +Enable APIs and Services ” at the top of the page.
Select “ Maps Javascript API ” for our shell. Hit “ Enable. ”
Go to APIs & Services > Credentials under the Navigation Bar .
Hit “ +Create Credentials ” and select the “ API key. ”
A modal auxiliary verb containing your API key would pop up, and you can copy that key into your clipboard .
paste the API key in this script tag after “ key= ” where YOUR_API_KEY was placed. This rag has a recall for an initMap which we will define late .
...
...
...
Create an empty div with id= ” map ”.
This is the container for the map. Add a style to this id inside
. immediately create a routine called initMap in another script tag ( above the previous script tag ) .
Passing “ document.getElementById ( ‘ map ’ ) in the google.maps.Map object will create a character to the
- Zoom level ranges from 0 to 20.
- You can easily find the latitude and longitude of the address on Google.
- https://www.latlong.net/convert-address-to-lat-long.html is one of the websites that does the conversion for you.
Marker object takes in 2 options—map and position .
Final overview
...
That ’ s all you need to know to call Google Map through Javascript API. I hope you found this blog helpful !
Read more: Google drive
About the Author
David Hwang is an Associate Technical Consultant in the Sitecore/Microsoft Business Unit. He will be blogging about assorted concepts in technologies for beginners. More from this Author
