Mapas

Vamos a tabajar con la librería de javascript, gmaps.js: http://hpneo.github.io/gmaps/

Documentación: http://hpneo.github.io/gmaps/documentation.html

Download: https://raw.github.com/HPNeo/gmaps/master/gmaps.js

Ejemplos: http://hpneo.github.io/gmaps/examples.html

Prettify: https://code.google.com/p/google-code-prettify/

BASICA: dar las coordenada y dibujar el mapa centrado en esa posición, por defecto el zoom es 15:

new GMaps({    
	div: '#map', 
    zoom: 16,
	lat: 40.408823,
	lng: -3.648802  
});

EVENTOS: Podemos controlar los eventos, (lista de eventos: https://developers.google.com/maps/documentation/javascript/reference?hl=en&csw=1#Map )

var map;
      $(document).ready(function(){
	prettyPrint();
	map = new GMaps({
	div: '#map',
		zoom: 16,
		lat: 40.423100,
		lng: -3.66980,
click: function(e){
	alert('click');
},
dragend: function(e){
	alert('dragend');
}
});
});

MARCAS: Podemos dibujar marcas y asociar información.

map.addMarker({    
lat: -12.043333,    
lng: -77.028333,    
title: 'Lima',    
click: function(e) {      
	alert('You clicked in this marker');    
}  
});
infoWindow: {    
	content: '<p>HTML Content</p>'  
}

GEOLOCALIZACIÓN: la geolocalización soporta 4 funciones_

• success: cuando se tiene éxito
• error: no se ha podido realizar la geolocalización
• not_supported: cuando el browser no sporta geolocalización
• always: se ejecuta siempre en último lugar.

GMaps.geolocate({    
success: function(position) {      
map.setCenter(position.coords.latitude, position.coords.longitude);    
},    
error: function(error) {      
alert('Geolocation failed: '+error.message);    
},    not_supported: function() {      
alert("Your browser does not support geolocation");    
},    always: function() {      
alert("Done!");    
}  
});