{"id":5538,"date":"2023-11-30T06:11:44","date_gmt":"2023-11-30T06:11:44","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=5538"},"modified":"2024-03-26T05:27:00","modified_gmt":"2024-03-26T05:27:00","slug":"embed-open-street-map-with-marker-in-html-using-javascript","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/","title":{"rendered":"Embed OpenStreetMap with Marker in HTML using JavaScript"},"content":{"rendered":"<p>If you are looking for an <b>alternative to Google Maps<\/b>, OpenStreetMap is the best option to embed maps on the website. <b>OpenStreetMap<\/b> is a free and open-source platform that provides geographic data service without any cost. You can use OpenStreetMap API to embed maps in webpage without any restriction of the auth key. Similar to Google Maps, OpenStreetMap is allowed to add map in HTML with a marker and popup window. The marker helps to point the exact location on Map and the popup window displays the info over the marker.<\/p>\n<p>To simplify the OpenStreetMap integration process, the Leaflet JavaScript library can be used. Leaflet is the leading open-source JavaScript library that makes the OpenStreetMap API and map integration simple. In this tutorial, we will show you how to embed map in the HTML web page and add marker with specific latitude &#038; longitude using OpenStreetMap API.<\/p>\n<h2>Latitude &#038; Longitude from Address<\/h2>\n<p>Before getting started, you need to collect the latitude and longitude of the location that will be marked on the map.<\/p>\n<ul>\n<li>You can use this free online tool to get latitude and longitude from address &#8211; <a href=\"https:\/\/www.geocords.com\/\" target=\"_blank\" rel=\"noopener\">Latitude and Longitude Finder<\/a><\/li>\n<\/ul>\n<p>Once you get the latitude &#038; longitude of the desired location, note them to use later in the script.<\/p>\n<p>In this example, we will mark the &#8220;1600 Pennsylvania Avenue NW, Washington, DC 20500, USA&#8221; location on the Map.<\/p>\n<ul>\n<li>The latitude and longitude of this address are <code>38.8976763<\/code> and <code>-77.0365298<\/code>. <\/li>\n<li>So, we will use this latitude &#038; longitude to set the position of the marker on the Map.<\/li>\n<\/ul>\n<h2>Embed Open Street Map in HTML Webpage<\/h2>\n<p>Include the CSS and JS library files of the Leaflet JavaScript plugin.<\/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);\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"stylesheet\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\"<\/span>\/&gt;<\/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> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"<\/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>Define an HTML element with <code>id<\/code> where you want the map to be added.<\/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);\">\"mapWrap\"<\/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>Set a fixed height of the map container and width of your choice using CSS.<\/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);\">style<\/span>&gt;<\/span>\r\n<span style=\"color: rgb(68, 68, 68);\"><span class=\"hljs-selector-id\" style=\"color: rgb(136, 0, 0);\">#mapWrap<\/span> {\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">width<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">100%<\/span>;\r\n    <span class=\"hljs-attribute\" style=\"font-weight: 700;\">height<\/span>: <span class=\"hljs-number\" style=\"color: rgb(136, 0, 0);\">400px<\/span>; \r\n}<\/span>    \r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">style<\/span>&gt;<\/span><\/pre>\n<p>Initialize the OpenStreetMap with the Leaflet plugin using JavaScript.<\/p>\n<ul>\n<li>Define the latitude, longitude, and zoom level of the map.<\/li>\n<li>Attach the map to the HTML container by specified element ID (<code>mapWrap<\/code>).<\/li>\n<li>Add marker with initial position and bind popup window.<\/li>\n<li>Set marker position based on the given latitude &#038; longitude.<\/li>\n<li>Set popup content to be displayed in the info window over the map.<\/li>\n<li>Set callback function to handle marker click event (<code>openPopupWindow<\/code>).<\/li>\n<li>Open the popup window on marker clicks.<\/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);\">\/\/ Define latitude, longitude and zoom level<\/span>\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> latitude = <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">38.8976763<\/span>;\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> longitude = <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">-77.0365298<\/span>;\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> zoom = <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">14<\/span>;\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Set DIV element to embed map<\/span>\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> mymap = L.map(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'mapWrap'<\/span>);\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Add initial marker &amp; popup window<\/span>\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">var<\/span> mmr = L.marker([<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>,<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>]);\r\nmmr.bindPopup(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'0,0'<\/span>);\r\nmmr.addTo(mymap);\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Add copyright attribution<\/span>\r\nL.tileLayer(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png?{foo}'<\/span>, {\r\n    foo: <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'bar'<\/span>,\r\n    attribution:<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'&amp;copy; &lt;a href=\"https:\/\/www.openstreetmap.org\/copyright\"&gt;OpenStreetMap&lt;\/a&gt;'<\/span>}\r\n).addTo(mymap);\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Set lat lng position and zoom level of map <\/span>\r\nmmr.setLatLng(L.latLng(latitude, longitude));\r\nmymap.setView([latitude, longitude], zoom);\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Set popup window content<\/span>\r\nmmr.setPopupContent(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Latitude: '<\/span>+latitude+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">' &lt;br \/&gt; Longitude: '<\/span>+longitude).openPopup();\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Set marker onclick event<\/span>\r\nmmr.on(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'click'<\/span>, openPopupWindow);\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Marker click event handler<\/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);\">openPopupWindow<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">e<\/span>) <\/span>{\r\n    mmr.setPopupContent(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'Latitude: '<\/span>+e.latlng.lat+<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">' &lt;br \/&gt; Longitude: '<\/span>+e.latlng.lng).openPopup();\r\n}<\/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>On page load, you will see the map is displayed on the web page and the marker is pointed on the map as per the given latitude &#038; longitude. The popup window will display over the map with info window content. Also, this popup window will appear on clicking the marker.<\/p>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/openstreetmap-with-multiple-markers-info-window-popups-using-javascript\/\">OpenStreetMap with Multiple Markers and Info Windows using JavaScript<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are looking for an alternative to Google Maps, OpenStreetMap is the best option to embed maps on the website. OpenStreetMap is a free and open-source platform that provides geographic data service without any <\/p>\n","protected":false},"author":1,"featured_media":5540,"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":[10],"tags":[250,179,66,382,381],"class_list":["post-5538","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-api","tag-html","tag-javascript","tag-map","tag-openstreetmap","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 OpenStreetMap with Marker in HTML using JavaScript - CodexWorld<\/title>\n<meta name=\"description\" content=\"Open Street Map with marker and info window - Add OpenStreetMap to the webpage using JavaScript. Embed OpenStreetMap with marker, info window, or popup in HTML.\" \/>\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\/embed-open-street-map-with-marker-in-html-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embed OpenStreetMap with Marker in HTML using JavaScript - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Open Street Map with marker and info window - Add OpenStreetMap to the webpage using JavaScript. Embed OpenStreetMap with marker, info window, or popup in HTML.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-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=\"2023-11-30T06:11:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-26T05:27:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/11\/embed-open-street-map-with-marker-in-html-using-javascript-api-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\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\\\/embed-open-street-map-with-marker-in-html-using-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/embed-open-street-map-with-marker-in-html-using-javascript\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Embed OpenStreetMap with Marker in HTML using JavaScript\",\"datePublished\":\"2023-11-30T06:11:44+00:00\",\"dateModified\":\"2024-03-26T05:27:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/embed-open-street-map-with-marker-in-html-using-javascript\\\/\"},\"wordCount\":441,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/embed-open-street-map-with-marker-in-html-using-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/embed-open-street-map-with-marker-in-html-using-javascript-api-codexworld.png\",\"keywords\":[\"API\",\"HTML\",\"JavaScript\",\"Map\",\"OpenStreetMap\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/embed-open-street-map-with-marker-in-html-using-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/embed-open-street-map-with-marker-in-html-using-javascript\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/embed-open-street-map-with-marker-in-html-using-javascript\\\/\",\"name\":\"Embed OpenStreetMap with Marker in HTML using JavaScript - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/embed-open-street-map-with-marker-in-html-using-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/embed-open-street-map-with-marker-in-html-using-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/embed-open-street-map-with-marker-in-html-using-javascript-api-codexworld.png\",\"datePublished\":\"2023-11-30T06:11:44+00:00\",\"dateModified\":\"2024-03-26T05:27:00+00:00\",\"description\":\"Open Street Map with marker and info window - Add OpenStreetMap to the webpage using JavaScript. Embed OpenStreetMap with marker, info window, or popup in HTML.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/embed-open-street-map-with-marker-in-html-using-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/embed-open-street-map-with-marker-in-html-using-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/embed-open-street-map-with-marker-in-html-using-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/embed-open-street-map-with-marker-in-html-using-javascript-api-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/embed-open-street-map-with-marker-in-html-using-javascript-api-codexworld.png\",\"width\":1920,\"height\":1080,\"caption\":\"embed-open-street-map-with-marker-in-html-using-javascript-api-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/embed-open-street-map-with-marker-in-html-using-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Embed OpenStreetMap with Marker 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 OpenStreetMap with Marker in HTML using JavaScript - CodexWorld","description":"Open Street Map with marker and info window - Add OpenStreetMap to the webpage using JavaScript. Embed OpenStreetMap with marker, info window, or popup in HTML.","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\/embed-open-street-map-with-marker-in-html-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Embed OpenStreetMap with Marker in HTML using JavaScript - CodexWorld","og_description":"Open Street Map with marker and info window - Add OpenStreetMap to the webpage using JavaScript. Embed OpenStreetMap with marker, info window, or popup in HTML.","og_url":"https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2023-11-30T06:11:44+00:00","article_modified_time":"2024-03-26T05:27:00+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/11\/embed-open-street-map-with-marker-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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Embed OpenStreetMap with Marker in HTML using JavaScript","datePublished":"2023-11-30T06:11:44+00:00","dateModified":"2024-03-26T05:27:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/"},"wordCount":441,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/11\/embed-open-street-map-with-marker-in-html-using-javascript-api-codexworld.png","keywords":["API","HTML","JavaScript","Map","OpenStreetMap"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/","url":"https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/","name":"Embed OpenStreetMap with Marker in HTML using JavaScript - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/11\/embed-open-street-map-with-marker-in-html-using-javascript-api-codexworld.png","datePublished":"2023-11-30T06:11:44+00:00","dateModified":"2024-03-26T05:27:00+00:00","description":"Open Street Map with marker and info window - Add OpenStreetMap to the webpage using JavaScript. Embed OpenStreetMap with marker, info window, or popup in HTML.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/11\/embed-open-street-map-with-marker-in-html-using-javascript-api-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2023\/11\/embed-open-street-map-with-marker-in-html-using-javascript-api-codexworld.png","width":1920,"height":1080,"caption":"embed-open-street-map-with-marker-in-html-using-javascript-api-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/embed-open-street-map-with-marker-in-html-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Embed OpenStreetMap with Marker 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\/2023\/11\/embed-open-street-map-with-marker-in-html-using-javascript-api-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-1rk","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5538","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=5538"}],"version-history":[{"count":3,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5538\/revisions"}],"predecessor-version":[{"id":5587,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/5538\/revisions\/5587"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/5540"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=5538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=5538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=5538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}