JSFiddle - React, Tailwind, and code Playground

by Sachin Patel

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" style="width:400px; height:400px"></div>

JavaScript

/**
 * Draw points and radius (in kilometer) in map.
 */
var points = [
    {
        point: new google.maps.LatLng(23.051117,72.498272),
        //add radius/color attribute to set custom radius/color
        radius: 5,
        //color '#CCCCCC',
    }
];

 // Bounds for North America
 var strictBounds = new google.maps.LatLngBounds(
 new google.maps.LatLng(28.70, -127.50),
 new google.maps.LatLng(48.85, -55.90));


var zoom = 12;
var DEFAULT_COLOR = '#abcdef';
var DEFAULT_RADIUS = 1; //Kilometers
var map;
var elevator;
var mapOptions = {
    zoom: zoom,
    center: points[0].point,
    minZoom: 12,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map($('#map')[0], mapOptions);
for (var i = 0; i < points.length; i++){
    var point = points[i];
    var marker = new google.maps.Marker({
        map: map,
        position: point.point,
        title: i.toString()
    });
    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');
}