Hola Amig@s del foro, necesito una vez más de su ayuda... en el siguiente ejemplo que les muestro a continuación se muestran 3 infowindows de un ejemplo de google Maps. Lo que quiero hacer es que dentro de un While se aumente automáticamente marcador_1, marcador_2, marcador3_... etc... Marcadores que vienen de una Base de datos MySql.
Este es el código.
Código HTML:
Ver original<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- A continuación incluyo la llamada a la API Google Maps-->
<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> <script type="text/javascript"> var map = null;
var infoWindow = null;
//Función que cierra el infowindows
function closeInfoWindow() {
infoWindow.close();
}//Fin función closeInfoWindow
//Función que muestra información en el InfoWindows
function openInfoWindow(marker, content) {
var markerLatLng = marker.getPosition();
infoWindow.setContent([
'
<div id="VentanaInfo">',
'Las coordenadas del
<b>',
content,
markerLatLng.lat(),
', ',
markerLatLng.lng(),
].join(''));
infoWindow.open(map, marker);
}//Fin función openInfoWindow
function initialize() {
var myLatlng = new google.maps.LatLng(-43.117027, -73.619099);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//var map = new google.maps.Map(document.getElementById("map"), myOptions);
map = new google.maps.Map($("#map").get(0), myOptions);
infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function(){
closeInfoWindow();
});
//////////////////////////////////
// COMEINZO DE LOS MARCADORES //
//////////////////////////////////
var marcador_1 = new google.maps.Marker({
position: myLatlng,
draggable: false,
map: map
});
google.maps.event.addListener(marcador_1, 'click', function(){
openInfoWindow(marcador_1, "Marcador");
}); // Fin primer marcador
var marcador_2 = new google.maps.Marker({
position: new google.maps.LatLng(-43.118027, -73.619099),
draggable: false,
map: map
});
google.maps.event.addListener(marcador_2, 'click', function() {
openInfoWindow(marcador_2, "Marcador");
});
// Fin segundo marcador
var marcador_3 = new google.maps.Marker({
position: new google.maps.LatLng(-43.117027, -73.617099),
draggable: false,
map: map
});
google.maps.event.addListener(marcador_3, 'click', function() {
openInfoWindow(marcador_3, "Marcador 3");
}); // Fin Tercer marcador
//////////////////////////
// FIN DE MARCADORES //
//////////////////////////
}//Cierre de la función initialize()
$(document).ready(function() {
initialize();
});
#VentanaInfo {
text-align:center;
width: 300;
height:100;
background-color:#E8F8FD;
border-radius: 15px;
}
<body onLoad="initialize()">
<link href="../css/estilo.css" rel="stylesheet" type="text/css" /> <center><h2>Ejemplo de google maps un só InfoWindows
</h2></center>
Porfavor les agradecería si me pueden orientar con algún ejemplo de cómo hacer esto, estoy bastante tiempo haciendo esto, pero no he podido.
Gracias...
Swab