Maps de google con marcadores personalizados y ventana de información

Mi pregunta es muy sencilla (para quien domine Javascripts, claro).

Quisiera implementar un mapa de google en mi página web con marcadores personalizados y con ventana de información (infowindows).

Los marcadores lo he conseguido, pero lo que no consigo es la ventana de información, más que nada por no saber implementar el código.

Te paso el código por si me pudieras hecar una mano:

<body>
<div id="map-canvas" style="width: 550px; height: 350px;"></div>
<script>
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(39.91, -3.68)
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
setMarkers(map, locations);
}
var locations= [
['<p align=left>Toponimia:&nbsp;<b>Rivas-Vaciamadrid</b><br />Entidad toponímica:&nbsp;<b>Municipio</b><br />Término Municipal:&nbsp;<b>Rivas-Vaciamadrid</b><br />Provincia:&nbsp;<b>Madrid&nbsp;(M)</b><br />Latitud:&nbsp;<b>40.3282926119571<br /></b>Longitud:&nbsp;<b>-3.51557586588778<b>', 40.3820619850658, -3.51668060704694],
['Coogee Beach', 40.3820484628354, -3.52169896994236],
['Cronulla Beach', 40.3282926119571, -3.51557586588778],
['Manly Beach', 40.3282926119571, -3.51557586588778],
['Maroubra Beach', 40.1577971875002, -3.06774944684691]
];
var infowindow = new google.maps.InfoWindow();
function setMarkers(map, locations) {
var image = {
Url: 'images/iconos/lagrima-rojo.png',
size: new google.maps.Size(12, 20),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 0)
};
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations;
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>

Respuesta
2

Modifiqué un poco el código para que funcione, ahí va.

<script>
 function initialize() {
 var mapOptions = {
 zoom: 5,
 center: new google.maps.LatLng(39.91, -3.68)
 }
 var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
 setMarkers(map, locations);
 }
//tu generaste las ubicaciones en este array
 var locations= [
 ['<p align=left>Toponimia:&nbsp;<b>Rivas-Vaciamadrid</b><br />Entidad toponímica:&nbsp;<b>Municipio</b><br />Término Municipal:&nbsp;<b>Rivas-Vaciamadrid</b><br />Provincia:&nbsp;<b>Madrid&nbsp;(M)</b><br />Latitud:&nbsp;<b>40.3282926119571<br /></b>Longitud:&nbsp;<b>-3.51557586588778<b>', 40.3820619850658, -3.51668060704694],
 ['Coogee Beach', 40.3820484628354, -3.52169896994236],
 ['Cronulla Beach', 40.3282926119571, -3.51557586588778],
 ['Manly Beach', 40.3282926119571, -3.51557586588778],
 ['Maroubra Beach', 40.1577971875002, -3.06774944684691]
 ];
//genero un infowindow cualquiera.
 var infowindow = new google.maps.InfoWindow({
//le asigno su contenido
 content: "Hola como va todo"
 });
 function setMarkers(map, locations) {
 var shape = {
 coord: [1, 1, 1, 20, 18, 20, 18 , 1],
 type: 'poly'
 };
 for (var i = 0; i < locations.length; i++) {
 //tienes que recorrer el array desde su indice hasta sus propiedades
//fijate en la diferencia con el código que hiciste, donde en vez de recorrer
//el array lo asignabas a una variable
 var myLatLng = new google.maps.LatLng(locations[1], locations[2]);
 var marker = new google.maps.Marker({
 position: myLatLng,
 map: map,
 shape: shape,
//el indice sub cero será el titulo de cada ubicacion
//este dato lo verificas pasando sobre cada posicion en el mapa
 title: locations[0],
 zIndex: locations[3]
 });
//cada vez que hagas click en cada marcador se abrirá el infowindow que hice antes
//ya está creado y en este caso siempre será igual
 google.maps.event.addListener(marker, 'click', function() {
 infowindow.open(map,marker);
 });
}
}
 google.maps.event.addDomListener(window, 'load', initialize);
</script>

Espero que sea de ayuda para que puedas trabajar, si tienes más dudas estoy atento a tus consultas.

Muchas gracias por la rapidez en contestar. Quizá yo me expresé mal antes.

Cada marcador tiene que tener una información propia que en su momento sacaré de una tabla con php y MySQl.

Muy claro tu ejemplo, te estoy muy agradecido de todas formas

¿Sigues con dudas al respecto?, ¿Es necesario seguir trabajando en la solución o es posible cerrar la pregunta?

No tengo ninguna duda al respecto, lo único es que la solución que me das no me sirve de nada.

Yo quería que cada marcador lleve su información correspondiente, individual y única.

Tú me ofreces la misma información para todos los marcadores, eh hay la diferencia.

Podríamos extender el ejemplo simulando de que ya has tomado los datos desde tu base de datos con ajax y añadiendo esa información al array de marcadores.

