Maps API v3 Add circle to map

http://stackoverflow.com/questions/25192737

by Alex Azuero

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas" />

CSS

#map-canvas {
    height:400px;
    width:600px;
}

JavaScript

var geocoder;
var map;
var marker;
var infowindow = new google.maps.InfoWindow();

function initializeMap() {

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            revereGeoCode(position.coords.latitude, position.coords.longitude);
        });
    } else {
        console.log("er")
        // make sure to handle the failure
    }

    var mapOptions = {
        zoom: 18,
        center: new google.maps.LatLng(40.730885, -73.997383),
        mapTypeId: 'roadmap'
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function revereGeoCode(lat, lng) {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({
        'latLng': latlng
    }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                // place your marker coding
                map.setZoom(20);

                // Define circle options
                var circleOptions = {
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    map: map,
                    center: latlng,
                    radius: 10
                };
                
                // Add the circle to the map.
                var markerCircle = new google.maps.Circle(circleOptions);

                marker = new google.maps.Marker({
                    position: latlng,
                    map: map

                });

                infowindow.setContent(results[0].formatted_address);
                infowindow.open(map, marker);
            } else {
                alert('No results found');
            }
        } else {
            alert('Geocoder failed due to: ' + status);
        }
    });
}

initializeMap();