{"id":1135,"date":"2015-12-16T18:53:02","date_gmt":"2015-12-16T18:53:02","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=1135"},"modified":"2017-10-22T17:52:05","modified_gmt":"2017-10-22T17:52:05","slug":"adding-google-map-on-website-within-5-minutes","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/","title":{"rendered":"Adding Google Map on Your Website within 5 Minutes"},"content":{"rendered":"<p><b>Google Map<\/b> is the easiest option to display a map on the web page. Google Map is the widely used element for a website and you can easily add Google Map to your website. This tutorial shows you how to <b>add Google Map with marker to website<\/b> within 5 minutes.<\/p>\n<p>The sample code will <b>embed Google map in the website<\/b> and point a location with a marker. Also, a direction link will be provided on the map that allows users to get the direction of the specified location. We&#8217;ll use the <b>Google Maps JavaScript API<\/b> for displaying the map with your desired location mark on it.<\/p>\n<h2>Get Latitude and Longitude<\/h2>\n<p>At first, you need to get the latitude and longitude of your desired location. Follow the below steps to get the latitude &#038; longitude from the Google Map.<\/p>\n<ul class=\"step_list\">\n<li>Visit the <a href=\"https:\/\/www.google.com\/maps\" target=\"_blank\">Google Maps website<\/a>.<\/li>\n<li>Enter your desired location and search.\n<div class=\"img_center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/search-location-google-map-codexworld.png\" alt=\"search-location-google-map-codexworld\" width=\"958\" height=\"371\" class=\"alignnone size-full wp-image-2872\" srcset=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/search-location-google-map-codexworld.png 958w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/search-location-google-map-codexworld-300x116.png 300w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/search-location-google-map-codexworld-768x297.png 768w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/search-location-google-map-codexworld-200x77.png 200w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/search-location-google-map-codexworld-346x134.png 346w\" sizes=\"auto, (max-width: 958px) 100vw, 958px\" \/><\/div>\n<\/li>\n<li>Mark the exact location on Google Map. A marker will appear on your marked location and also a dialog box will appear at the bottom of the map.\n<div class=\"img_center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/google-map-location-box-address-latitude-longitude-codexworld.png\" alt=\"google-map-location-box-address-latitude-longitude-codexworld\" width=\"785\" height=\"368\" class=\"alignnone size-full wp-image-2873\" srcset=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/google-map-location-box-address-latitude-longitude-codexworld.png 785w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/google-map-location-box-address-latitude-longitude-codexworld-300x141.png 300w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/google-map-location-box-address-latitude-longitude-codexworld-768x360.png 768w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/google-map-location-box-address-latitude-longitude-codexworld-200x94.png 200w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/google-map-location-box-address-latitude-longitude-codexworld-346x162.png 346w\" sizes=\"auto, (max-width: 785px) 100vw, 785px\" \/><\/div>\n<\/li>\n<li>In this dialog box, you&#8217;ll see the details address, latitude, and longitude. Collect the <b>latitude<\/b> and <b>longitude<\/b> from the bottom of the dialog box.\n<div class=\"img_center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/google-map-address-latitude-longitude-codexworld.png\" alt=\"google-map-address-latitude-longitude-codexworld\" width=\"444\" height=\"102\" class=\"alignnone size-full wp-image-2874\" srcset=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/google-map-address-latitude-longitude-codexworld.png 444w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/google-map-address-latitude-longitude-codexworld-300x69.png 300w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/google-map-address-latitude-longitude-codexworld-200x46.png 200w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/google-map-address-latitude-longitude-codexworld-346x79.png 346w\" sizes=\"auto, (max-width: 444px) 100vw, 444px\" \/><\/div>\n<\/li>\n<\/ul>\n<p>Copy this latitude and longitude for later use in the script.<\/p>\n<h2>Get API Key from Google Developer Console<\/h2>\n<p>Google Maps JavaScript API requires an API Key to load. All requests to Google Maps JavaScript API must include as the value of the key parameter. So, before you begin, create a free API key on Google Developer Console. If you are a beginner on Google map, see the following step-by-step guide to get API key from Google API Console.<\/p>\n<ul class=\"bullet_disk_list\">\n<li><a href=\"http:\/\/www.codexworld.com\/get-google-maps-javascript-api-key\/\">How to Get Google Maps JavaScript API Key<\/a><\/li>\n<\/ul>\n<p>If you are not comfortable with coding, the Google Map code can be generated online without having the coding knowledge. Use this online free tool to customise and embed Google map to the website &#8211; <a href=\"http:\/\/www.xwebtools.com\/google-map-embed-code-generator\/\">Online Free Google Map Embed Code Generator<\/a><\/p>\n<p>Place the following code into your web page HTML where you need to include the Google Map.<\/p>\n<h2>JavaScript Code<\/h2>\n<p>At first, load the <b>Google Maps JavaScript API<\/b> and provide your <b>API Key<\/b> in <code>key<\/code> parameter.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">script<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=<span style=\"border:2px solid #FB4314; font-weight:bold; border-style:dashed;\">Your_API_KEY<\/span>\"<\/span>&gt;&lt;\/<span style=\"color:#bf4f24\">script<\/span>&gt;\r\n<\/pre>\n<p>Place the following JavaScript to add a map with a marker using Google Maps JavaScript API. You need to specify your location&#8217;s latitude and longitude into the <code>LatLng()<\/code> method.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">script<\/span>>\r\n<span style=\"color:#a71d5d;font-style:italic\">var<\/span> myCenter <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">google.maps<\/span>.LatLng(<span style=\"color:#811f24;font-weight:700\">37.422230<\/span>, <span style=\"color:#794938\">-<\/span><span style=\"color:#811f24;font-weight:700\">122.084058<\/span>);\r\n<span style=\"color:#a71d5d;font-style:italic\">function<\/span> <span style=\"color:#bf4f24\">initialize<\/span>(){\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> mapProp <span style=\"color:#794938\">=<\/span> {\r\n        center:myCenter,\r\n        zoom:<span style=\"color:#811f24;font-weight:700\">12<\/span>,\r\n        mapTypeId:google.maps.MapTypeId.ROADMAP\r\n    };\r\n\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> map <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">google.maps<\/span>.Map(<span style=\"color:#691c97\">document<\/span>.<span style=\"color:#693a17\">getElementById<\/span>(<span style=\"color:#0b6125\">\"map\"<\/span>),mapProp);\r\n\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> marker <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">google.maps<\/span>.Marker({\r\n        position:myCenter,\r\n    });\r\n\r\n    marker.setMap(map);\r\n}\r\ngoogle.maps.<span style=\"color:#691c97\">event<\/span>.addDomListener(<span style=\"color:#691c97\">window<\/span>, <span style=\"color:#0b6125\">'load'<\/span>, initialize);\r\n&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n<\/pre>\n<h2>HTMLCode<\/h2>\n<p>Define an area in the web page to display the Google Map. This area selector (<code>map<\/code>) needs to be specified in Map JavaScript Object.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"map\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n<\/pre>\n<p>If you want to add a direction link over the Google map, the HTML needs to be modified with the anchor link. Also, you need to specify the latitude and longitude in the hyperlink.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"mapContainer\"<\/span>>\r\n    &lt;<span style=\"color:#bf4f24\">a<\/span> <span style=\"color:#bf4f24\">class<\/span>=<span style=\"color:#0b6125\">\"direction-link\"<\/span> <span style=\"color:#bf4f24\">target<\/span>=<span style=\"color:#0b6125\">\"_blank\"<\/span> <span style=\"color:#bf4f24\">href<\/span>=<span style=\"color:#0b6125\">\"\/\/maps.google.com\/maps?f=d<span style=\"color:#696969;font-weight:700\">&amp;amp;<\/span>daddr=37.422230,-122.084058<span style=\"color:#696969;font-weight:700\">&amp;amp;<\/span>hl=en\"<\/span>> Get Directions&lt;\/<span style=\"color:#bf4f24\">a<\/span>>\r\n    &lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"map\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n&lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n<\/pre>\n<h2>CSS Code<\/h2>\n<p>Add the following CSS to set the width and height of the Google map.<\/p>\n<pre><span style=\"color:#bf4f24\">#map<\/span>{\r\n    <span style=\"color:#691c97\">width<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">100<span style=\"color:#794938\">%<\/span><\/span>;\r\n    <span style=\"color:#691c97\">height<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">400<span style=\"color:#794938\">px<\/span><\/span>;\r\n}\r\n<\/pre>\n<p>If you added the direction link, use the following CSS to styling the link, otherwise, don&#8217;t need to add this CSS.<\/p>\n<pre><span style=\"color:#bf4f24\">.mapContainer<\/span>{\r\n    <span style=\"color:#691c97\">width<\/span><span style=\"color:#794938\">:<\/span><span style=\"color:#811f24;font-weight:700\">50<span style=\"color:#794938\">%<\/span><\/span>;\r\n    <span style=\"color:#691c97\">position<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">relative<\/span>;\r\n}\r\n<span style=\"color:#bf4f24\">.mapContainer<\/span> <span style=\"color:#bf4f24\">a<\/span><span style=\"color:#bf4f24\">.direction-link<\/span> {\r\n    <span style=\"color:#691c97\">position<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">absolute<\/span>;\r\n    <span style=\"color:#691c97\">top<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">15<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">right<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">15<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">z-index<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">100010<\/span>;\r\n    <span style=\"color:#691c97\">color<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">#FFF<\/span>;\r\n    <span style=\"color:#691c97\">text-decoration<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">none<\/span>;\r\n    <span style=\"color:#691c97\">font-size<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">15<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">font-weight<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">bold<\/span>;\r\n    <span style=\"color:#691c97\">line-height<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">25<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">padding<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">8<span style=\"color:#794938\">px<\/span><\/span> <span style=\"color:#811f24;font-weight:700\">20<span style=\"color:#794938\">px<\/span><\/span> <span style=\"color:#811f24;font-weight:700\">8<span style=\"color:#794938\">px<\/span><\/span> <span style=\"color:#811f24;font-weight:700\">50<span style=\"color:#794938\">px<\/span><\/span>;\r\n    <span style=\"color:#691c97\">background<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">#0094de<\/span>;\r\n    <span style=\"color:#691c97\">background-image<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#693a17\">url<\/span>(<span style=\"color:#0b6125\">'direction-icon.png'<\/span>);\r\n    <span style=\"color:#691c97\">background-position<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">left<\/span> <span style=\"color:#b4371f\">center<\/span>;\r\n    <span style=\"color:#691c97\">background-repeat<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">no-repeat<\/span>;\r\n}\r\n<span style=\"color:#bf4f24\">.mapContainer<\/span> <span style=\"color:#bf4f24\">a<\/span><span style=\"color:#bf4f24\">.direction-link<\/span><span style=\"color:#bf4f24\">:hover<\/span> {\r\n    <span style=\"color:#691c97\">text-decoration<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">none<\/span>;\r\n    <span style=\"color:#691c97\">background<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">#0072ab<\/span>;\r\n    <span style=\"color:#691c97\">color<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">#FFF<\/span>;\r\n    <span style=\"color:#691c97\">background-image<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#693a17\">url<\/span>(<span style=\"color:#0b6125\">'direction-icon.png'<\/span>);\r\n    <span style=\"color:#691c97\">background-position<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">left<\/span> <span style=\"color:#b4371f\">center<\/span>;\r\n    <span style=\"color:#691c97\">background-repeat<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#b4371f\">no-repeat<\/span>;\r\n}\r\n<\/pre>\n<p>Once you put all code together on your web page, the Google Map will appear with marker and direction link.<\/p>\n<div class=\"img_center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/add-google-map-to-website-marker-codexworld.png\" alt=\"add-google-map-to-website-marker-codexworld\" width=\"887\" height=\"307\" class=\"alignnone size-full wp-image-2875\" srcset=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/add-google-map-to-website-marker-codexworld.png 887w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/add-google-map-to-website-marker-codexworld-300x104.png 300w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/add-google-map-to-website-marker-codexworld-768x266.png 768w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/add-google-map-to-website-marker-codexworld-200x69.png 200w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/add-google-map-to-website-marker-codexworld-346x120.png 346w\" sizes=\"auto, (max-width: 887px) 100vw, 887px\" \/><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Google Map is the easiest option to display a map on the web page. Google Map is the widely used element for a website and you can easily add Google Map to your website. This <\/p>\n","protected":false},"author":1,"featured_media":2870,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[109],"tags":[15,35],"class_list":["post-1135","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-googlemap","tag-google-maps","tag-google-maps-api","cat-109-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Adding Google Map on Your Website within 5 Minutes - CodexWorld<\/title>\n<meta name=\"description\" content=\"Embed Google Map on your website using Google Maps JavaScript API - Learn how to add Google map with marker to website within 5 minutes using Google Maps JavaScript API.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Google Map on Your Website within 5 Minutes - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Embed Google Map on your website using Google Maps JavaScript API - Learn how to add Google map with marker to website within 5 minutes using Google Maps JavaScript API.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-16T18:53:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-10-22T17:52:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/add-google-map-with-marker-to-website-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/adding-google-map-on-website-within-5-minutes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/adding-google-map-on-website-within-5-minutes\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Adding Google Map on Your Website within 5 Minutes\",\"datePublished\":\"2015-12-16T18:53:02+00:00\",\"dateModified\":\"2017-10-22T17:52:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/adding-google-map-on-website-within-5-minutes\\\/\"},\"wordCount\":516,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/adding-google-map-on-website-within-5-minutes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/add-google-map-with-marker-to-website-codexworld.png\",\"keywords\":[\"Google Maps\",\"Google Maps API\"],\"articleSection\":[\"GoogleMap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/adding-google-map-on-website-within-5-minutes\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/adding-google-map-on-website-within-5-minutes\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/adding-google-map-on-website-within-5-minutes\\\/\",\"name\":\"Adding Google Map on Your Website within 5 Minutes - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/adding-google-map-on-website-within-5-minutes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/adding-google-map-on-website-within-5-minutes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/add-google-map-with-marker-to-website-codexworld.png\",\"datePublished\":\"2015-12-16T18:53:02+00:00\",\"dateModified\":\"2017-10-22T17:52:05+00:00\",\"description\":\"Embed Google Map on your website using Google Maps JavaScript API - Learn how to add Google map with marker to website within 5 minutes using Google Maps JavaScript API.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/adding-google-map-on-website-within-5-minutes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/adding-google-map-on-website-within-5-minutes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/adding-google-map-on-website-within-5-minutes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/add-google-map-with-marker-to-website-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/add-google-map-with-marker-to-website-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"add-google-map-with-marker-to-website-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/adding-google-map-on-website-within-5-minutes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Google Map on Your Website within 5 Minutes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding Google Map on Your Website within 5 Minutes - CodexWorld","description":"Embed Google Map on your website using Google Maps JavaScript API - Learn how to add Google map with marker to website within 5 minutes using Google Maps JavaScript API.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/","og_locale":"en_US","og_type":"article","og_title":"Adding Google Map on Your Website within 5 Minutes - CodexWorld","og_description":"Embed Google Map on your website using Google Maps JavaScript API - Learn how to add Google map with marker to website within 5 minutes using Google Maps JavaScript API.","og_url":"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2015-12-16T18:53:02+00:00","article_modified_time":"2017-10-22T17:52:05+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/add-google-map-with-marker-to-website-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Adding Google Map on Your Website within 5 Minutes","datePublished":"2015-12-16T18:53:02+00:00","dateModified":"2017-10-22T17:52:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/"},"wordCount":516,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/add-google-map-with-marker-to-website-codexworld.png","keywords":["Google Maps","Google Maps API"],"articleSection":["GoogleMap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/","url":"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/","name":"Adding Google Map on Your Website within 5 Minutes - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/add-google-map-with-marker-to-website-codexworld.png","datePublished":"2015-12-16T18:53:02+00:00","dateModified":"2017-10-22T17:52:05+00:00","description":"Embed Google Map on your website using Google Maps JavaScript API - Learn how to add Google map with marker to website within 5 minutes using Google Maps JavaScript API.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/add-google-map-with-marker-to-website-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/add-google-map-with-marker-to-website-codexworld.png","width":1366,"height":768,"caption":"add-google-map-with-marker-to-website-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Adding Google Map on Your Website within 5 Minutes"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2015\/12\/add-google-map-with-marker-to-website-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-ij","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=1135"}],"version-history":[{"count":6,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1135\/revisions"}],"predecessor-version":[{"id":2877,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1135\/revisions\/2877"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2870"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=1135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=1135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=1135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}