Google Maps
Overview of Google Maps usage
The Woosmap Store Locator JS API can be used to display your Stores over Google Maps.
Google Maps Platform APIs require you to register for an API key. This key act as a unique identifier that authenticate the calls you make to Google Maps Platform and ensure they are billed to the correct account.
Registering a Google Maps API key
You must have a Google account to generate a key for Google Maps API.
Steps:
- Visit the Google Maps Platform page and click Get started.
- Select the Maps (and eventually Places) product to get the APIs that are needed to work with Woosmap Store Locator JS API.
- Click Continue.
- The Select a project step asks you to associate a name with your use of Google’s APIs. Either create a new name or select an existing project.
- After agreeing to the terms of service, click Next.
- Create a billing account with the Google Maps Platform. A billing account is a requirement in the new Google Maps Platform. For more information, see the Google Maps Platform pricing and billing documentation.
This Key is a long string of generated characters and looks like:
AIzaSyAQanzCC6g4sR3tgj8tmFlByqhGFVKBFZE
Google Maps Loading
The Google Maps JavaScript API is loaded by the Woosmap Loader. You don’t need to add the script by yourself.
const loader = new woosmap.MapsLoader({
key: "AIzaSyAQanzCC6g4sR3tgj8tmFlByqhGFVKBFZE" //replace with your google api key
});
loader.load(() => {
map = new google.maps.Map(document.getElementById("store-locator"), {
center: {lat: 43.345, lng: 3.673},
zoom: 9
});
});
There are two required options for every google map: center and zoom.
The initial resolution at which to display the map is set by the zoom property, where zoom 0 corresponds to a map of
the Earth fully zoomed out, and larger zoom levels zoom in at a higher resolution. Specify zoom level as an integer.
You can set many other properties to the Map like enables/disables all default UI buttons, add a custom map ID, etc… Please refer to the MapOptions object on Google Maps Doc.
