Skip to content
Support center
  • Home
  • Support Center
  • Docs
  • Changelog

General

  • Support
  • Plugin Bundled with Themes
  • How to Revoke Product License Key
  • How to purchase ElementsKit and Metform Pro License

Elements Kit

  • Widget Builder
  • Header & Footer Builder
  • Mega Menu Builder
  • Vertical Mega Menu
  • One Page Scroll
  • Parallax Effects
  • Instagram Feed API
  • Facebook Feed API
  • Facebook Messenger
  • Twitter Feed API
  • Advanced Accordion
  • Advanced Tab
  • Timeline
  • Advanced Chart
  • Data Table
  • Creative Button
  • Motion Text
  • Hotspot
  • Gallery
  • Woocommerce Product List
  • Woocommerce Category List
  • Woocommerce Mini Cart
  • Woocommerce Product Carousel
  • Heading Title
  • Button
  • Team
  • Accordion
  • Tab
  • Social Media
  • Client Logo
  • Mailchimp
  • FAQ
  • Image
  • FunFact
  • Countdown Timer
  • Image Box
  • Image Accordion
  • Icon Box
  • Pie-Chart
  • Progress Bar
  • Pricing Table
  • Testimonial
  • Header Info
  • Video
  • Image Comparison
  • Post Tab
  • Post List
  • Page List
  • Header Off-canvas
  • Dropcaps
  • Duel Button
  • Business Hours
  • Social Share
  • Category List
  • Search
  • Post Grid
  • Nav Menu
  • Contact Form 7
  • Caldera Form
  • We Forms
  • Wp Forms
  • Ninja Forms
  • Tablepress
  • Unfold
  • Advanced Toggle
  • Google Map
  • Trustpilot
  • Facebook Review
  • Yelp
  • Pop Up Modal

MetForm

  • Getting Started
  • Form Input Field
  • Pro Input Field List
  • Pro Feature- Multi-Step Form
  • Pro Feature- Calculation
  • Pro Feature- Payment Method
  • Pro Feature- Conditional Logic
  • General
  • Confirmation
  • Notification Email
  • Integration
  • Payment
  • CRM
  • Auth
  • reCAPTCHA Integration
  • PayPal Payment Set Up
  • Stripe Payment Set Up
  • Thank You Page
  • Mailchimp Integration
  • AWeber Integration
  • ActiveCampaign
  • GetResponse Integration
  • ConvertKit Integration
  • Hubspot
  • Zoho
  • MailPoet Integration
  • Slack Integration
  • Support
  • WooCommerce Checkout
  • Create Post with MetForm
  • Response Message

WP Social

  • GETTING STARTED WITH WP SOCIAL
  • WP SOCIAL FACEBOOK LOGIN
  • WP SOCIAL GOOGLE LOGIN APP
  • WP SOCIAL LINKEDIN LOGIN APP
  • WP SOCIAL TWITTER APP
  • WP SOCIAL WORDPRESS APP
  • WP SOCIAL GITHUB APP
  • WP SOCIAL REDDIT APP
  • WP SOCIAL DRIBBBLE APP
  • WP SOCIAL COMMENT COUNT
  • WP SOCIAL POST COUNT

WP Ultimate Review

  • Settings

WP Fundraising Donation

  • Getting Started with WP Fundraising
  • WP Fundraising With Crowdfunding
  • WP fundraising with Single Donation Campaign
  • Others Way to Add Campaign
  • WP Fundraising With Default Payments
  • WP Fundraising with Woocommerce
  • Short-Code
  • Do-Action

ShopEngine

  • Getting Started
  • Create Shop Page Template
  • Create Single Product Page Template
  • Create Cart Page Template
  • Create Checkout Page Template
  • Create Order/Thank You Page Template
  • Create My Account Page
  • Create a Quick View Popup Page
  • Home
  • Docs
  • Elements Kit
  • Google Map

Google Map

Table of Contents
  • Getting Started
  • Step=>1: Generate Google Map API Key
  • Step=>2: Select Map Type
    • Set Up Basic Map
    • Set up Multiple Marker Map
    • Set up Static Map
    • Set up Polyline Map
    • Set up Polygon Map
    • Set up Overlay Map

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.
  • Select or create a project.
  • Set up your billing account From Here: https://console.cloud.google.com/freetrial/signup/tos
  • You need to enable Maps JavaScript API  to connect your Google Map.
  • Go to Maps JavaScript API=> Click “Enable.”
  • Now click on “Credentials”, you will see your API key. Copy the API Key from here.
  • Now go to Elementskit=> User data=> Click on the Google Map to Expand. Provide your API key to Connect Google Map.
  • Now Search for Google Map=> Drag=> Drop on the selected area

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
  • Choose Address from the selected area=> Provide your Address
  • You can see the selected location

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
  • 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
  • Click on Marker Settings=> Provide Marker Title=> Add Content that will show on hovering
  • 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

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%
  • Click on Theme=> Choose Theme Source Type: Google Standard
  • Choose Google Theme Type from the drop-down
  • Select Theme Source: Snazzy Maps
  • Choose your snazzy maps theme from the drop-down
  • 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

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
  • Choose Address from the selected area=> Provide your Address
  • You can see the selected location
  • Choose Address type: Coordinates
  • Provide Latitude
  • Provide Longitude
  • You can see the exact Address showing as a Marker
  • 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
  • Turn on Custom Icon Toggle
  • Upload your Icon
  • Select Icon Width
  • Select Icon Height

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%
  • Click on Theme=> Choose Theme Source Type: Google Standard
  • Choose Google Theme Type from the drop-down
  • Select Theme Source: Snazzy Maps
  • Choose the theme of your snazzy map from the drop-down
  • 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

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. 

  1. Select Map Type: Static
  2. Control Static Image Width
  3. Control Static Image Height

Set up Polyline Map #

You can use a polyline to draw lines on a map in Google Maps.

  1. Select Map Type: Polyline
  2. You can see the Polyline Map appeared
  • Provide your coordinate title
  • Provide Latitude
  • Provide Longitude

Set up Polygon Map #

A polygon (like a polyline) defines a series of connected coordinates in an ordered sequence.

  1. Select Map Type: Polygon
  2. You can see the Polygon Map appeared
  • Provide your coordinate title
  • Provide Latitude
  • Provide Longitude
  • Provide Latitude
  • Provide Longitude
  • Add any content on the box

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.

  1. Select Map Type: Overlay
  2. You can see the Overlay Map appeared
  • Provide Latitude
  • Provide Longitude
  • Select Overlay content on the box
  • You can see the exact content appeared accordingly
What are your Feelings
Share This Article :
Updated on April 21, 2021
Advanced Toggle Trustpilot
Table of Contents
  • Getting Started
  • Step=>1: Generate Google Map API Key
  • Step=>2: Select Map Type
    • Set Up Basic Map
    • Set up Multiple Marker Map
    • Set up Static Map
    • Set up Polyline Map
    • Set up Polygon Map
    • Set up Overlay Map
Copyright © 2021 Wpmet