{"id":23387,"date":"2020-09-09T23:32:11","date_gmt":"2020-09-09T15:32:11","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23387"},"modified":"2023-04-06T19:11:33","modified_gmt":"2023-04-06T11:11:33","slug":"javascript-libraries-for-interactive-maps","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/","title":{"rendered":"13 JavaScript Libraries to Create Interactive &#038; Customized Maps"},"content":{"rendered":"<p>We previously featured <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/\" rel=\"noopener noreferrer\">Google Map Maker<\/a> and 10 other <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/map-tools\/\" rel=\"noopener noreferrer\">tools to help you build maps<\/a>. However, if you prefer using Javascript libraries instead, have we got the post for you.<\/p>\n<p>Here is the JS libraries you can use to show special map markers, draw custom route lines or even show a dialog when you hover or click on certain points of the map.<\/p>\n<p>Personalize your maps in the style that you want \u2014 some of them can be styled with CSS \u2014 or <strong>customize your map to be as interactive as you like<\/strong>. The source of the map data, dependencies, and licenses of each library have been included for your convenience.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/map-tools\/\" class=\"ref-block__link\" title=\"Read More: 10 Free Tools to Create Your Own Maps\" rel=\"bookmark\"><span class=\"screen-reader-text\">10 Free Tools to Create Your Own Maps<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/map-tools.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-22366 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/map-tools.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">10 Free Tools to Create Your Own Maps<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tMaps are handy for a lot of reasons. Not only do they help us navigate through certain areas,...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/hpneo.dev\/gmaps\/\">GMaps<\/a><\/h2>\n<p><strong>GMaps<\/strong> makes adding and customizing Google Maps a breeze. Aside of adding a map, you can also a couple of things into the map, such as polylines which may be useful for drawing a route, a special menu control, and even HTML elements.<\/p>\n<p>GMaps is compatible with JSON formatted data which you can utilize to integrate your map with a particular app, like Foursquare.<\/p>\n<ul>\n<li><strong>Map Data Source<\/strong>: Google Maps<\/li>\n<li><strong>Dependencies<\/strong>: <em>none<\/em><\/li>\n<li><strong>License<\/strong>: MIT License<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-gmaps.jpg\" alt=\"js-libraries-custom-maps\" width=\"700\" height=\"430\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/mmarcon\/jhere\">jHere<\/a><\/h2>\n<p>At 5KB, jHERE shows you that size doesn\u2019t matter; you can still build a powerful interactive map with a handful of customization options. jHERE derives map visualization from <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.here.com\/\">HERE map<\/a>, which is one of the most popular map providers for Windows Phone.<\/p>\n<p>The library can be extended with new functionality, and there are a couple of <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/mmarcon\/jhere\/blob\/master\/EXTENSIONS.md\">extensions<\/a> developed for this library including one for adding shapes, routes, and custom markers.<\/p>\n<ul>\n<li><strong>Map Data Source<\/strong>: HERE Maps<\/li>\n<li><strong>Dependencies<\/strong>: jQuery or ZeptoJS<\/li>\n<li><strong>License<\/strong>: MIT License<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-jhere.jpg\" alt=\"js-libraries-custom-maps\" width=\"700\" height=\"430\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/kartograph.org\/\/\">Kartograph<\/a><\/h2>\n<p><strong>Kartograph<\/strong> comprises of two files, Kartograph.ph to generate the map in SVG format, and Kartograph.js to add interactive elements on top of the map. Since Kartograph.js is built on top of Raphael.js the map would work nicely down to IE7. You can have a look at the interactive map <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/kartograph.org\/\/showcase\/\">demos<\/a> to discover what Kartograph can do.<\/p>\n<ul>\n<li><strong>Map Data Source<\/strong>: Kartograph<\/li>\n<li><strong>Dependencies<\/strong>: Kartograph.py, Raphael, and jQuery<\/li>\n<li><strong>License<\/strong>: AGPL and LGPL<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-kartograph.jpg\" alt=\"js-libraries-custom-maps\" width=\"700\" height=\"430\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/neveldo\/jQuery-Mapael\">Mapael<\/a><\/h2>\n<p><strong>jQuery Mapael<\/strong> allows you to create maps with elegant data visualization as well as interactivity. You can, for example, create a map and designate each region on the map with different colors based on region. You can also add tooltip on the region, as well as event handlers like <code>click<\/code> or <code>hover<\/code>.<\/p>\n<p>The map is built with SEO in mind by providing alternate content for search engine robots that are not capable of crawling JavaScript-generated content.<\/p>\n<ul>\n<li><strong>Map Data Source<\/strong>: Raphael.js<\/li>\n<li><strong>Dependencies<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: MIT License<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-mapael.jpg\" alt=\"js-libraries-custom-maps\" width=\"700\" height=\"430\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/d3js.org\">D3js<\/a><\/h2>\n<p><strong>D3.js<\/strong> is a comprehensive JavaScript library that will bring your data to life through HTML, SVG and CSS. D3 use is quite varied, including for building a highly interactive map.<\/p>\n<ul>\n<li><strong>Map Data Source<\/strong>: D3.js<\/li>\n<li><strong>Dependencies<\/strong>: <em>none<\/em><\/li>\n<li><strong>License<\/strong>: <em>Undefined<\/em><\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-d3js.jpg\" alt=\"js-libraries-custom-maps\" width=\"700\" height=\"430\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/datamaps.github.io\/\">DataMaps<\/a><\/h2>\n<p>If building a map with D3.js is overwhelming, you can use <strong>DataMaps<\/strong>. DataMaps is essentially a D3.js plugin that is developed especially to build maps. It inherits many of the capabilities of D3.js; hence you can build simple or very customized maps with it. Did I mention that the map is responsive?<\/p>\n<ul>\n<li><strong>Map Data Source<\/strong>: D3.js<\/li>\n<li><strong>Dependencies<\/strong>: D3.js and <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/topojson\/topojson\">TopoJSON<\/a><\/li>\n<li><strong>License<\/strong>: MIT License<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/maps-datamaps.jpg\" alt=\"js-libraries-custom-maps\" width=\"700\" height=\"430\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart\">GeoChart<\/a><\/h2>\n<p>GeoChart is a simplified Google Map that renders region, markers, and text, instead of a full-fledged map with tiny details. The map is generated in SVG, and can be customized in many ways, including changing the region colors, adding popups, and custom map markers.<\/p>\n<ul>\n<li><strong>Map Data Source<\/strong>: Google Maps<\/li>\n<li><strong>Dependencies<\/strong>: <em>none<\/em><\/li>\n<li><strong>License<\/strong>: Read <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/cloud.google.com\/maps-platform\/terms\/\">Google Maps TOS<\/a><\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-geochart.jpg\" alt=\"js-libraries-custom-maps\" width=\"700\" height=\"430\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/danielemoraschi\/maplace.js\/\">Maplace<\/a><\/h2>\n<p><strong>Maplace<\/strong>, a jQuery plugin for generating map through the Google Maps API v3. Maplace works in all browsers, including IE6. So this is another great plugin worth of your attention if you want to build map in the easiest way possible.<\/p>\n<ul>\n<li><strong>Map Data Source<\/strong>: Google Maps<\/li>\n<li><strong>Dependencies<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: MIT License<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-maplace.jpg\" alt=\"js-libraries-custom-maps\" width=\"700\" height=\"430\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/mobomo\/stately\/\">Stately<\/a><\/h2>\n<p>Stately is JavaScript library that is developed to generate US maps. The library is comparably lightweight considering that you can add interactive elements on top of your generated maps.<\/p>\n<ul>\n<li><strong>Map Data Source<\/strong>: Stately \/ SVG<\/li>\n<li><strong>Dependencies<\/strong>: <em>none<\/em><\/li>\n<li><strong>License<\/strong>: MIT License<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-stately.jpg\" alt=\"js-libraries-custom-maps\" width=\"700\" height=\"430\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/ubilabs.github.io\/geocomplete\/\">GeoComplete<\/a><\/h2>\n<p>GeoComplete is a distinct JavaScript library on its own. The library will add an input field along with the map, which will show suggestions of cities, countries or states as you type.<\/p>\n<ul>\n<li><strong>Map Data Source<\/strong>: Google Maps<\/li>\n<li><strong>Dependencies<\/strong>: jQuery<\/li>\n<li><strong>License<\/strong>: MIT License<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-geocomplete.jpg\" alt=\"js-libraries-custom-maps\" width=\"700\" height=\"430\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/map-tools.io\/\">Map Tools<\/a><\/h2>\n<p>Map Tools provides intuitive API to add Google Maps. It supports loading of geo-formatted JSON data such as <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/topojson\/topojson\">TopoJSON<\/a> and <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/geojson.org\/\">GeoJSON<\/a> to render the map. On top of that, you can add animated markers that I think will make the map more lively, insert HTML content with variables or placeholders ala <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/handlebarsjs.com\/\">Handlebars<\/a>.<\/p>\n<ul>\n<li><strong>Map Data Source<\/strong>: Google Maps<\/li>\n<li><strong>Dependencies<\/strong>: GeoJSON \/ TopoJSON<\/li>\n<li><strong>License<\/strong>: MIT License<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-maptools.jpg\" alt=\"js-libraries-custom-maps\" width=\"700\" height=\"430\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/openlayers.org\/\">OpenLayers<\/a><\/h2>\n<p><strong>OpenLayers<\/strong> is a high performance open source JavaScript framework to build interactive maps using various mapping services. You can choose the map layer source using tiled layer or vector layer from a number of map services.<\/p>\n<p>OpenLayer come mobile ready out of the box, suitable for building maps across devices and browsers. You can use CSS for a different look of your map.<\/p>\n<ul>\n<li><strong>Map Data Source<\/strong>: OpenStreetMap<\/li>\n<li><strong>Dependencies<\/strong>: none<\/li>\n<li><strong>License<\/strong>: Undefined<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-openlayers.jpg\" alt=\"js-libraries-custom-maps\" width=\"700\" height=\"430\"><\/figure>\n<h2><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/leafletjs.com\/\">Leaflet<\/a><\/h2>\n<p>Developers gave <strong>Leaflet<\/strong> basic functions to work perfectly, keeping its size small, perfect for mobile devices. For specific functions, just extend Leaflet using <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/leafletjs.com\/plugins.html\">plugins<\/a>.<\/p>\n<p>Leaflet has most online map features you need: tile layers, popup, markers, and free vector layers like polylines, polygons, circles or rectangles. It comes with nice default designs although you can customize the style using CSS3 with ease.<\/p>\n<p>Leaflet has the most usage interaction features both for mobile and desktop browsers.<\/p>\n<ul>\n<li><strong>Map Data Source<\/strong>: OpenStreetMap<\/li>\n<li><strong>Dependencies<\/strong>: none<\/li>\n<li><strong>License<\/strong>: Undefined<\/li>\n<\/ul>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-leafletjs.jpg\" alt=\"js-libraries-custom-maps\" width=\"700\" height=\"430\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>We previously featured Google Map Maker and 10 other tools to help you build maps. However, if you prefer using Javascript libraries instead, have we got the post for you. Here is the JS libraries you can use to show special map markers, draw custom route lines or even show a dialog when you hover&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[3497,4117,4538],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>13 JavaScript Libraries to Create Interactive &amp; Customized Maps - Hongkiat<\/title>\n<meta name=\"description\" content=\"We previously featured Google Map Maker and 10 other tools to help you build maps. However, if you prefer using Javascript libraries instead, have we got\" \/>\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.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"13 JavaScript Libraries to Create Interactive &amp; Customized Maps\" \/>\n<meta property=\"og:description\" content=\"We previously featured Google Map Maker and 10 other tools to help you build maps. However, if you prefer using Javascript libraries instead, have we got\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-09T15:32:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T11:11:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-gmaps.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-for-interactive-maps\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-for-interactive-maps\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"13 JavaScript Libraries to Create Interactive &#038; Customized Maps\",\"datePublished\":\"2020-09-09T15:32:11+00:00\",\"dateModified\":\"2023-04-06T11:11:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-for-interactive-maps\\\/\"},\"wordCount\":965,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-for-interactive-maps\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/javascript-libraries-for-interactive-maps\\\/map-gmaps.jpg\",\"keywords\":[\"Javascript Library\",\"Javascripts\",\"Maps and Navigation\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-for-interactive-maps\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-for-interactive-maps\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-for-interactive-maps\\\/\",\"name\":\"13 JavaScript Libraries to Create Interactive & Customized Maps - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-for-interactive-maps\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-for-interactive-maps\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/javascript-libraries-for-interactive-maps\\\/map-gmaps.jpg\",\"datePublished\":\"2020-09-09T15:32:11+00:00\",\"dateModified\":\"2023-04-06T11:11:33+00:00\",\"description\":\"We previously featured Google Map Maker and 10 other tools to help you build maps. However, if you prefer using Javascript libraries instead, have we got\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-for-interactive-maps\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-for-interactive-maps\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-for-interactive-maps\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/javascript-libraries-for-interactive-maps\\\/map-gmaps.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/javascript-libraries-for-interactive-maps\\\/map-gmaps.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/javascript-libraries-for-interactive-maps\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"13 JavaScript Libraries to Create Interactive &#038; Customized Maps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"13 JavaScript Libraries to Create Interactive & Customized Maps - Hongkiat","description":"We previously featured Google Map Maker and 10 other tools to help you build maps. However, if you prefer using Javascript libraries instead, have we got","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.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/","og_locale":"en_US","og_type":"article","og_title":"13 JavaScript Libraries to Create Interactive & Customized Maps","og_description":"We previously featured Google Map Maker and 10 other tools to help you build maps. However, if you prefer using Javascript libraries instead, have we got","og_url":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-09-09T15:32:11+00:00","article_modified_time":"2023-04-06T11:11:33+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-gmaps.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"13 JavaScript Libraries to Create Interactive &#038; Customized Maps","datePublished":"2020-09-09T15:32:11+00:00","dateModified":"2023-04-06T11:11:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/"},"wordCount":965,"commentCount":7,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-gmaps.jpg","keywords":["Javascript Library","Javascripts","Maps and Navigation"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/","url":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/","name":"13 JavaScript Libraries to Create Interactive & Customized Maps - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-gmaps.jpg","datePublished":"2020-09-09T15:32:11+00:00","dateModified":"2023-04-06T11:11:33+00:00","description":"We previously featured Google Map Maker and 10 other tools to help you build maps. However, if you prefer using Javascript libraries instead, have we got","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-gmaps.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/javascript-libraries-for-interactive-maps\/map-gmaps.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/javascript-libraries-for-interactive-maps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"13 JavaScript Libraries to Create Interactive &#038; Customized Maps"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-65d","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23387"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23387\/revisions"}],"predecessor-version":[{"id":65778,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23387\/revisions\/65778"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23387"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}