<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps</title>
<style>
#map_canvas{
height:800px;
width:800px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
//creo variables para el marcador,circulo y el mapa
var marker, myCircle, map;
//funcion de inicio el mapa
function initialize() {
var myLatlng = new google.maps.LatLng(19.543937, -99.190802);
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canva s'),
mapOptions);
google.maps.event.addListener(map, 'click', function (event) {
addMarker(event.latLng);
});
}
//funcion para agregar el marcador ylimpiar el circulo y marcador anterior
function addMarker(latLng) {
if (marker != null) {
marker.setMap(null);
myCircle.setMap(null);
}
marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true
});
// circulo y sus opciones
var circleOptions = {
strokeColor: '#00786c',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00786c',
fillOpacity: 0.35,
map: map,
center: latLng,
radius: 3000
};
//le doy ami variable del circulo las opciones que debe tener el circlo
myCircle = new google.maps.Circle(circleOptions);
//le agrego el evento marcador la funcion del dragend y asi mismo le agrego la position al centro del circulo
google.maps.event.addListener(marker, 'dragend', function () {
myCircle.setCenter(this.position);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>