{"id":12064,"date":"2021-03-11T11:05:56","date_gmt":"2021-03-11T11:05:56","guid":{"rendered":"https:\/\/help.wpmet.com\/?post_type=docs&#038;p=12064"},"modified":"2023-11-16T11:14:34","modified_gmt":"2023-11-16T11:14:34","password":"","slug":"google-map","status":"publish","type":"docs","link":"https:\/\/wpmet.com\/doc\/google-map\/","title":{"rendered":"Google Map"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Embed Google map anywhere on your webpage. Most importantly, on the contact page, so your visitors can know where you are located.&nbsp;Display pre-defined locations (latitude and longitude) on an on-screen&nbsp;map. Just follow the step-by-step process to connect the Google Map.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step=&gt;1: Generate Google Map API Key<\/h2>\n\n\n\n<ul class=\"is-style-checkbox wp-block-list\">\n<li>Go to\u00a0<a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key\" rel=\"noreferrer noopener\">Google Cloud Platform Console<\/a>. If you don\u2019t have an account yet, create one, it\u2019s free.<\/li>\n\n\n\n<li>Click Go to the Credentials page<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1919\" height=\"897\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map1.png\" alt=\"\" class=\"wp-image-53940\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map1.png 1919w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map1-768x359.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map1-360x168.png 360w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map1-1536x718.png 1536w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"is-style-checkbox wp-block-list\">\n<li>Select or create a project.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1899\" height=\"925\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map2.png\" alt=\"\" class=\"wp-image-53941\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map2.png 1899w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map2-768x374.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map2-360x175.png 360w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map2-1536x748.png 1536w\" sizes=\"(max-width: 1899px) 100vw, 1899px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"is-style-checkbox wp-block-list\">\n<li>Put a Project name and Location<\/li>\n\n\n\n<li>Click CREATE<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1919\" height=\"923\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map3.png\" alt=\"\" class=\"wp-image-53942\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map3.png 1919w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map3-768x369.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map3-360x173.png 360w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map3-1536x739.png 1536w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"is-style-checkbox wp-block-list\">\n<li>Your project has been created<\/li>\n\n\n\n<li>Go to the hamburger menu<\/li>\n\n\n\n<li>Find APIs &amp; Services<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1919\" height=\"926\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map4.png\" alt=\"\" class=\"wp-image-53944\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map4.png 1919w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map4-768x371.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map4-360x174.png 360w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map4-1536x741.png 1536w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"is-style-checkbox wp-block-list\">\n<li>Click ENABLE APIS AND SERVICES<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1919\" height=\"925\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map5.png\" alt=\"\" class=\"wp-image-53946\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map5.png 1919w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map5-768x370.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map5-360x174.png 360w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map5-1536x740.png 1536w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"is-style-checkbox wp-block-list\">\n<li>Search map in the search box-<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1919\" height=\"920\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map6.png\" alt=\"\" class=\"wp-image-53947\" srcset=\"https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map6.png 1919w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map6-768x368.png 768w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map6-360x173.png 360w, https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/map6-1536x736.png 1536w\" sizes=\"(max-width: 1919px) 100vw, 1919px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"is-style-checkbox wp-block-list\">\n<li>Click Maps JavaScript API and enable it<\/li>\n\n\n\n<li>Go to Credentials<\/li>\n\n\n\n<li>Now click on \u201c<strong>Create<\/strong> <strong>Credentials<\/strong>\u201d, you will see your API key. Copy the API Key from here. <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1461\" height=\"720\" src=\"https:\/\/wpmet.com\/wp-content\/uploads\/2022\/12\/G-map.gif\" alt=\"\" class=\"wp-image-53945\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"is-style-checkbox wp-block-list\">\n<li>Now go to <strong>Elementskit<\/strong>=&gt; <strong>User data<\/strong>=&gt; Click on the <strong>Google Map <\/strong>to Expand. Provide your <strong>API key<\/strong> to Connect Google Map.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/02\/Annotation-on-2021-02-02-at-16-34-43-1024x487.png\" alt=\"\" class=\"wp-image-12065\" \/><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"is-style-checkbox wp-block-list\">\n<li>Now Search for <strong>Google Map=&gt; Drag=&gt; Drop<\/strong> on the selected area<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/02\/Annotation-on-2021-02-02-at-17-38-08-1024x510.png\" alt=\"\" class=\"wp-image-12066\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step=&gt;2: Select Map Type <\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Set Up Basic Map<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Add a&nbsp;simple Google map&nbsp;with a marker to your web page. It suits people with beginner or intermediate knowledge.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on <strong>Settings<\/strong>=&gt; Select map type <strong>Basic<\/strong> from the drop-down. You can see the basic map type appeared<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/02\/Annotation-on-2021-02-02-at-17-51-28-1024x466.png\" alt=\"\" class=\"wp-image-12067\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose Address from the selected area=&gt; Provide your Address <\/li>\n\n\n\n<li><strong>You can see the selected location <\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-09-at-14-44-52-1024x475.png\" alt=\"\" class=\"wp-image-12286\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Get Latitude and Longitude<\/strong>: Latitude&nbsp;is used together with&nbsp;longitude&nbsp;to specify the precise location of features on the surface of the Earth<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <a rel=\"noreferrer noopener\" href=\"https:\/\/www.google.com\/maps\/\" target=\"_blank\">https:\/\/www.google.com\/maps\/<\/a>=&gt; Search for your location=&gt; Right-click on the Map&#8217;s pin point=&gt; Now copy the <strong>Latitude &amp; Longitude<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-14-at-14-56-30-1024x518.png\" alt=\"\" class=\"wp-image-12353\" \/><\/figure>\n\n\n\n<div style=\"height:3px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Now choose Address type: Coordinates<\/strong><\/li>\n\n\n\n<li><strong>Provide Latitude:<\/strong> Latitude&nbsp;is the measurement of distance north or south of the Equator.<\/li>\n\n\n\n<li><strong>Provide Longitude:<\/strong> Longitude&nbsp;is the measurement east or west of the Equator. <\/li>\n\n\n\n<li><strong>You can see the exact location showing<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/02\/Annotation-on-2021-02-03-at-12-54-01-1024x499.png\" alt=\"\" class=\"wp-image-12084\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on <strong>Marker Settings<\/strong>=&gt; Provide <strong>Marker Title<\/strong>=&gt; Add Content that will show on hovering<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/02\/Annotation-on-2021-02-04-at-14-34-32-1024x463.png\" alt=\"\" class=\"wp-image-12111\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Enable the toggle to Custom Marker Icon<\/li>\n\n\n\n<li>Upload your marker icon <\/li>\n\n\n\n<li>Control marker width<\/li>\n\n\n\n<li>Control marker height<\/li>\n\n\n\n<li><strong>You can see the custom Image\/ icon showing<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/02\/Annotation-on-2021-02-04-at-17-41-40-1024x462.png\" alt=\"\" class=\"wp-image-12113\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Click on <strong>Control<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Control Zoom Level:<\/strong> You can provide any number<\/li>\n\n\n\n<li><strong>Enable Street View Control:<\/strong> It contains a Pegman icon that can be dragged onto the map to enable Street View.<\/li>\n\n\n\n<li><strong>Turn on Map Type Control:<\/strong> The&nbsp;Map Type control allowing the user to choose a map type (ROADMAP, SATELLITE).<\/li>\n\n\n\n<li><strong>Enable Zoom Control: <\/strong>The&nbsp;Zoom control&nbsp;displays \u201c+\u201d and \u201c-\u201d buttons to change the zoom level of the map.<\/li>\n\n\n\n<li><strong>Enable Fullscreen Control: <\/strong>The&nbsp;Fullscreen control&nbsp;offers the option to open the map in fullscreen mode.<\/li>\n\n\n\n<li><strong>Enable Scroll Wheel Zoom: <\/strong>Each click, up or down, increases or decreases the&nbsp;<strong>zoom<\/strong>&nbsp;factor by 10%<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-09-at-13-00-33-1024x480.png\" alt=\"\" class=\"wp-image-12281\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on Theme=&gt; Choose Theme Source Type: <strong>Google Standard <\/strong><\/li>\n\n\n\n<li>Choose Google Theme Type from the drop-down<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-09-at-13-19-16-1024x476.png\" alt=\"\" class=\"wp-image-12282\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select Theme Source: <strong>Snazzy Maps<\/strong><\/li>\n\n\n\n<li>Choose your snazzy maps theme from the drop-down<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-09-at-13-24-07-1024x477.png\" alt=\"\" class=\"wp-image-12283\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select Theme Source: <strong>Custom<\/strong><\/li>\n\n\n\n<li>Provide your custom style on the box<\/li>\n\n\n\n<li>Click on the selected area to get <em><strong>JSON style code<\/strong> <\/em>to style your map<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-09-at-13-30-06-1024x440.png\" alt=\"\" class=\"wp-image-12285\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Set up Multiple Marker Map<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Add up multiple marker on the map. Each marker being clickable to display information. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on <strong>Settings<\/strong>=&gt; Select map type <strong>Multiple Marker<\/strong> from the drop-down. <\/li>\n\n\n\n<li><strong>You can see the basic map type appeared<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/02\/Annotation-on-2021-02-04-at-11-24-03-1024x488.png\" alt=\"\" class=\"wp-image-12107\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose Address from the selected area=&gt; Provide your Address<\/li>\n\n\n\n<li><strong>You can see the selected location<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Screenshot_1-1024x455.png\" alt=\"\" class=\"wp-image-12287\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Choose Address type: <strong>Coordinates<\/strong><\/li>\n\n\n\n<li>Provide Latitude<\/li>\n\n\n\n<li>Provide Longitude<\/li>\n\n\n\n<li><strong>You can see the exact Address showing as a Marker<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Screenshot_2-1024x458.png\" alt=\"\" class=\"wp-image-12288\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on <strong>Marker Settings<\/strong><\/li>\n\n\n\n<li>Click over the content to expand<\/li>\n\n\n\n<li>Provide Latitude<\/li>\n\n\n\n<li>Provide Longitude<\/li>\n\n\n\n<li>Add Tooltip Name<\/li>\n\n\n\n<li>Add any content on the box <\/li>\n\n\n\n<li><strong>You can see the output showing exactly <\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-09-at-15-46-27-1024x476.png\" alt=\"\" class=\"wp-image-12291\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Turn on Custom Icon Toggle<\/li>\n\n\n\n<li>Upload your Icon<\/li>\n\n\n\n<li>Select Icon Width<\/li>\n\n\n\n<li>Select Icon Height<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-09-at-17-04-26-1024x477.png\" alt=\"\" class=\"wp-image-12294\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Click on <strong>Control<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Control Zoom Level:<\/strong> You can provide any number<\/li>\n\n\n\n<li><strong>Enable Street View Control:<\/strong> It contains a Pegman icon that can be dragged onto the map to enable Street View.<\/li>\n\n\n\n<li><strong>Turn on Map Type Control:<\/strong> The&nbsp;Map Type control allowing the user to choose a map type (ROADMAP, SATELLITE).<\/li>\n\n\n\n<li><strong>Enable Zoom Control: <\/strong>The&nbsp;Zoom control&nbsp;displays \u201c+\u201d and \u201c-\u201d buttons to change the zoom level of the map.<\/li>\n\n\n\n<li><strong>Enable Fullscreen Control: <\/strong>The&nbsp;Fullscreen control&nbsp;offers the option to open the map in fullscreen mode.<\/li>\n\n\n\n<li><strong>Enable Scroll Wheel Zoom: <\/strong>Each click, up or down, increases or decreases the&nbsp;<strong>zoom<\/strong>&nbsp;factor by 10%<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-09-at-13-00-33-1024x480.png\" alt=\"\" class=\"wp-image-12281\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on Theme=&gt; Choose Theme Source Type: <strong>Google Standard<\/strong><\/li>\n\n\n\n<li>Choose Google Theme Type from the drop-down<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-09-at-13-19-16-1024x476.png\" alt=\"\" class=\"wp-image-12282\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select Theme Source: <strong>Snazzy Maps<\/strong><\/li>\n\n\n\n<li>Choose the theme of your snazzy map from the drop-down<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-09-at-13-24-07-1024x477.png\" alt=\"\" class=\"wp-image-12283\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select Theme Source: <strong>Custom<\/strong><\/li>\n\n\n\n<li>Provide your custom style on the box<\/li>\n\n\n\n<li>Click on the selected area to get <em><strong>JSON style code<\/strong> <\/em>to style your map<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-09-at-13-30-06-1024x440.png\" alt=\"\" class=\"wp-image-12285\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Set up Static Map<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Static maps&nbsp;are standalone images in PNG format that can be displayed on web and mobile devices without the aid of a mapping library or API.&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select Map Type: Static<\/li>\n\n\n\n<li>Control Static Image Width <\/li>\n\n\n\n<li>Control Static Image Height<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-09-at-17-54-38-1024x476.png\" alt=\"\" class=\"wp-image-12296\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Set up Polyline Map<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can use a&nbsp;polyline&nbsp;to draw lines on a&nbsp;map&nbsp;in&nbsp;Google Maps.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select Map Type: <strong>Polyline<\/strong><\/li>\n\n\n\n<li><strong>You can see the Polyline Map appeared<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-09-at-18-04-52-1024x468.png\" alt=\"\" class=\"wp-image-12299\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Provide your coordinate title<\/li>\n\n\n\n<li>Provide Latitude<\/li>\n\n\n\n<li>Provide Longitude<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-09-at-19-06-43-1024x499.png\" alt=\"\" class=\"wp-image-12301\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Set up Polygon Map<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A&nbsp;polygon&nbsp;(like a polyline) defines a series of connected coordinates in an ordered sequence.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select Map Type: <strong>Polygon<\/strong><\/li>\n\n\n\n<li>You can see the Polygon Map appeared<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-10-at-12-40-53-1024x496.png\" alt=\"\" class=\"wp-image-12306\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Provide your coordinate title<\/li>\n\n\n\n<li>Provide Latitude<\/li>\n\n\n\n<li>Provide Longitude<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-10-at-12-51-22-1024x500.png\" alt=\"\" class=\"wp-image-12307\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Provide Latitude<\/li>\n\n\n\n<li>Provide Longitude<\/li>\n\n\n\n<li>Add any content on the box<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-10-at-13-06-51-1024x471.png\" alt=\"\" class=\"wp-image-12308\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Set up Overlay Map<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Overlays&nbsp;are objects on the&nbsp;map&nbsp;that are tied to latitude\/longitude coordinates, so they move when you drag or zoom the&nbsp;map.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select Map Type: <strong><strong>Overlay<\/strong><\/strong><\/li>\n\n\n\n<li><strong>You can see the Overlay Map appeared<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-10-at-13-19-49-1024x466.png\" alt=\"\" class=\"wp-image-12309\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Provide Latitude<\/li>\n\n\n\n<li>Provide Longitude<\/li>\n\n\n\n<li>Select Overlay content on the box<\/li>\n\n\n\n<li><strong>You can see the exact content appeared<\/strong> <strong>accordingly<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/help.wpmet.com\/wp-content\/uploads\/2021\/03\/Annotation-on-2021-03-10-at-19-08-55-1024x498.png\" alt=\"\" class=\"wp-image-12311\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Getting Started Embed Google map anywhere on your webpage. Most importantly, on the contact page, so your visitors can know where you are located.&nbsp;Display pre-defined locations (latitude and longitude) on an on-screen&nbsp;map. Just follow the step-by-step process to connect the Google Map. Step=&gt;1: Generate Google Map API Key Step=&gt;2: Select Map Type Set Up Basic [&hellip;]<\/p>\n","protected":false},"author":42,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"enableOnePageScrollInPage":false,"onePageScrollCss":"","onePageScrollSpeed":1000,"onePageScrollAnimation":"easeInOutQuad","onePageScrollShowDotNavigation":true,"onePageScrollNavigation":"scaleUp","onePageScrollNavigationPosition":"right","onePageScrollNavigationHorizontal":[],"onePageScrollNavigationVertical":[],"onePageScrollNavigationSpacing":[],"onePageScrollNavigationColor":"#00ff0d","onePageScrollNavigationColorHover":"#00ff0d","onePageScrollNavigationColorActive":"#00ff0d","onePageScrollNavigationIcon":[],"onePageScrollNavigationWidth":[],"onePageScrollNavigationWidthHover":[],"onePageScrollNavigationWidthActive":[],"onePageScrollNavigationHeight":[],"onePageScrollNavigationHeightHover":[],"onePageScrollNavigationHeightActive":[],"onePageScrollNavigationBorder":[],"onePageScrollNavigationBorderHover":[],"onePageScrollNavigationBorderActive":[],"onePageScrollNavigationBorderRadius":[],"onePageScrollNavigationBorderRadiusHover":[],"onePageScrollNavigationBorderRadiusActive":[],"onePageScrollNavigationTooltipTypography":[],"onePageScrollNavigationTooltipColor":"#ffffff","onePageScrollNavigationTooltipColorHover":"","onePageScrollNavigationTooltipBgColor":"#00ff0d","onePageScrollNavigationTooltipBgColorHover":"","onePageScrollNavigationTooltipPadding":[],"onePageScrollNavigationTooltipPaddingHover":[],"onePageScrollNavigationTooltipBorderRadius":[],"onePageScrollNavigationTooltipBorderRadiusHover":[],"pageSettingsCustomCss":"","footnotes":""},"doc_category":[194],"doc_tag":[],"knowledge_base":[328],"class_list":["post-12064","docs","type-docs","status-publish","hentry","doc_category-general-widgets","knowledge_base-elementskit"],"year_month":"2026-06","word_count":1017,"total_views":"15552","reactions":{"happy":"1","normal":"1","sad":"0"},"author_info":{"name":"Priyanka","author_nicename":"priyanka","author_url":"https:\/\/wpmet.com\/author\/priyanka\/"},"doc_category_info":[{"term_name":"ElementsKit General Widgets","term_url":"https:\/\/wpmet.com\/doc\/elementskit\/general-widgets\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"ElementsKit","term_url":"https:\/\/wpmet.com\/doc\/elementskit\/","term_slug":"elementskit"}],"knowledge_base_slug":["elementskit"],"_links":{"self":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/docs\/12064","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/comments?post=12064"}],"version-history":[{"count":0,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/docs\/12064\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/media?parent=12064"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/doc_category?post=12064"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/doc_tag?post=12064"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/wpmet.com\/wp-json\/wp\/v2\/knowledge_base?post=12064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}