A lo que el ejemplo quedaría de esta manera

<script>
 function initialize() {
 var mapOptions = {
 zoom: 5,
 center: new google.maps.LatLng(39.91, -3.68)
 }
 var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
 setMarkers(map, locations);
 }
 var locations= [
 ['<p align=left>Toponimia:&nbsp;<b>Rivas-Vaciamadrid</b><br />Entidad toponímica:&nbsp;<b>Municipio</b><br />Término Municipal:&nbsp;<b>Rivas-Vaciamadrid</b><br />Provincia:&nbsp;<b>Madrid&nbsp;(M)</b><br />Latitud:&nbsp;<b>40.3282926119571<br /></b>Longitud:&nbsp;<b>-3.51557586588778<b>', 40.3820619850658, -3.51668060704694],
 ['Coogee Beach', 40.3820484628354, -3.52169896994236],
 ['Cronulla Beach', 40.3282926119571, -3.51557586588778],
 ['Manly Beach', 40.3282926119571, -3.51557586588778],
 ['Maroubra Beach', 40.1577971875002, -3.06774944684691]
 ];
//arreglo con txt de infowindow
 var txtMarcadores =["uno", "dos", "tres", "cuatro", "cinco"];
 function setMarkers(map, locations) {
 var shape = {
 coord: [1, 1, 1, 20, 18, 20, 18 , 1],
 type: 'poly'
 };
 for (var i = 0; i < locations.length; i++) {
 //tienes que recorrer el array desde su indice hasta sus propiedades
 var myLatLng = new google.maps.LatLng(locations[1], locations[2]);
 var marker = new google.maps.Marker({
 position: myLatLng,
 map: map,
 shape: shape,
 title: locations[0],
 zIndex: locations[3]
 });
 //genero un infowindow y le asigno el valor del marcador desde el array
 var infowindow = new google.maps.InfoWindow({
 content: txtMarcadores
 });
 //se le asigna al marcador
 google.maps.event.addListener(marker, 'click', (function(marker, i) {
 return function() {
 infowindow.setContent(txtMarcadores);
 infowindow.open(map, marker);
 }
 })(marker, i));
}
}
 google.maps.event.addDomListener(window, 'load', initialize);
</script>

Espero que esta solución se acomode más a tus necesidades.

Te agradezco tu interés y prontitud en responder.

Creo que ya lo arregle por cuenta propia (soy autodidacta en esto de javascript, php, etc...) por eso te agradecería una mejora en el código que he creado, que es este:

Finalidad del mismo: Numerosos marcadores personalizados y cada uno con una ventana distinta de información.

CÓDIGO:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Google Maps Múltiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 300px;"></div>
<script type="text/javascript">
var locations = [
['<table border=2 cellpadding=3 cellspacing=3 bordercolor=#111111 Width=500><tr><td align=left><b>Geranium antisanae </b> <b>-</b> <br>ECUADOR.&nbsp;Cotopaxi:&nbsp;ladera N del volcán Cotopaxi, por. Ingapirca,&nbsp;0º35\'ES,&nbsp;78º26\'W,&nbsp;3750&nbsp;m,&nbsp;1-VIII-2006,&nbsp;<i>C. Aedo</i>&nbsp;<i>13342</i>&nbsp;(MA)</td></tr>', -0.583333333333333, -78.4333333333333],
['<table border=2 cellpadding=3 cellspacing=3 bordercolor=#111111 Width=500><tr><td align=left><b>Geranium antisanae </b> <b>-</b> <br>ECUADOR.&nbsp;Napo:&nbsp;Píntag, ladera SW del volcán Antisana,&nbsp;0º29\'ES,&nbsp;78º12\'W,&nbsp;4200&nbsp;m,&nbsp;3-vi -2006,&nbsp;<i>C. Aedo</i>&nbsp;<i>13350</i>&nbsp;(MA)</td></tr>', -0.483333333333333, -78.2],
['Cronulla Beach', -34.028249, 151.157507],
['Manly Beach', -33.80010128657071, 151.28747820854187],
['Maroubra Beach', -33.950198, 151.259302]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 1,
center: new google.maps.LatLng(20.40, 20.50),
mapTypeId: google.maps.MapTypeId.PHYSICAL
});
var image = new google.maps.MarkerImage(
''
, new google.maps.Size(12,20)
, new google.maps.Point(0,0)
, new google.maps.Point(0,0)
);
var shadow = new google.maps.MarkerImage(
''
, new google.maps.Size(22,20)
, new google.maps.Point(0,0)
, new google.maps.Point(0,0)
);
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[1], locations[2]),
map: map,
icon: image,
shadow: shadow
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>

Muchas gracias por tu preocupación. Espero noticias.

El código que me entregas está bien, funciona. ¿En qué desearías optimizarlo?

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas