Getting Started #
Embed Google map anywhere on your webpage. Most importantly, on the contact page, so your visitors can know where you are located. Display pre-defined locations (latitude and longitude) on an on-screen map. Just follow the step-by-step process to connect the Google Map.
Step=>1: Generate Google Map API Key #
- Go to Google Cloud Platform Console. If you don’t have an account yet, create one, it’s free.
- Click Go to the Credentials page
![](https://wpmet.com/wp-content/uploads/2022/12/map1.png.webp)
- Select or create a project.
![](https://wpmet.com/wp-content/uploads/2022/12/map2.png.webp)
- Put a Project name and Location
- Click CREATE
![](https://wpmet.com/wp-content/uploads/2022/12/map3.png.webp)
- Your project has been created
- Go to the hamburger menu
- Find APIs & Services
![](https://wpmet.com/wp-content/uploads/2022/12/map4.png.webp)
- Click ENABLE APIS AND SERVICES
![](https://wpmet.com/wp-content/uploads/2022/12/map5.png.webp)
- Search map in the search box-
![](https://wpmet.com/wp-content/uploads/2022/12/map6.png.webp)
- Click Maps JavaScript API and enable it
- Go to Credentials
- Now click on “Create Credentials”, you will see your API key. Copy the API Key from here.
![](https://wpmet.com/wp-content/uploads/2022/12/G-map.gif)
- Now go to Elementskit=> User data=> Click on the Google Map to Expand. Provide your API key to Connect Google Map.
![](https://help.wpmet.com/wp-content/uploads/2021/02/Annotation-on-2021-02-02-at-16-34-43-1024x487.png)
- Now Search for Google Map=> Drag=> Drop on the selected area
![](https://help.wpmet.com/wp-content/uploads/2021/02/Annotation-on-2021-02-02-at-17-38-08-1024x510.png)
Step=>2: Select Map Type #
Set Up Basic Map #
Add a simple Google map with a marker to your web page. It suits people with beginner or intermediate knowledge.
- Click on Settings=> Select map type Basic from the drop-down. You can see the basic map type appeared
![](https://help.wpmet.com/wp-content/uploads/2021/02/Annotation-on-2021-02-02-at-17-51-28-1024x466.png)
- Choose Address from the selected area=> Provide your Address
- You can see the selected location
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-09-at-14-44-52-1024x475.png)
Get Latitude and Longitude: Latitude is used together with longitude to specify the precise location of features on the surface of the Earth
- Go to https://www.google.com/maps/=> Search for your location=> Right-click on the Map’s pin point=> Now copy the Latitude & Longitude
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-14-at-14-56-30-1024x518.png)
- Now choose Address type: Coordinates
- Provide Latitude: Latitude is the measurement of distance north or south of the Equator.
- Provide Longitude: Longitude is the measurement east or west of the Equator.
- You can see the exact location showing
![](https://help.wpmet.com/wp-content/uploads/2021/02/Annotation-on-2021-02-03-at-12-54-01-1024x499.png)
- Click on Marker Settings=> Provide Marker Title=> Add Content that will show on hovering
![](https://help.wpmet.com/wp-content/uploads/2021/02/Annotation-on-2021-02-04-at-14-34-32-1024x463.png)
- Enable the toggle to Custom Marker Icon
- Upload your marker icon
- Control marker width
- Control marker height
- You can see the custom Image/ icon showing
![](https://help.wpmet.com/wp-content/uploads/2021/02/Annotation-on-2021-02-04-at-17-41-40-1024x462.png)
Click on Control
- Control Zoom Level: You can provide any number
- Enable Street View Control: It contains a Pegman icon that can be dragged onto the map to enable Street View.
- Turn on Map Type Control: The Map Type control allowing the user to choose a map type (ROADMAP, SATELLITE).
- Enable Zoom Control: The Zoom control displays “+” and “-” buttons to change the zoom level of the map.
- Enable Fullscreen Control: The Fullscreen control offers the option to open the map in fullscreen mode.
- Enable Scroll Wheel Zoom: Each click, up or down, increases or decreases the zoom factor by 10%
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-09-at-13-00-33-1024x480.png)
- Click on Theme=> Choose Theme Source Type: Google Standard
- Choose Google Theme Type from the drop-down
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-09-at-13-19-16-1024x476.png)
- Select Theme Source: Snazzy Maps
- Choose your snazzy maps theme from the drop-down
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-09-at-13-24-07-1024x477.png)
- Select Theme Source: Custom
- Provide your custom style on the box
- Click on the selected area to get JSON style code to style your map
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-09-at-13-30-06-1024x440.png)
Set up Multiple Marker Map #
Add up multiple marker on the map. Each marker being clickable to display information.
- Click on Settings=> Select map type Multiple Marker from the drop-down.
- You can see the basic map type appeared
![](https://help.wpmet.com/wp-content/uploads/2021/02/Annotation-on-2021-02-04-at-11-24-03-1024x488.png)
- Choose Address from the selected area=> Provide your Address
- You can see the selected location
![](https://help.wpmet.com/wp-content/uploads/2021/03/Screenshot_1-1024x455.png)
- Choose Address type: Coordinates
- Provide Latitude
- Provide Longitude
- You can see the exact Address showing as a Marker
![](https://help.wpmet.com/wp-content/uploads/2021/03/Screenshot_2-1024x458.png)
- Click on Marker Settings
- Click over the content to expand
- Provide Latitude
- Provide Longitude
- Add Tooltip Name
- Add any content on the box
- You can see the output showing exactly
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-09-at-15-46-27-1024x476.png)
- Turn on Custom Icon Toggle
- Upload your Icon
- Select Icon Width
- Select Icon Height
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-09-at-17-04-26-1024x477.png)
Click on Control
- Control Zoom Level: You can provide any number
- Enable Street View Control: It contains a Pegman icon that can be dragged onto the map to enable Street View.
- Turn on Map Type Control: The Map Type control allowing the user to choose a map type (ROADMAP, SATELLITE).
- Enable Zoom Control: The Zoom control displays “+” and “-” buttons to change the zoom level of the map.
- Enable Fullscreen Control: The Fullscreen control offers the option to open the map in fullscreen mode.
- Enable Scroll Wheel Zoom: Each click, up or down, increases or decreases the zoom factor by 10%
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-09-at-13-00-33-1024x480.png)
- Click on Theme=> Choose Theme Source Type: Google Standard
- Choose Google Theme Type from the drop-down
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-09-at-13-19-16-1024x476.png)
- Select Theme Source: Snazzy Maps
- Choose the theme of your snazzy map from the drop-down
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-09-at-13-24-07-1024x477.png)
- Select Theme Source: Custom
- Provide your custom style on the box
- Click on the selected area to get JSON style code to style your map
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-09-at-13-30-06-1024x440.png)
Set up Static Map #
Static maps are standalone images in PNG format that can be displayed on web and mobile devices without the aid of a mapping library or API.
- Select Map Type: Static
- Control Static Image Width
- Control Static Image Height
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-09-at-17-54-38-1024x476.png)
Set up Polyline Map #
You can use a polyline to draw lines on a map in Google Maps.
- Select Map Type: Polyline
- You can see the Polyline Map appeared
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-09-at-18-04-52-1024x468.png)
- Provide your coordinate title
- Provide Latitude
- Provide Longitude
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-09-at-19-06-43-1024x499.png)
Set up Polygon Map #
A polygon (like a polyline) defines a series of connected coordinates in an ordered sequence.
- Select Map Type: Polygon
- You can see the Polygon Map appeared
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-10-at-12-40-53-1024x496.png)
- Provide your coordinate title
- Provide Latitude
- Provide Longitude
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-10-at-12-51-22-1024x500.png)
- Provide Latitude
- Provide Longitude
- Add any content on the box
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-10-at-13-06-51-1024x471.png)
Set up Overlay Map #
Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map.
- Select Map Type: Overlay
- You can see the Overlay Map appeared
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-10-at-13-19-49-1024x466.png)
- Provide Latitude
- Provide Longitude
- Select Overlay content on the box
- You can see the exact content appeared accordingly
![](https://help.wpmet.com/wp-content/uploads/2021/03/Annotation-on-2021-03-10-at-19-08-55-1024x498.png)