Google MAP Builder

Google Map builder

Choose a map theme from our library or build your custom Google Map style

Customize maps with your own creativity, settings, styles, visibility, weight, labels and colors for all map features type.

Write address or drag the markers on the map
Latitude
Longitude
Map type
Zoom

Configure Map Control options

Control options

Map type control
Zoom control
Scale control
Street view control
Rotate control
Full screen control

Select Map theme

Select theme


All feature

Saturation
Lightness
Weight
Visibility
Labels

Administrative

Saturation
Lightness
Visibility
Weight
Color
Labels

All Landscape features

Saturation
Lightness
Visibility
Weight
Color
Labels

Landscape Human Made

Saturation
Lightness
Visibility
Weight
Color
Labels

Landscape Natural

Saturation
Lightness
Visibility
Weight
Color
Labels

Landscape Terrain

Saturation
Lightness
Visibility
Weight
Color
Labels

All POI features Point of interest

Saturation
Lightness
Visibility
Weight
Color
Labels

POI Attraction

Saturation
Lightness
Visibility
Weight
Color
Labels

POI Business

Saturation
Lightness
Visibility
Weight
Color
Labels

POI Government

Saturation
Lightness
Visibility
Weight
Color
Labels

POI Medical

Saturation
Lightness
Visibility
Weight
Color
Labels

POI Park

Saturation
Lightness
Visibility
Weight
Color
Labels

POI Place of workship

Saturation
Lightness
Visibility
Weight
Color
Labels

POI School

Saturation
Lightness
Visibility
Weight
Color
Labels

POI Sports complex

Saturation
Lightness
Visibility
Weight
Color
Labels

Road

Saturation
Lightness
Visibility
Weight
Color
Labels

Road Highway

Saturation
Lightness
Visibility
Weight
Color
Labels

Road Arterial

Saturation
Lightness
Visibility
Weight
Color
Labels

Road Local

Saturation
Lightness
Visibility
Weight
Color
Labels

Transit

Saturation
Lightness
Visibility
Weight
Color
Labels

Transit Line

Saturation
Lightness
Visibility
Weight
Color
Labels

Transit Station

Saturation
Lightness
Visibility
Weight
Color
Labels

Water

Saturation
Lightness
Visibility
Weight
Color
Labels

Map preview

Google Maps

Google Maps JavaScript API allows you the possibility to customize maps with your own content, styles and colors for display on web pages and mobile devices.

The Maps JavaScript API features four basic map types (roadmap, satellite, hybrid, and terrain) that you can customize with different layers, styles, controls, events, services and libraries.

The effect of the following stylers builder will change everytime Google updates the base map style. Use with caution.

Getting started

The smartest way to get more familiar with Google Maps JavaScript API is to see a simple example.

The following code displays the map of Rome city centre, Italy:

