0 Share
Drawing tools
Line color
Line opacity
Line weight
Fill color
Fill opacity
RESET

Google Map

Google Maps JavaScript API allows you the possibility to customize maps with your own content, styles and shapes 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 shapes 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 seochecker</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
  </head>
  <body>
    <div id="my_seochecker_map"></div>
    <script>
      var map;
        function seochecker_map() {
          map = new google.maps.Map(document.getElementById('my_seochecker_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=seochecker_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.

Google map shapes components

Let's diving into each components

On Google Map you can simply add various shapes such as circles, rectangles, polygon and polyline. A shape is an object on the map tied to a latitude/longitude coordinate and styles.

Circles shape

A circle shape is similar to a Polygon, in that you can customize colors, weights and opacity for the outline line (stroke) and the area (fill).

Circle shape properties

center

Required

pecifies the google.maps.LatLng of the center of the circle

radius

Required

specifies the radius of the circle, in meters.

Style option

You can specifies the following style option:

  • strokeColor: hexadecimal HTML color fou outline
  • strokeOpacity: numerical value between 0.0 and 1.0 for outline color
  • strokeWeight: width of the line in pixels
  • fillColor: hexadecimal HTML color for area
  • fillOpacity: numerical value between 0.0 and 1.0 for area color

Example

 
...
const my_circle = new google.maps.Circle({
	center:{lat:41.93132402048365,lng:12.445079146808622},
	radius:4826.969293198998,
	strokeColor:'#0062cc',
	strokeOpacity:0.5,
	strokeWeight:1,
	fillColor:'#133c55',
	fillOpacity:0.5
});
my_circle.setMap(map);
...

Rectangles shape

A rectangle shape is similar to a Polygon, in that you can customize colors, weights and opacity for the outline line (stroke) and the area (fill). Rectangle has a bounds property which defines its shape by specifying a google.maps.LatLngBounds

Rectangle shape properties

bounds

Required

pecifies the google.maps.LatLngBounds of the rectangle north, south, east, west

Style option

You can specifies the following style option:

  • strokeColor: hexadecimal HTML color fou outline
  • strokeOpacity: numerical value between 0.0 and 1.0 for outline color
  • strokeWeight: width of the line in pixels
  • fillColor: hexadecimal HTML color for area
  • fillOpacity: numerical value between 0.0 and 1.0 for area color

Example

 
...
const my_rectangle = new google.maps.Rectangle({
	bounds:{north:33.685, south:33.671, east:-116.234, west:-116.251},
	strokeColor:'#0062cc',
	strokeOpacity:0.5,
	strokeWeight:1,
	fillColor:'#133c55',
	fillOpacity:0.5
});
my_rectangle.setMap(map);
...

Polygon shape

A polygon shape represents an area enclosed by a closed path, which is defined by a series of coordinates. Polygon consist of a series of coordinates in an ordered sequence. You can customize colors, weights and opacity for the outline line (stroke) and the area (fill).

Polygon shape properties

path

Required

object's paths property specifies an array of arrays. Each array defines a separate sequence of ordered LatLng coordinates

Style option

You can specifies the following style option:

  • strokeColor: hexadecimal HTML color fou outline
  • strokeOpacity: numerical value between 0.0 and 1.0 for outline color
  • strokeWeight: width of the line in pixels
  • fillColor: hexadecimal HTML color for area
  • fillOpacity: numerical value between 0.0 and 1.0 for area color

Example

 
...
const my_polygon = new google.maps.Polygon({
	path:{lat:25.774, lng:-80.19},{lat:18.466, lng:-66.118},{lat:32.321, lng:-64.757},{lat:25.774, lng:-80.19},
	strokeColor:'#0062cc',
	strokeOpacity:0.5,
	strokeWeight:1,
	fillColor:'#133c55',
	fillOpacity:0.5
});
my_polygon.setMap(map);
...

Polylines

The Polyline class defines a linear overlay of connected line segments on the map. A Polyline object consists of an array of LatLng locations, and creates a series of line segments that connect those locations in an ordered sequence. You can customize colors, weights and opacity for the outline line (stroke).

Polyline properties

path

Required

object's paths property specifies an array of arrays. Each array defines a separate sequence of ordered LatLng coordinates

Style option

You can specifies the following style option:

  • strokeColor: hexadecimal HTML color fou outline
  • strokeOpacity: numerical value between 0.0 and 1.0 for outline color
  • strokeWeight: width of the line in pixels

Example

 
...
const my_polyline = new google.maps.Polyline({
	path:{lat:25.774, lng:-80.19},{lat:18.466, lng:-66.118},{lat:32.321, lng:-64.757},{lat:25.774, lng:-80.19},
	strokeColor:'#0062cc',
	strokeOpacity:0.5,
	strokeWeight:1
});
my_polyline.setMap(map);
...

References and resources

API KEY best practices
Map JavaScript API Guides
Map JavaScript API V3 Reference
Map Shapes Guides

Share this Tool

Did you like it? Share it!

Share this tool

Related tools. Try these one!

Generators, builders and validators to improve your SEO and web performances

Home Back to top of the page