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: <b>Rivas-Vaciamadrid</b><br />Entidad toponímica: <b>Municipio</b><br />Término Municipal: <b>Rivas-Vaciamadrid</b><br />Provincia: <b>Madrid (M)</b><br />Latitud: <b>40.3282926119571<br /></b>Longitud: <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>