Drawing Circles with Google Maps JavaScript API - How to Draw Circles with Google Maps

google javascript

← Prev

We have discussed about Markers in one of our previous articles and here we will discuss about another Google Maps object called the Circle. A Circle on a map will highlight a location using Radius, which covers the entire area defined as location.

It is one of the many Google Map overlays, which is shaping the usability of maps by users to track, locate and mark designated areas.

See this demo

We have seen Circles on maps showing the exact location of tremors felt when an earth quake struck. Multiple circles with varied sizes are shown on maps to explain the magnitude of the quake and its effects. This is one example and there are plenty of other reasons for using Circle on Google maps.

Note: If you have just started with Google Maps, then you should read this post where I have explained how to add different types of maps in your website using Google Maps.

The Circle object comes with many properties to help define custom colors, opacity, radius etc. We can set these circles as editable if we want our users to alter locations on the map by themselves.

The Markup
<!DOCTYPE html>
<html> 
<head> 
    <title>Draw Circles using Google Map API</title> 
    <script src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <!--PLEASE NOTE: As of June 22 2016, Google Maps require an API key.
    * GET YOUR API KEY FROM ... https://developers.google.com/maps/documentation/javascript/get-api-key
    * ONCE YOU GET THE KEY, REPLACE 'js?sensor=false' IN THE ABOVE URL WITH "js?key=YOUR_NEW_API_KEY".--> 
</head>

<body>
    <div id="mapContainer" style="width:750px;height:350px;"></div>
</body>

<script>
    // LOCATION IN LATITUDE AND LONGITUDE.
    var center = new google.maps.LatLng(19.0822507, 72.8812041);     

    function initialize() {
        // MAP ATTRIBUTES.
        var mapAttr = {
            center: center,
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        };

        // THE MAP TO DISPLAY.
        var map = new google.maps.Map(document.getElementById("mapContainer"), mapAttr);

        var circle = new google.maps.Circle({
            center: center,
            map: map,
            radius: 10000,          // IN METERS.
            fillColor: '#FF6600',
            fillOpacity: 0.3,
            strokeColor: "#FFF",
            strokeWeight: 0         // DON'T SHOW CIRCLE BORDER.
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>
Try it

Do you know how many different types of Maps you can add in your website using Google Maps. Read this...

Showing a Circle around Mumbai, the finacial capital of India

After defining the Map attributes in the above example, we have defined the Circle object to draw a circle arround the designated location. It also has few properties which needs to be explained.

Properties

center (required): This property specifies the location where the Circle has to be drawn. It uses the LatLng() object, where we can define the latitude and longitude.

map (required): The specified map on which the circle is shown. We can also define the map using the method setMap().

Syntax

circle.setMap(map);

radius (required): We can specify the radius in meters, depending on the zoom level or the area which is to be covered.

fillColor (optional): This property is optional, so if it is not defined, will show a region in gray color. This property allows us to customize the maps with colors of our choice. All we need is to specify hexadecimal color code to show the region.

fillOpacity (optional): A value from 0.0 to 1.0 is defined to set the opacity of color in the circle. (From a light color to darker shade)

strokeColor (optional): You can define a border around the Circle using a hexadecimal color. We have set color as #FFF which is a white color. In fact we wanted to ignore a border around the Circle. But, the color white is not transparent. We have another property to actually hide the border and that is stokeWeight property.

stokeWeight (optional): The weight of the circle in pixels and we have set it as 0. Try using a figure from 1 and above to show the border of the circle.

editable (optional): The editable (true or false) property when set as true, will allow users to edit the circle’s radius as well as alter the location of the circle on the map. The circle will be shown with little circles in the center and on four sides of the actual Circle.

var circle = new google.maps.Circle({
    center: center,
    map: map,
    radius: 10000,          
    fillColor: '#FF6600',
    fillOpacity: 0.3,
    strokeColor: "#FFF",
    strokeWeight: 0,         
    editable: true
});
Conclusion

Paper maps are in use for a very long time now. From maritime to Geographical mapping, maps have always been a very useful tool to mark location and regions. And we have tried to make maps interactive using markers, shapes and colors. Using Google’s Drawing on The Map library you can learn more about drawing interactive maps using various objects.

See this demo

← Previous