{"id":1875,"date":"2016-10-03T18:39:50","date_gmt":"2016-10-03T18:39:50","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=1875"},"modified":"2022-11-08T10:40:21","modified_gmt":"2022-11-08T10:40:21","slug":"google-maps-with-multiple-markers-using-javascript-api","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/","title":{"rendered":"Google Maps with Multiple Markers and Info Windows using JavaScript"},"content":{"rendered":"<p>Google Maps is an easy and best way to display location on the web page. A marker is used to identify a location on Google Maps and an Info Window displays some content over the map. With marker and info window, you can mark a location more efficiently. Also, it helps the user to find a location more accurately.<\/p>\n<p>In the previous tutorial, we had shown you how to <a href=\"http:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/\">add a marker and info window on Google Maps<\/a>, where you can add only one marker and info window on Google Maps. This tutorial will show you how to add multiple markers with info windows on <b>Google Maps using JavaScript API V3<\/b>.<\/p>\n<p>Multiple marker features are very useful to show multiple locations on a single map. Using the Google Maps JavaScript API, you can easily add a location map to the web page with multiple markers and info windows. In this example script, we&#8217;re going to display multiple markers on Google map and make each marker clickable for displaying the info window.<\/p>\n<h2>Google Maps API Key<\/h2>\n<p>All requests to Google Maps JavaScript API must include a key parameter in which an API key must be specified. So, before you begin, 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\u00bb 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>You can also see this step-by-step guide to create an API key on 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>Google Maps JavaScript API<\/h2>\n<p>Include the Google Map JavaScript API and provide your API Key in the <code>key<\/code> parameter.<\/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);\">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<h2>Embed Google Map with Multiple Markers and Info Windows<\/h2>\n<p>The following code sample shows how to display Google Maps in HTML web page and add multiple markers with infowindows using JavaScript.<\/p>\n<p><b>JavaScript Code:<\/b><br \/>\nThe following code initializes google.maps.Map() object to embed Google map with markers and info windows.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>Create a callback function called <code>initMap()<\/code> using JavaScript.<\/li>\n<li>Initialize google.maps.Map() with selector element (<code>mapCanvas<\/code>) and pass options (mapTypeId) and assign it to the map object.<\/li>\n<li>Specify the latitude and longitude of multiple locations in the <code>markers<\/code> array.<\/li>\n<li>Specify the content of info windows into the <code>infoWindowContent<\/code> array.<\/li>\n<li>Initialize <code>google.maps.InfoWindow()<\/code> for info windows popup.<\/li>\n<li>Loop through the locations (markers) and set the marker position with options (position, map, title, etc.) using <code>new google.maps.Marker()<\/code>.<\/li>\n<li>Set content to the info windows on the marker click event using <code>infoWindow.setContent()<\/code>.<\/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-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> map;\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> bounds = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> google.maps.LatLngBounds();\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> mapOptions = {\r\n        mapTypeId: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'roadmap'<\/span>\r\n    };\r\n                    \r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Display a map on the web page<\/span>\r\n    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>), mapOptions);\r\n    map.setTilt(<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">50<\/span>);\r\n        \r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Multiple markers location, latitude, and longitude<\/span>\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> markers = [\r\n        [<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Brooklyn Museum, NY'<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">40.671349546127146<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">-73.96375730105808<\/span>],\r\n        [<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Central Library, Brooklyn, NY'<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">40.67254944015601<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">-73.9682162170653<\/span>],\r\n        [<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Prospect Park Zoo, NY'<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">40.66427511834109<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">-73.96512605857858<\/span>],\r\n        [<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Barclays Center, Brooklyn, NY'<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">40.68268267107631<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">-73.97546296241961<\/span>]\r\n    ];\r\n                        \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> infoWindowContent = [\r\n        [<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;div class=\"info_content\"&gt;'<\/span> +\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;h2&gt;Brooklyn Museum&lt;\/h2&gt;'<\/span> +\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;h3&gt;200 Eastern Pkwy, Brooklyn, NY 11238&lt;\/h3&gt;'<\/span> +\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p&gt;The Brooklyn Museum is an art museum located in the New York City borough of Brooklyn.&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 class=\"info_content\"&gt;'<\/span> +\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;h2&gt;Central Library&lt;\/h2&gt;'<\/span> +\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;h3&gt;10 Grand Army Plaza, Brooklyn, NY 11238&lt;\/h3&gt;'<\/span> +\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p&gt;The Central Library is the main branch of the Brooklyn Public Library, located at Flatbush Avenue.&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 class=\"info_content\"&gt;'<\/span> +\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;h2&gt;Prospect Park Zoo&lt;\/h2&gt;'<\/span> +\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;h3&gt;450 Flatbush Ave, Brooklyn, NY 11225&lt;\/h3&gt;'<\/span> +\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p&gt;The Prospect Park Zoo is a 12-acre zoo located off Flatbush Avenue on the eastern side of Prospect Park, Brooklyn, New York City.&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 class=\"info_content\"&gt;'<\/span> +\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;h2&gt;Barclays Center&lt;\/h2&gt;'<\/span> +\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;h3&gt;620 Atlantic Ave, Brooklyn, NY 11217&lt;\/h3&gt;'<\/span> +\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;p&gt;Barclays Center is a multi-purpose indoor arena in the New York City borough of Brooklyn.&lt;\/p&gt;'<\/span> +\r\n        <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&lt;\/div&gt;'<\/span>]\r\n    ];\r\n        \r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Add multiple markers to map<\/span>\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> infoWindow = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> google.maps.InfoWindow(), marker, i;\r\n    \r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Place each marker on the map  <\/span>\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">for<\/span>( i = <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>; i &lt; markers.length; i++ ) {\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> position = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> google.maps.LatLng(markers[i][<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>], markers[i][<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">2<\/span>]);\r\n        bounds.extend(position);\r\n        marker = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> google.maps.Marker({\r\n            position: position,\r\n            map: map,\r\n            title: markers[i][<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>]\r\n        });\r\n        \r\n        <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Add info window to marker    <\/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);\">marker, i<\/span>) <\/span>{\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/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.setContent(infoWindowContent[i][<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>]);\r\n                infoWindow.open(map, marker);\r\n            }\r\n        })(marker, i));\r\n\r\n        <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Center the map to fit all markers on the screen<\/span>\r\n        map.fitBounds(bounds);\r\n    }\r\n\r\n    <span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Set zoom level<\/span>\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> boundsListener = google.maps.event.addListener((map), <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'bounds_changed'<\/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);\">event<\/span>) <\/span>{\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">this<\/span>.setZoom(<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">14<\/span>);\r\n        google.maps.event.removeListener(boundsListener);\r\n    });\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 area in HTML code to embed the Google map on the web page. Also, specify an id of the div element and it should be mentioned in Map Object (<code>new google.maps.Map()<\/code>).<\/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<h2>CSS Code<\/h2>\n<p>Add the following CSS to set the width and height of the Google map container.<\/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\/adding-multiple-markers-with-info-windows-to-google-maps-dynamically-from-database\/\">Add Multiple Markers with Info Windows to Google Maps Dynamically from Database<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google Maps is an easy and best way to display location on the web page. A marker is used to identify a location on Google Maps and an Info Window displays some content over the <\/p>\n","protected":false},"author":1,"featured_media":5140,"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":[13,15,35,66],"class_list":["post-1875","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-googlemap","tag-google-api","tag-google-maps","tag-google-maps-api","tag-javascript","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>Google Maps with Multiple Markers and Info Windows using JavaScript - CodexWorld<\/title>\n<meta name=\"description\" content=\"Google Maps with Multiple Markers - Add multiple markers with info windows on Google Maps using JavaScript API V3. Simple code to embed Google Maps with multiple markers.\" \/>\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-maps-with-multiple-markers-using-javascript-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Google Maps with Multiple Markers and Info Windows using JavaScript - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Google Maps with Multiple Markers - Add multiple markers with info windows on Google Maps using JavaScript API V3. Simple code to embed Google Maps with multiple markers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/\" \/>\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=\"2016-10-03T18:39:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-08T10:40:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/10\/embed-google-maps-with-multiple-marker-info-windows-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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-maps-with-multiple-markers-using-javascript-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-maps-with-multiple-markers-using-javascript-api\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Google Maps with Multiple Markers and Info Windows using JavaScript\",\"datePublished\":\"2016-10-03T18:39:50+00:00\",\"dateModified\":\"2022-11-08T10:40:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-maps-with-multiple-markers-using-javascript-api\\\/\"},\"wordCount\":554,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-maps-with-multiple-markers-using-javascript-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/embed-google-maps-with-multiple-marker-info-windows-in-html-using-javascript-api-codexworld.png\",\"keywords\":[\"Google API\",\"Google Maps\",\"Google Maps API\",\"JavaScript\"],\"articleSection\":[\"GoogleMap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/google-maps-with-multiple-markers-using-javascript-api\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-maps-with-multiple-markers-using-javascript-api\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/google-maps-with-multiple-markers-using-javascript-api\\\/\",\"name\":\"Google Maps with Multiple Markers and Info Windows using JavaScript - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-maps-with-multiple-markers-using-javascript-api\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-maps-with-multiple-markers-using-javascript-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/embed-google-maps-with-multiple-marker-info-windows-in-html-using-javascript-api-codexworld.png\",\"datePublished\":\"2016-10-03T18:39:50+00:00\",\"dateModified\":\"2022-11-08T10:40:21+00:00\",\"description\":\"Google Maps with Multiple Markers - Add multiple markers with info windows on Google Maps using JavaScript API V3. Simple code to embed Google Maps with multiple markers.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-maps-with-multiple-markers-using-javascript-api\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/google-maps-with-multiple-markers-using-javascript-api\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-maps-with-multiple-markers-using-javascript-api\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/embed-google-maps-with-multiple-marker-info-windows-in-html-using-javascript-api-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/embed-google-maps-with-multiple-marker-info-windows-in-html-using-javascript-api-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"embed-google-maps-with-multiple-marker-info-windows-in-html-using-javascript-api-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-maps-with-multiple-markers-using-javascript-api\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Google Maps with Multiple Markers and Info Windows 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":"Google Maps with Multiple Markers and Info Windows using JavaScript - CodexWorld","description":"Google Maps with Multiple Markers - Add multiple markers with info windows on Google Maps using JavaScript API V3. Simple code to embed Google Maps with multiple markers.","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-maps-with-multiple-markers-using-javascript-api\/","og_locale":"en_US","og_type":"article","og_title":"Google Maps with Multiple Markers and Info Windows using JavaScript - CodexWorld","og_description":"Google Maps with Multiple Markers - Add multiple markers with info windows on Google Maps using JavaScript API V3. Simple code to embed Google Maps with multiple markers.","og_url":"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2016-10-03T18:39:50+00:00","article_modified_time":"2022-11-08T10:40:21+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/10\/embed-google-maps-with-multiple-marker-info-windows-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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Google Maps with Multiple Markers and Info Windows using JavaScript","datePublished":"2016-10-03T18:39:50+00:00","dateModified":"2022-11-08T10:40:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/"},"wordCount":554,"commentCount":10,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/10\/embed-google-maps-with-multiple-marker-info-windows-in-html-using-javascript-api-codexworld.png","keywords":["Google API","Google Maps","Google Maps API","JavaScript"],"articleSection":["GoogleMap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/","url":"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/","name":"Google Maps with Multiple Markers and Info Windows using JavaScript - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/10\/embed-google-maps-with-multiple-marker-info-windows-in-html-using-javascript-api-codexworld.png","datePublished":"2016-10-03T18:39:50+00:00","dateModified":"2022-11-08T10:40:21+00:00","description":"Google Maps with Multiple Markers - Add multiple markers with info windows on Google Maps using JavaScript API V3. Simple code to embed Google Maps with multiple markers.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/10\/embed-google-maps-with-multiple-marker-info-windows-in-html-using-javascript-api-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2016\/10\/embed-google-maps-with-multiple-marker-info-windows-in-html-using-javascript-api-codexworld.png","width":1366,"height":768,"caption":"embed-google-maps-with-multiple-marker-info-windows-in-html-using-javascript-api-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/google-maps-with-multiple-markers-using-javascript-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Google Maps with Multiple Markers and Info Windows 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\/2016\/10\/embed-google-maps-with-multiple-marker-info-windows-in-html-using-javascript-api-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-uf","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1875","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=1875"}],"version-history":[{"count":5,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1875\/revisions"}],"predecessor-version":[{"id":5139,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/1875\/revisions\/5139"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5140"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=1875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=1875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=1875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}