Como desplegar abiertas todas las infowindow al cargar mapa de Google Maps
En el siguiente ejemplo vamos a agregar el mapa de Google Maps a una página web y además vamos a ver como desplegar inicialmente abiertas todas las infowindows o ventanas de información personalizada de dicho mapa con información, y que también podrá ser vuelta a deplegar dando clic en el marcador.
En el ejemplo los puntos estan definidos fijamente pero fácilmente pueden crear una llamada a una base de datos de donde obtener las coordenadas y la información para el marcador y construir el array de datos que necesita Google Maps.
En este ejemplo estamos utilizando Google Maps API versión 3.
Este ejemplo es solo una pequeña variante del post: Como desplegar marcadores al cargar mapa de Google Maps. Y que ahora hacemos la carga de manera asincrónica de la API de Google Maps.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!DOCTYPE html> <html> <head> <title>Como mostrar todas las infowindow al cargar mapa de Google Maps</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #map{ width: 800px; height: 500px; } </style> </head> <body> <h1>Como mostrar todas las infowindow al cargar mapa de Google Maps</h1> <div id="map"></div><!-- mapa --> <script> //puntos a ser marcados en el mapa var puntos = [ ['Santa Ana', 13.9837933, -89.5628214, 'info adicional 1'], ['San Salvador', 13.6914782, -89.2146939, 'info adicional 2'], ['San Miguel', 13.531445, -88.2719195, 'info adicional 3'] ]; //funcion para posicionar los marcadores en el mapa function setMarkers(map, puntos) { //recorremos cada uno de los puntos for (var i = 0; i < puntos.length; i++) { var place = puntos[i]; //propiedades del marcador var marker = new google.maps.Marker({ position: new google.maps.LatLng(place[1], place[2]), //posicion map: map, animation: google.maps.Animation.DROP, //animacion nombre: place[0], //personalizado - nombre del punto info: place[3] //personalizado - informacion adicional }); //limpiamos el contenido del globo de informacion var infowindow = new google.maps.InfoWindow({ content: '' }); //contenido de la infowindow var content='<div id="content" style="width: auto; height: 60px;">' + marker.nombre + '<hr/>' + marker.info + '</div>'; /*medoto para crear las infowindow independiente una de otra y * desplegarlas todas a la vez*/ google.maps.event.addListener(marker, 'click', function(marker, content, infowindow) { return function(){ infowindow.setContent(content); //asignar el contenido al globo infowindow.open(map, marker); //mostrarlo }; }(marker,content,infowindow)); infowindow.open(map, marker); /*metodo para desplegar la infowindow cuando se haga clic en el marcador*/ google.maps.event.addListener(marker, 'click', function(marker, content, infowindow) { infowindow.setContent(content); //asignar el contenido al globo infowindow.open(map, marker); //mostrarlo }(marker, content, infowindow)); } } //funcion para inicializar el mapa function initialize() { //iniciamos un nuevo mapa el div 'map' y le asignamos propiedades var map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(13.802994, -88.9053364), //coordenada inicial zoom: 8, //nivel de zoom mapTypeId: google.maps.MapTypeId.ROADMAP //tipo de mapa }); //llamar a la funcion que escribe los marcadores setMarkers(map, puntos); } </script> <script src="https://maps.googleapis.com/maps/api/js?callback=initialize" async defer></script> </body> </html> |
Resultado:
DEMO
Entradas relacionadas
Sobre el Autor
hug0
Programador web, intento de runner, aficionado a Formula 1 y MotoGP. Habilidad especial: Comer 12 porciones de pizza con todo y orilla