Google Map Circle by Kilometers

by oterox

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map"></div>

CSS

#map{
    width: 800px;
    height: 500px;
}

JavaScript

var point = new google.maps.LatLng(37.18817, -3.60667);
var zoom = 13;
var DEFAULT_COLOR = '#333333';
var DEFAULT_RADIUS = 2; //Kilometers
var map;
var elevator;
var mapOptions = {
    zoom: zoom,
    center: point,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map($('#map')[0], mapOptions);
    
    var marker = new google.maps.Marker({
        map: map,
        position: point,
       
    });
    var circle = new google.maps.Circle({
        map: map,
        radius: (point.radius !== undefined ? point.radius : DEFAULT_RADIUS) * 1000,    // metres
        fillColor: (point.color !== undefined ? point.color : DEFAULT_COLOR)
    });
    circle.bindTo('center', marker, 'position');