<html>
  <head>
    <title>Simple Map by dunplab</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
  </head>
  <body>
    <div id="my_dunplab_map"></div>
    <script>
      var map;
        function dunplab_map() {
          map = new google.maps.Map(document.getElementById('my_dunplab_map'), {
            center: {lat:41.923741, lng:12.494129},
            zoom: 8
          });
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=dunplab_map" async defer></script>
  </body>
</html>

To use the Maps JavaScript API, you must get an API key which you can then add to your mobile app, website, or web server.

The API key is used to track API requests associated with your project for usage and billing.

To learn more about API keys, see the API Key Best Practices

Google map builder components

Let's diving into each components

The following table gives an explanation and example of each of the components. To learn more, check out the links in the related resources section below.

Address

It's only a prerequisite for providing latitude and longitude coordinates to center the map.

Latitude and longitude

Required

Provides the coordinate to center the map.

center: {lat:41.933495, lng:12.579144}

Zoom

Required

Provides the zoom level of the map.

zoom: 12

Map type

There are four types of maps available within the Maps JavaScript API. In addition to the familiar "painted" road map tiles, the Maps JavaScript API also supports other maps types.

  • roadmap: displays the default road map view. This is the default map type.
  • satellite: displays Google Earth satellite images.
  • hybrid: displays a mixture of normal and satellite views.
  • terrain: displays a physical map based on terrain information.
mapTypeId: "roadmap"

Controls

Below is a list of the full set of controls you can use in your maps:

  • The Zoom control displays "+" and "-" buttons for changing the zoom level of the map.
  • The Map Type control is available in a dropdown or horizontal button bar style, allowing the user to choose a map type (ROADMAP, SATELLITE, HYBRID, or TERRAIN).
  • The Street View control contains a Pegman icon which can be dragged onto the map to enable Street View.
  • The Rotate control provides a combination of tilt and rotate options for maps containing oblique imagery. See 45° imagery for more information.
  • The Scale control displays a map scale element. This control is disabled by default.
  • The Fullscreen control offers the option to open the map in fullscreen mode. Note: iOS doesn't support the fullscreen feature. The fullscreen control is therefore not visible on iOS devices.
mapTypeControl:true

You may also turn off the API's default UI settings entirely. To do so, set the map's disableDefaultUI property (within the MapOptions object) to true

disableDefaultUI: true

Map themes

This builder provide different color schemes for Google Maps.

Using a styled map, you can customize the presentation of the Google base maps, changing the visual display of such elements as roads, parks, and built-up areas.

There are two ways to apply styles to a map:

  1. Set the .styles property of the map's MapOptions object. This approach changes the style of the standard map types. Base imagery in terrain and satellite views is not affected, but roads, labels, and other map components do respect the styling rules.
  2. Create a StyledMapType and apply it to the map. This creates a new map type, which the user can select from the map type control.
styles: [
	{elementType: 'geometry', stylers: [{color: '#242f3e'}]},
	{elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
	{elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
	{
	  featureType: 'administrative.locality',
	  elementType: 'labels.text.fill',
	  stylers: [{color: '#d59563'}]
	}
]

Customize Features type

Styled maps use two concepts to apply colors and other style changes to a map:

  1. Features type Selectors specify the geographic components that you can style on the map. These include roads, parks, bodies of water, and more, as well as their labels. The selectors include features and elements, specified as featureType and elementType properties.
  2. Stylers are color and visibility properties that you can apply to map elements. They define the displayed color through a combination of hue, color, and lightness/gamma values.

Features type Selectors:

  • All
  • Administrative
    • Country
    • Province
    • Locality
    • Neighborhood
    • Land parcel
  • Landscape
    • Human-made
    • Natural
      • Landcover
      • Terrain
  • Points of interest
    • Attraction
    • Business
    • Government
    • Medical
    • Park
    • Place of worship
    • School
    • Sports complex
  • Road
    • Highway
      • Controlled access
    • Arterial
    • Local
  • Transit
    • Line
    • Station
      • Airport
      • Bus
      • Rail
  • Water

Element Type:

  • All
  • Geometry
    • Fill
    • Stroke
  • Labels
    • Text
      • Text fill
      • Text outline
    • Icon

Stylers:

  • Visibility
    • Inherit
    • Hidden
    • Simplified
    • Shown
  • Color
  • Weight
  • Saturation
  • Lightness

Share this tool

Did u like it? Share it!

Related tools

Try these one!
Build your Google campaign url

GOOGLE URL BUILDER

Build your Google campaign url for better traking.

Add UTM parameters and track Custom Campaigns in Analytics account.

Go Build
Build your Google map

GOOGLE MAP BUILDER

Choose a map theme or build your custom Google map.

Customize maps with your own creativity, settings, styles and colors.

Go Build
Google Event Tracking Builder

GOOGLE EVENT BUILDER

Measure and track user interactions with your contents.

Track all the actions you want: downloads, clicks, video plays, social share, engagement.

Go Build
Google Mail Tracker

GOOGLE MAIL TRACKER

Create Analytics trackable URL and track email opens.

Send your email campaign and get data when user open your email.

Go Build