Simple Polygon
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyC4AaPTKPB6ILjS2imklaium6hO2EMAc9E"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 col-sm-12">
<input type="button" id="UbicacionPersonal" value="Mi ubicación">
</div>
<div class="col-md-12 col-sm-12" id="Mapa"></div>
CSS
#Mapa {
height:400px;
width:100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
JavaScript
$(document).ready(function () {
function localizacion(posicion) {
console.log(posicion.coords);
var latitud = 39.579745;
var longitud = 2.654018;
//Generamos el mapa que muestre y cual será el punto central
var map = new google.maps.Map(document.getElementById('Mapa'), {
center: {
lat: latitud,
lng: longitud
},
zoom: 14
});
//Generamos el marcadores para señalar una posición
var markerMiPosicion = new google.maps.Marker({
position: {
lat: latitud,
lng: longitud
},
title: "Ubicación estudiante"
});
$('#UbicacionPersonal').click(function () {
latitudReal = posicion.coords.latitude;
longitudReal = posicion.coords.longitude;
var markerPosicionReal = new google.maps.Marker({
position: {
lat: latitudReal,
lng: longitudReal
},
title: "Mi actual ubicación"
});
markerPosicionReal.setMap(map);
map.setCenter(markerPosicionReal.getPosition());
});
// Mostramos los marcadores en el mapa.
markerMiPosicion.setMap(map);
}
// En caso de no poder geolocalizar hay que tener un mensaje de error (o acción)
function error() {
alert('No se puede obtener tu ubicación actual')
// un error a valorar es que el usuario no permite la geoloc, code:1
}
// Ahora empleamos todo lo declarado anteriormente.
// Comprobamos si el navegador soporta la geolocalización
if (navigator.geolocation) {
//Caso SI soporta geolocalización. Ejecuto la API y llamo a mis funciones.
...