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!"); } });