Drawing a circle on Google maps

Submitted by olaf on 2015-04-30

I read about a house, approximately 15 walking minutes (1.5 km) from the town center. Drawing a circle around the center would give me an idea, where it might be located. Searching for Google maps and circles led me to Google Maps JavaScript API v3 - Circles, which I modified slightly.

Including a map on a web page is just loading the maps API

<script src="https://maps.googleapis.com/maps/api/js"></script>

adding a div, where the map is drawn on

<div id="map-canvas"></div>

and a few lines of Javascript

var townCenter = new google.maps.LatLng(50.816, 7.155);
var mapOptions = {
    zoom: 15,
    center: townCenter,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map-canvas'),
                              mapOptions);

Adding a circle looks similar, populate some options and create the appropriate object

var circleOptions = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#880000',
    fillOpacity: 0.05,
    map: map,
    center: townCenter,
    radius: 1500
};

var circle = new google.maps.Circle(circleOptions);

Finally, I added a marker to the center

var marker = new google.maps.Marker({
    position: townCenter,
    map: map,
    title: 'City center'
});

If you want, you can let the user move or modify the circle, by adding these two properties to the circle options

    draggable: true,
    editable: true

So, with a few lines of Javascript, I got an overview, which quarters might be a possibility.

Post a comment

All comments are held for moderation; Markdown and basic HTML formatting accepted. If you want to stay anonymous, leave name, e-mail and website empty.