{"id":236,"date":"2014-10-30T14:41:52","date_gmt":"2014-10-30T14:41:52","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=236"},"modified":"2022-10-25T06:43:26","modified_gmt":"2022-10-25T06:43:26","slug":"google-map-marker-info-window-using-javascript","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/","title":{"rendered":"Embed Google Maps with Marker and Info Window in HTML using JavaScript"},"content":{"rendered":"<p>Google Maps is the widely used web element to display the map in the web application. Google Maps helps to mark a location on the map with a marker and display details information in a popup window. An info window displays content in a popup window over the map and is added to a specific location. Generally, the InfoWindow is attached to a marker (specific latitude\/longitude) to display text\/image content over the Google map.<\/p>\n<p><b>Google Maps JavaScript API<\/b> provides an easy way to add a map with a marker and info window to a web page. An InfoWindow is used to display content (text, images, and HTML) in a popup window on the marker of a given location above the map. In this tutorial, we will show you <b>how to embed Google Maps<\/b>, mark a location with a marker, and display content in an info window using JavaScript.<\/p>\n<p>In this example code, we will point to a specific location on Google Maps with a marker. <\/p>\n<ul class=\"bullet_disk_list\">\n<li>An info window with HTML content (text, image, etc) will be added to the marker.<\/li>\n<li>The info-window will appear on the marker click that displays information on a popup.<\/li>\n<\/ul>\n<h2>Get Latitude and Longitude from Address<\/h2>\n<p>The latitude and longitude are required to mark a specific location on Google Maps. So, you need to collect the latitude and longitude of the location which you want to add on Google map with a marker.<\/p>\n<p>Follow the below steps to get latitude and longitude from the address using Google Maps.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Visit the <a href=\"https:\/\/maps.google.com\/\" target=\"_blank\" rel=\"noopener\">Google Maps website<\/a>.<\/li>\n<li>Enter the desired location and search on the Google Maps.<\/li>\n<\/li>\n<li>A red marker would be displayed and it would be pointed to a location on the map.<\/li>\n<li>Right-click on the marker or an area that you want to select.<\/li>\n<li>The latitude and longitude will appear at the top of the options list. Click on it to copy.<\/li>\n<li>A dialog box with details of address, latitude, and longitude will appear at the bottom of the map. Collect the address latitude and longitude from here.\n<div class=\"img_center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/google-maps-get-latitude-longitude-from-address-codexworld-1024x537.png\" alt=\"google-maps-get-latitude-longitude-from-address-codexworld\" width=\"960\" height=\"503\" class=\"alignnone size-large wp-image-5105\" srcset=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/google-maps-get-latitude-longitude-from-address-codexworld-1024x537.png 1024w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/google-maps-get-latitude-longitude-from-address-codexworld-300x157.png 300w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/google-maps-get-latitude-longitude-from-address-codexworld-768x402.png 768w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/google-maps-get-latitude-longitude-from-address-codexworld-1536x805.png 1536w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/google-maps-get-latitude-longitude-from-address-codexworld-200x105.png 200w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/google-maps-get-latitude-longitude-from-address-codexworld-346x181.png 346w, https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/google-maps-get-latitude-longitude-from-address-codexworld.png 1563w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/div>\n<\/li>\n<\/ul>\n<p>For example, the Googleplex address is &#8220;1600 Amphitheatre Pkwy, Mountain View, CA 94043, United States&#8221;. The latitude and longitude of this location are 37.422236 and -122.0841863.<\/p>\n<p>Alternatively, you can also use the free online tool to get the latitude and longitude from address &#8211; <a href=\"http:\/\/www.xwebtools.com\/find-latitude-longitude-from-address\/\" target=\"_blank\" rel=\"noopener\">Find Latitude Longitude From Address Online<\/a><\/p>\n<h2>Google Maps API Key<\/h2>\n<p>An API Key is required to access Google Maps JavaScript API on the web page. Before getting started create an API key on Google Cloud Console.<\/p>\n<p>Follow the below steps to get an API key for Maps JavaScript API:<\/p>\n<ul class=\"step_list\">\n<li>Go to the <a href=\"https:\/\/console.cloud.google.com\" target=\"_blank\" rel=\"noopener\">Google Cloud Console<\/a>.<\/li>\n<li>Create a new project or select an existing project.<\/li>\n<li>Click <b>Continue<\/b> to enable the API and any related services.<\/li>\n<li>On the <b>Library<\/b> page, the <b>Maps JavaScript API<\/b> service must be enabled.<\/li>\n<li>On the <b>Credentials<\/b> page, click <b>CREATE CREDENTIALS \u200b&raquo; API key<\/b> to get an API Key. You can also set the API key restrictions as per the webpage URL where this key will be used.<\/li>\n<li>Copy this API key to use in the HTML code required in the next step.<\/li>\n<\/ul>\n<p>For a detailed guide, see this step-by-step guide to get an API key from Google API Console &#8211; <a href=\"http:\/\/www.codexworld.com\/get-google-maps-javascript-api-key\/\">How to Get Google Maps JavaScript API Key<\/a><\/p>\n<h2>Embed Google Map with Marker and Info Window in HTML<\/h2>\n<p>The following code sample shows you how to load the Maps JavaScript API library into a web page and display the map with marker and infowindow in HTML.<\/p>\n<p>First, include the Google Maps JavaScript API and provide your API Key in the <code>key<\/code> parameter.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>The <code>callback<\/code> parameter executes the initMap function after the API is loaded.<\/li>\n<li>The <code>defer<\/code> attribute makes the callback to be executed after the HTML page has finished parsing.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?callback=initMap&amp;key=<span style=\"border:2px solid #FB4314; font-weight:bold; border-style:dashed;\">Your_API_KEY<\/span>\"<\/span> <span class=\"hljs-attr\">defer<\/span>&gt;<\/span><span class=\"undefined\"><\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>JavaScript Code:<\/b><br \/>\nThe following code initializes <code>google.maps.Map()<\/code> object to embed Google map with marker and info window.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Create a callback function called <code>initMap()<\/code> using JavaScript.<\/li>\n<li>Specify the latitude and longitude of a specific location in the <code>myLatLng<\/code> variable.<\/li>\n<li>Initialize google.maps.Map() with element selector (<code>mapCanvas<\/code>) and pass options (zoom, center, etc.) and assign it to the map variable.<\/li>\n<li>Specify the info window content into the <code>contentString<\/code>.<\/li>\n<li>Initialize google.maps.InfoWindow() and pass the contentString variable.<\/li>\n<li>Define some marker options (position, map, title, etc.) and assign them to the marker variable.<\/li>\n<li>Open the info window on the marker click event or map load.<\/li>\n<li>Assign <code>initMap<\/code> callback function to <code>window.initMap<\/code>.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span>\r\n<span style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Initialize and add the map<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">initMap<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Latitude and longitude of the selected location<\/span>\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> myLatLng = { lat: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">37.422021<\/span>, lng: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">-122.084079<\/span> };\r\n\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ The map, centered at selected location<\/span>\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> map = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> google.maps.Map(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"mapCanvas\"<\/span>), {\r\n        zoom: <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">12<\/span>,\r\n        center: myLatLng\r\n    });\r\n\t\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Info window content<\/span>\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> contentString = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;div id=\"content\"&gt;'<\/span>+\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;h1 style=\"font-size:20px;\"&gt;Googleplex (CodexWorld)&lt;\/h1&gt;'<\/span>+\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;div id=\"bodyContent\"&gt;'<\/span>+ \r\n            <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;div style=\"float:left; width:20%;\"&gt;&lt;img src=\"info-image.jpg\" width=\"120\" height=\"80\"\/&gt;&lt;\/div&gt;'<\/span> +\r\n            <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;div style=\"float:right; width:80%;margin-top: -19px;\"&gt;'<\/span>+\r\n                <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p&gt;The &lt;b&gt;Googleplex&lt;\/b&gt; is the corporate headquarters complex of &lt;b&gt;Google, Inc.&lt;\/b&gt;, located at &lt;b&gt;Googleplex, 1600 Amphitheatre Pkwy, Mountain View, CA 94043, United States&lt;\/b&gt;. &lt;br\/&gt;The original complex with 2 million square feet of office space is the company\\'s second largest square footage assemblage of Google buildings (The largest Google building is the 2.9 million square foot building in New York City which Google bought in 2010) '<\/span>+\r\n                <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p&gt;Attribution: Googleplex, &lt;a href=\"http:\/\/en.wikipedia.org\/wiki\/Googleplex\"&gt;http:\/\/en.wikipedia.org\/wiki\/Googleplex&lt;\/a&gt;.&lt;\/p&gt;'<\/span>+\r\n            <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/div&gt;'<\/span>+\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/div&gt;'<\/span>+\r\n    <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/div&gt;'<\/span>;\r\n\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Add info window<\/span>\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> infowindow = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> google.maps.InfoWindow({\r\n        content: contentString\r\n    });\r\n\t\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ The marker, positioned at selected location<\/span>\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> marker = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> google.maps.Marker({\r\n        position: myLatLng,\r\n        map: map,\r\n        title: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Googleplex (CodexWorld)'<\/span>\r\n    });\r\n\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Marker click event: open info window<\/span>\r\n    google.maps.event.addListener(marker, <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'click'<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>) <\/span>{\r\n        infowindow.open(map, marker);\r\n    });\r\n\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Open info window on load<\/span>\r\n    infowindow.open(map, marker);\r\n}\r\n\r\n<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">window<\/span>.initMap = initMap;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">script<\/span>&gt;<\/span><\/pre>\n<p><b>HTML Code:<\/b><br \/>\nDefine an HTML element in the web page to display the Google Map. This area selector (<code>mapCanvas<\/code>) must be specified in Map JavaScript Object.<\/p>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"mapCanvas\"<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<p><b>CSS Code:<\/b><br \/>\nAdd the following CSS to set the width and height of the Google map.<\/p>\n<pre><span style=\"color:#bf4f24\">#mapCanvas<\/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 class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/\">Google Maps with Multiple Markers and Info Windows using JavaScript API V3 <\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google Maps is the widely used web element to display the map in the web application. Google Maps helps to mark a location on the map with a marker and display details information in a <\/p>\n","protected":false},"author":1,"featured_media":5109,"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":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[10],"tags":[15,35,65,66,16],"class_list":["post-236","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-google-maps","tag-google-maps-api","tag-infowindow","tag-javascript","tag-jquery","cat-10-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>Embed Google Maps with Marker and Info Window in HTML using JavaScript - CodexWorld<\/title>\n<meta name=\"description\" content=\"Embed Google Map with custom info window using JavaScript - Display location on Google Map with a marker, info window or popup, images 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\/google-map-marker-info-window-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embed Google Maps with Marker and Info Window in HTML using JavaScript - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Embed Google Map with custom info window using JavaScript - Display location on Google Map with a marker, info window or popup, images using Google Maps JavaScript API.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/\" \/>\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=\"2014-10-30T14:41:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-25T06:43:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/embed-google-maps-with-marker-info-window-in-html-using-javascript-api-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=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-marker-info-window-using-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-marker-info-window-using-javascript\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Embed Google Maps with Marker and Info Window in HTML using JavaScript\",\"datePublished\":\"2014-10-30T14:41:52+00:00\",\"dateModified\":\"2022-10-25T06:43:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-marker-info-window-using-javascript\\\/\"},\"wordCount\":790,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-marker-info-window-using-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/10\\\/embed-google-maps-with-marker-info-window-in-html-using-javascript-api-codexworld.png\",\"keywords\":[\"Google Maps\",\"Google Maps API\",\"InfoWindow\",\"JavaScript\",\"jQuery\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/google-map-marker-info-window-using-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-marker-info-window-using-javascript\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-marker-info-window-using-javascript\\\/\",\"name\":\"Embed Google Maps with Marker and Info Window in HTML using JavaScript - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-marker-info-window-using-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-marker-info-window-using-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/10\\\/embed-google-maps-with-marker-info-window-in-html-using-javascript-api-codexworld.png\",\"datePublished\":\"2014-10-30T14:41:52+00:00\",\"dateModified\":\"2022-10-25T06:43:26+00:00\",\"description\":\"Embed Google Map with custom info window using JavaScript - Display location on Google Map with a marker, info window or popup, images using Google Maps JavaScript API.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-marker-info-window-using-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/google-map-marker-info-window-using-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-marker-info-window-using-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/10\\\/embed-google-maps-with-marker-info-window-in-html-using-javascript-api-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/10\\\/embed-google-maps-with-marker-info-window-in-html-using-javascript-api-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"embed-google-maps-with-marker-info-window-in-html-using-javascript-api-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-marker-info-window-using-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Embed Google Maps with Marker and Info Window in HTML using JavaScript\"}]},{\"@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":"Embed Google Maps with Marker and Info Window in HTML using JavaScript - CodexWorld","description":"Embed Google Map with custom info window using JavaScript - Display location on Google Map with a marker, info window or popup, images 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\/google-map-marker-info-window-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Embed Google Maps with Marker and Info Window in HTML using JavaScript - CodexWorld","og_description":"Embed Google Map with custom info window using JavaScript - Display location on Google Map with a marker, info window or popup, images using Google Maps JavaScript API.","og_url":"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2014-10-30T14:41:52+00:00","article_modified_time":"2022-10-25T06:43:26+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/embed-google-maps-with-marker-info-window-in-html-using-javascript-api-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":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Embed Google Maps with Marker and Info Window in HTML using JavaScript","datePublished":"2014-10-30T14:41:52+00:00","dateModified":"2022-10-25T06:43:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/"},"wordCount":790,"commentCount":5,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/embed-google-maps-with-marker-info-window-in-html-using-javascript-api-codexworld.png","keywords":["Google Maps","Google Maps API","InfoWindow","JavaScript","jQuery"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/","url":"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/","name":"Embed Google Maps with Marker and Info Window in HTML using JavaScript - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/embed-google-maps-with-marker-info-window-in-html-using-javascript-api-codexworld.png","datePublished":"2014-10-30T14:41:52+00:00","dateModified":"2022-10-25T06:43:26+00:00","description":"Embed Google Map with custom info window using JavaScript - Display location on Google Map with a marker, info window or popup, images using Google Maps JavaScript API.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/embed-google-maps-with-marker-info-window-in-html-using-javascript-api-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/10\/embed-google-maps-with-marker-info-window-in-html-using-javascript-api-codexworld.png","width":1366,"height":768,"caption":"embed-google-maps-with-marker-info-window-in-html-using-javascript-api-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Embed Google Maps with Marker and Info Window in HTML using JavaScript"}]},{"@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\/2014\/10\/embed-google-maps-with-marker-info-window-in-html-using-javascript-api-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-3O","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/236","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=236"}],"version-history":[{"count":15,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/236\/revisions"}],"predecessor-version":[{"id":5111,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/236\/revisions\/5111"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5109"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}