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

Control options Select Map theme Build your custom Map style

GENERATE MAP CODE RESET

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: 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. 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: 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. 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