Google maps

Google maps / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Google maps

El mejor modo de conocer y trabajar con la api de Google maps, es con un sencillo ejemplo con dos marcadores.

        var marker = null;
        function initialize() {
          var marcadores = [
            ["Ttitle lorem ipsum dolor amet", 39.4729869, -0.3723331999999573],
            ["Subtitle lorem ipsum dolor amet", 39.4816893, -0.39325880000001234],
          ];
          var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 13,
            center: new google.maps.LatLng(39.4846893, -0.3723331999999573),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
          });
          var infowindow = new google.maps.InfoWindow();
          var marker, i;
          for (i = 0; i < marcadores.length; i++) { 
            marker = new google.maps.Marker({
              position: new google.maps.LatLng(marcadores[i][1], marcadores[i][2]),
              map: map,
              animation: google.maps.Animation.DROP
            });
            google.maps.event.addListener(marker, "click", (function(marker, i) { 
              return function() { 
                infowindow.setContent(marcadores[i][0]); 
                infowindow.open(map, marker); 
                //animación, en cabecera script declara la variable marker = null
                if (marker.getAnimation() != null) { 
                  marker.setAnimation(null); 
                } else { 
                  marker.setAnimation(google.maps.Animation.BOUNCE); 
                } 
              } 
            })(marker, i)); 
            marker.setIcon("img/marker.png"); 
          } 
        } 
        google.maps.event.addDomListener(window, "load", initialize); 

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>

Del cual destacan las siguientes particularidades

	var marcadores = [
        ["Ttitle lorem ipsum dolor amet", 39.4729869, -0.3723331999999573],
        ["Subtitle lorem ipsum dolor amet", 39.4816893, -0.39325880000001234],
    ];

Podemos incluir tantos marcadores personalizados como deseemos, texto, imágenes, links, etc. Junto con las coordenadas.

	var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 13,
        center: new google.maps.LatLng(39.4846893, -0.3723331999999573),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false
	});

Center:

Las coordenada que indiquemos aquí, determinaran el centro del mapa.

scrollwheel: false

Evitaremos el efecto scroll al pasar por encima del mapa.

animation: google.maps.Animation.DROP

Animación del marcador al cargarse la página.

marker.setAnimation(google.maps.Animation.BOUNCE);

Podemos añadir animaciones a la hora de mostrar los marcadores, en el momento de hacer click sobre uno de ellos.

marker.setIcon('img/marker.png');

Podemos añadir nuestros propios marcadores personalizados.

Un ejemplo de css:

Google maps tiene sus propios estilos, y numerosas opciones que se pueden añadir desde el Javascript, pero es fundamental añadir una altura.

	#map {
	    height: 600px;
	    margin: 3% auto;
	    border: 2px solid #0066cc;
	}

Tres ejemplos realizados por mí:

Landing Bodegas Ramón Bilbao Con siete marcadores.

Bootstrap template Con dos marcadores.

Pymeuropa Con un marcador.

Links de interés

Primeros pasos con Google maps

Como obtener coordenadas en Google maps

 

Mariano J.

Escribe un comentario

Tu email no se hará visible