{"id":21742,"date":"2019-09-05T23:19:30","date_gmt":"2019-09-05T15:19:30","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=21742"},"modified":"2022-07-26T17:12:56","modified_gmt":"2022-07-26T09:12:56","slug":"create-map-with-googlemapbuilder","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/","title":{"rendered":"How to Create And Customize Google Maps"},"content":{"rendered":"

We all know that Google Maps is one of the most powerful apps on the web to navigate faster and easier throughout the world. However, what most of us may not know is that you can customize Google Maps<\/a> in terms of UI and other features. And it doesn\u2019t require any JavaScript knowledge as well.<\/p>\n

Snazzymaps<\/a> is a tool that aims to make it easier for anyone to customize Google Map. It has a nice and friendly user interface. You can build the map with just a couple of selections from the select box<\/strong>, and you don\u2019t even have to code.<\/p>\n

There are many options for you to control the look of the map. You may also insert your custom marker icon and places. And the best part is it provides plenty pre-built map styles<\/strong>.<\/p>\n

Recommended Reading: <\/strong>How To Style Google Maps<\/a><\/p>\n

Overview<\/h2>\n

Snazzymaps works exactly the same as customizing Google Maps using map styles API. It gives you a UI that is nicer than what you can do with plain JavaScript code<\/strong>. Within the tool, all options are located in the left panel, leaving the remaining space for the map.<\/p>\n

\"build<\/figure>\n

The options on the left are used to customize the look of the map: size, location, marker, map type <\/strong>and map theme<\/strong>. All the changes will be automatically previewed on the map.<\/p>\n

Adding Custom Marker<\/h2>\n

This tool lets you easily add your custom marker to map places. To do this, firstly you need to provide your marker icon URL <\/strong>and also the address of the place <\/strong>you want to mark.<\/p>\n

With this Hospital Building icon<\/a> from Map Icons<\/a>, this is how to add the marker.<\/p>\n

To start off:<\/p>\n

    \n
  1. Select Add your first marker<\/strong> option from the left panel.<\/li>\n
  2. You will be asked to add a name for the marker and location. Here we simply name it Hospital<\/em>. For the Location<\/strong>, we can simply click anywhere on the Map, and it will populate the Latitude and Longitude value for you.<\/li>\n
  3. Select the \u201cCustom Marker\u201d and upload the icon.<\/li>\n<\/ol>\n
    \"marker<\/figure>\n

    And here\u2019s the result.<\/p>\n

    \"map<\/figure>\n

    Once done, don\u2019t forget to save the Map<\/strong>. Here, you will need to name the map and add your own Google Maps API key.<\/p>\n

    \"save<\/figure>\n

    Embed the Map<\/h2>\n

    So, now that you\u2019ve customized the map, the next step is to put it on the web<\/strong>. To get the code, scroll down to the bottom of the page and you will see the View Code<\/strong> button.<\/p>\n

    \"embed<\/figure>\n

    You\u2019ll get an HTML iframe tag with the URL<\/strong> to embed the map copy and paste<\/strong> all the code and put them at anywhere into your website content.<\/p>\n

    Final Thoughts<\/h2>\n

    We\u2019ve just seen how easy it is to create and customize a map using Snazzymap. You can customize the look and feel, size, and a few components within it. All these are built on top of the Google Maps API.<\/p>\n

    Do let us know about your experience in the comments section below.<\/p>","protected":false},"excerpt":{"rendered":"

    We all know that Google Maps is one of the most powerful apps on the web to navigate faster and easier throughout the world. However, what most of us may not know is that you can customize Google Maps in terms of UI and other features. And it doesn\u2019t require any JavaScript knowledge as well.…<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[2171,205],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Create And Customize Google Maps - Hongkiat<\/title>\n<meta name=\"description\" content=\"We all know that Google Maps is one of the most powerful apps on the web to navigate faster and easier throughout the world. However, what most of us may\" \/>\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\/create-map-with-googlemapbuilder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create And Customize Google Maps\" \/>\n<meta property=\"og:description\" content=\"We all know that Google Maps is one of the most powerful apps on the web to navigate faster and easier throughout the world. However, what most of us may\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/\" \/>\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=\"2019-09-05T15:19:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-26T09:12:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/create-map-with-googlemapbuilder\/build-a-map.jpg\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\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.hongkiat.com\\\/blog\\\/create-map-with-googlemapbuilder\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-map-with-googlemapbuilder\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"How to Create And Customize Google Maps\",\"datePublished\":\"2019-09-05T15:19:30+00:00\",\"dateModified\":\"2022-07-26T09:12:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-map-with-googlemapbuilder\\\/\"},\"wordCount\":502,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-map-with-googlemapbuilder\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-map-with-googlemapbuilder\\\/build-a-map.jpg\",\"keywords\":[\"Google Maps\",\"web apps\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-map-with-googlemapbuilder\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-map-with-googlemapbuilder\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-map-with-googlemapbuilder\\\/\",\"name\":\"How to Create And Customize Google Maps - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-map-with-googlemapbuilder\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-map-with-googlemapbuilder\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-map-with-googlemapbuilder\\\/build-a-map.jpg\",\"datePublished\":\"2019-09-05T15:19:30+00:00\",\"dateModified\":\"2022-07-26T09:12:56+00:00\",\"description\":\"We all know that Google Maps is one of the most powerful apps on the web to navigate faster and easier throughout the world. However, what most of us may\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-map-with-googlemapbuilder\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-map-with-googlemapbuilder\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-map-with-googlemapbuilder\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-map-with-googlemapbuilder\\\/build-a-map.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/create-map-with-googlemapbuilder\\\/build-a-map.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/create-map-with-googlemapbuilder\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create And Customize Google 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\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create And Customize Google Maps - Hongkiat","description":"We all know that Google Maps is one of the most powerful apps on the web to navigate faster and easier throughout the world. However, what most of us may","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\/create-map-with-googlemapbuilder\/","og_locale":"en_US","og_type":"article","og_title":"How to Create And Customize Google Maps","og_description":"We all know that Google Maps is one of the most powerful apps on the web to navigate faster and easier throughout the world. However, what most of us may","og_url":"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-09-05T15:19:30+00:00","article_modified_time":"2022-07-26T09:12:56+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/create-map-with-googlemapbuilder\/build-a-map.jpg","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"How to Create And Customize Google Maps","datePublished":"2019-09-05T15:19:30+00:00","dateModified":"2022-07-26T09:12:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/"},"wordCount":502,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-map-with-googlemapbuilder\/build-a-map.jpg","keywords":["Google Maps","web apps"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/","url":"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/","name":"How to Create And Customize Google Maps - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-map-with-googlemapbuilder\/build-a-map.jpg","datePublished":"2019-09-05T15:19:30+00:00","dateModified":"2022-07-26T09:12:56+00:00","description":"We all know that Google Maps is one of the most powerful apps on the web to navigate faster and easier throughout the world. However, what most of us may","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/create-map-with-googlemapbuilder\/build-a-map.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/create-map-with-googlemapbuilder\/build-a-map.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/create-map-with-googlemapbuilder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create And Customize Google 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\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5EG","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21742","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\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=21742"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21742\/revisions"}],"predecessor-version":[{"id":60657,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/21742\/revisions\/60657"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=21742"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=21742"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=21742"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=21742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}