Amigos,
tiempo que no pasaba por este querido foro, necesito la ayuda de alguno que conozca de Gmap api V3.
el problema es el siguiente
1.-pretendo desplegar un mapa con una serie de marcadores de posicion en el. (ya esta listo)
2.- ademas necesito crear otro div fuera del mapa, que tenga un listado con los "titulos" de cada marcador.
la idea es que al hacer click a algun elemento de la lista el mapa "actual" se centre sobre la posicion de dicho marcador.
he probado con la funcion setcenter(), pero no lo he podido lograr
adjunto el codigo sobre el cual trabajo
mapa.php
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style>
#map {
position:absolute;
width:40%;
height:50%;
z-index:1;
left: 30%;
top: 102px;
}
#apDiv1 {
position:absolute;
width:200px;
height:45px;
z-index:2;
left: 83px;
top: 366px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script>
<script type="text/javascript" src="js/map.js"></script>
<script language="javascript">
function MAPAX(coordenadas)
{
//alert(coordenadas);
/* var options = {
zoom: 9
, center: new google.maps.LatLng(-36.11,-70.66)
, mapTypeId: google.maps.MapTypeId.ROADMAP
} ;*/
map=google.maps.Map;
//alert(map);
map.setcenter(coordenadas);
}
</script>
</head>
<body>
<div id="map"></div>
<div id="apDiv1"><a href="#" onclick="MAPAX('-36.11,-70.66')">click</a></div>
</body>
</html>
map.js
Código PHP:
// JavaScript Document
window.onload = function(){
var popup;
var n=1;
var options = {
zoom: 3
, center: new google.maps.LatLng(-35.429680,-71.661945)
, mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
var limits = new google.maps.LatLngBounds();
var place = new Array();
place['punto 1'] = new google.maps.LatLng(-35.52,-71.66);
place['punto 2'] = new google.maps.LatLng(-35.42,-72.66);
place['punto 3'] = new google.maps.LatLng(-36.429680,-70.661945);
place['punto 4'] = new google.maps.LatLng(-34.429680,-71.68);
place['punto 5'] = new google.maps.LatLng(-33.429680,-72.661945);
place['punto 6'] = new google.maps.LatLng(-35.59,-72.61);
place['punto 7'] = new google.maps.LatLng(-36.97,-75.55);
place['punto 8'] = new google.maps.LatLng(-36.01,-72.11);
place['punto 9'] = new google.maps.LatLng(-36.11,-70.66);
for(var i in place)
{
html='<b>:D</b>';
var marker = new google.maps.Marker({
position: place[i]
, map: map
, title: i + ':D'
, icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/red/marker' + n++ + '.png'
});
google.maps.event.addListener(marker, 'click', function(){
if(!popup){
popup = new google.maps.InfoWindow();
}
var note = html;
popup.setContent(note);
popup.open(map, this);
})
limits.extend(place[i]);
}
map.fitBounds(limits);
};
agradeceria cualquier sugerencia...muchas gracias
