Customize maps with your own creativity, settings, styles, visibility, weight, labels and colors for all map features type.
Control options
Select theme
Feature type
All feature
Administrative
All Landscape features
Landscape Human Made
Landscape Natural
Landscape Terrain
All POI features Point of interest
POI Attraction
POI Business
POI Government
POI Medical
POI Park
POI Place of workship
POI School
POI Sports complex
Road
Road Highway
Road Arterial
Road Local
Transit
Transit Line
Transit Station
Water
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
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
Provides the coordinate to center the map.
center: {lat:41.933495, lng:12.579144}
Zoom
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.
mapTypeId: "roadmap"
Controls
Below is a list of the full set of controls you can use in your maps:
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:
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:
Element Type:
Stylers:
Related resources
For further check: Map JavaScript API Guides Map JavaScript API V3 Reference Map Code samples Map JavaScript API Support
Share this tool
Related tools
Choose a map theme or build your custom Google map.
Customize maps with your own creativity, settings, styles and colors.
Generate your Web App Manifest json and improve site data.
Provide information about your website, allow users to quick access for a better experience.
Generate structured data in json-ld and improve your SEO.
Enhance your appearance in Google Search with rich snippet result.
Transform web pages in rich objects in a social graph.
25 Open Graph type to create a huge impact of social traffic on your website.
Generate Twitter cards markup and improve yours html meta.
Attach rich photos, videos and media experiences to Tweets and drive traffic to your site.
Generate beautiful color palette combinations for your designs.
Get your combination scheme: analogous, triadic, complementary and so on.
Generate required and most useful meta tags for your pages.
Provide metadata about your website and help search engines to provide relevant content.
Generate icons for web, Android, iOs, Microsoft and Apps.
Show a graphical representation of your site within browser's address bar.
Build your Service Workers and enrich user experience.
Transform your website in a huge Progressive Web App and enrich users experience.
Choose your data and create your custom QR Code.
Specify format, size, margins, charset, colors and more of your custom QR Code.
Create your personalized Barcode in over 70 formats.
Choose your data, formats and colors and get your personalized Barcode.
Layout Grid Calculator: set your grid system, page width, margin, gutter and columns.
Design your layout grid system for web pages and print design.
Menù
Tracking Tools
Builders and Generators
Image Tools
Tester and Validators
Server and Proxy Tools
Converters Tools