Hola Visitante

Autor Tema: Jugando con Google Maps y JS (I)  (Leído 471 veces)

Administación BDL

  • Administrator
  • *****
  • Mensajes: 66
    • Ver Perfil
Jugando con Google Maps y JS (I)
« en: Febrero 07, 2014, 01:01:38 pm »

Por temas de trabajo, últimamente he estado metiéndole mano, a Google Maps y a su API 3.9 hecha en Javascript, la verdad es que con algo de maña, cosa  que algunos andamos escasos, se pueden hacer virguerías.


Yo únicamente he tenido que incrustar una imagen dentro del mapa, al principio pensé en usar Tiles, pero si os soy sincero,.. eso escapa a la complejidad de lo que me proponía a hacer.



Un Tile o azulejo, es cada una de los cuadrados en que está dividido el mapa. Cada vez que se hace zoom, estos Tiles cambian sus coordenadas, por lo tanto si no eres muy ágil de pensamiento puedes pensar que es un coñazo,… Lo es..


Para comenzar, podemos descargarnos el Hello World que hay en la web de Google para empezar a usar google Maps, es una web html muy sencilla que solo dispone de un “DIV”:


 <div id="map-canvas"></div>

También dispone de una sentencia para que al cargar la web llame al la función inicialize() .Y esto es el script que se encarga de hacer que el mapa se visualice:


<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

</script>

Es aquí donde empieza lo divertido, si sois vagos como yo, para no liarla con las coordenadas y no perder demasiado tiempo (yo al principio no caí) os programaréis un event listener para que escuche los cliks del mouse de la siguiente manera:


google.maps.event.addListener(map,'click',function(event){

var lat = event.latLng.lat();
var lng = event.latLng.lng();

alert(lat+','+lng);

});

Con este evento, saldrá por pantalla un alert dándonos las coordenadas del punto en el que hacemos click, quizá en este momento no le dais demasiad a importancia pero os aseguro que yo perdí mucho tiempo poniendo coordenadas a ojo.


El siguiente paso es insertar una imagen en el mapa, es bastante sencillo, únicamente hay que tener en cuenta como  funcionan las coordenadas al hacer un overlay con una imagen en el mapa.


Para hacer el overlay hay que pasar dos coordenadas, X1 y X2, la primera corresponde a la esquina inferior izquierda mientras que X2 corresponde a la esquina superior derecha, es decir hace una diagonal:



Además de las coordenadas de la imagen como es de suponer, se necesita la ruta hacia la imagen.


		var x1=new google.maps.LatLng(55.522975,4.738397);
var x2=new google.maps.LatLng(55.524965,4.741198);
var imgPath="../PSD/foo.png";

Una vez tenemos los puntos en los que irá la imagen, bastará con editar la función inicialice añadiendo al final estas lineas:


		var imageBounds = new google.maps.LatLngBounds(x1,x2);
var imgmap = new google.maps.GroundOverlay(imgPath,imageBounds);
imgmap.setMap(map);

Con esto debería bastar para poder cargar un mapa con una imagen donde queramos.


Si queremos añadir un evento de mouse pero esta vez encima de la imagen, se podría hacer como en el caso del evento en el que mostraba las coordenadas por pantalla, pero esta vez en lugar de pasarle map, le pasaríamos imgmap.