Aprire InfoWindow da links

**bubbi01** · 14-10-2010, 10:56

Ciao a tutti!
Ho una mappa con dei markers che cliccati aprono la finestrella informazioni.
Vorrei poter far aprire gli stessi markers anche cliccando su dei links nella pagina.
Tipo questo esempio:
http://gmaps-samples-v3.googlecode.c...thsidebar.html
Io, però, utilizzo già uno script per visualizzare i makers sulla mappa che ho modificato in php, e i links di fianco alla mappa prelevano i valori dal db (nome,lat,long,ecc..)
Per favore, potete aiutarmi?

Vi posto il codice.

codice:

<html>
...
<script src="http://maps.google.com/maps/api/js?sensor=false"
        type="text/javascript"></script>
<?php
$dbh = mysql_connect("$dbhostname", "$dbusername", "$dbpassword") or die("Could not connect: " . mysql_error());
mysql_selectdb("$dbname",$dbh) or die ("Non riesco a collegarmi al server : " . mysql_error());
$result = mysql_query("SELECT lat,lng FROM zona WHERE id = '$_GET[zona]'",$dbh);
$row = mysql_fetch_row($result);
?>

<script type="text/javascript">

  function inizialize() {

               //definizione coordinate su cui centrare la mappa
               var lat_centro = "<?echo "$row[0]";?>";
               var long_centro = "<?echo "$row[1]";?>";

              //Opzioni della mappa: zoom, centrata su un punto particolare, modalit&#224; visualizzazione standard ROADMAP
		var Opzioni = {
      				zoom: 9,
		   		center: new google.maps.LatLng(lat_centro, long_centro),
                                mapTypeId: google.maps.MapTypeId.ROADMAP
			      }

		var map = new google.maps.Map(document.getElementById("map_canvas"), Opzioni);

		function infoCallback(infowindow, marker) {
		return function() {
		infowindow.open(map, marker);
		};
		}

             //ciclo FOR per la lettura dei valori dei vettori e relativa visualizzazione su mappa
		<?
		if (isset($_GET[categoria])){
			$where = " AND categoria = '$_GET[categoria]'";
		}
		$result = mysql_query("SELECT * FROM negozi WHERE zona = '$_GET[zona]'$where",$dbh);
		if (!$result)
		{
			$js_mappacitta.= "no results ";
		}
		while($row = mysql_fetch_array($result))
		{
		$address=addslashes ("$row[indirizzo]");
		$htmlentities=htmlentities("$address", ENT_QUOTES);

			$js_mappacitta.= "
				var marker = new google.maps.Marker({
				icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
				position: new google.maps.LatLng($row[lat], $row[lng]), 
				map: map,
				title: '$row[nome_negozio]'
				});
                                var tooltip = '<font class=\"azzurro_bold\">$row[nome_negozio]</font>
'+'<a target=\"_parent\" href=\"index.php?page=negozio&neg_id=$row[id]\">vai alla pagina del negozio »</a>

'+'$htmlentities - $row[localita]

'+'<div align=\"center\">".categ($row[categoria])."</div>';
                                var infowindow = new google.maps.InfoWindow({content: tooltip});
	                        google.maps.event.addListener(marker, 'click', infoCallback(infowindow, marker));
			";
		}
		echo $js_mappacitta;
		?>
    }
</script>
</head>
<body onload="inizialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 280px; height: 330px"></div>
</body>
</html>

**bubbi01** · 14-10-2010, 20:25

Ci sono riuscita!!!

Ho trovato uno script che ho modificato secondo le mie esigenze e sostituito a quello della mia pagina.
Lo script che ho trovato è quì:
http://koti.mbnet.fi/ojalesa/boundsb...er_sidebar.htm

Vi posto il tutto, in caso possa essere utile a qualcun altro.
Ciao a tutti

codice:

<html>
...

<style>
#map{width:300px; height:400px; margin:10px;color: black;}
#sidebar{width:230px; height:400px;float:left; margin:10px;color: black; overflow:hidden; overflow-y: scroll;}
div#box{display: table-cell;width: 500;height: 300px;
    vertical-align: middle;
    background: #D9FFCB;border: 1px solid #88D86B}
.sb_link button {  
  cursor:pointer;
  text-align: left;
  border: 0px none;
  background-color: blue;
  text-decoration: underline;
  color: white;
  font-family: Arial;}
.sb_link button:focus {color:gray;}
.sb_link button:hover {color:gray;}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> 
<?php
$dbh = mysql_connect("$dbhostname", "$dbusername", "$dbpassword") or die("Could not connect: " . mysql_error());
mysql_selectdb("$dbname",$dbh) or die ("Non riesco a collegarmi al server : " . mysql_error());
$result = mysql_query("SELECT lat,lng FROM zona WHERE id = '$_GET[zona]'",$dbh);
$row = mysql_fetch_row($result);
?>
</head>
<body text="Black" bgcolor="blue">
<div id="box">
<div id="sidebar" class="sb_link"></div>
<div id="map"></div> 

<script type="text/javascript">

/**
 * map
 */
var mapOpts = {
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scaleControl: true,
  scrollwheel: false
}
var map = new google.maps.Map(document.getElementById("map"), mapOpts);
//  We set zoom and center later by fitBounds()

/**
 * makeMarker() 
 */
var infoWindow = new google.maps.InfoWindow();
var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];
 
function makeMarker(options){
  var pushPin = new google.maps.Marker({map:map});
  pushPin.setOptions(options);
  google.maps.event.addListener(pushPin, "click", function(){
    infoWindow.setOptions(options);
    infoWindow.open(map, pushPin);
    if(this.sidebarButton)this.sidebarButton.button.focus();
  });
  var idleIcon = pushPin.getIcon();
  if(options.sidebarItem){
    pushPin.sidebarButton = new SidebarItem(pushPin, options);
    pushPin.sidebarButton.addIn("sidebar");
  }
  markerBounds.extend(options.position);
  markerArray.push(pushPin);
  return pushPin;
}

google.maps.event.addListener(map, "click", function(){
  infoWindow.close();
});


/**
 * Creates an sidebar item 
 */
function SidebarItem(marker, opts){
  var tag = opts.sidebarItemType || "button";
  var row = document.createElement(tag);
  row.innerHTML = opts.sidebarItem;
  row.className = opts.sidebarItemClassName || "sidebar_item";  
  row.style.display = "block";
  row.style.width = opts.sidebarItemWidth || "120px";
  row.onclick = function(){
    google.maps.event.trigger(marker, 'click');
  }
  row.onmouseover = function(){
    google.maps.event.trigger(marker, 'mouseover');
  }
  row.onmouseout = function(){
    google.maps.event.trigger(marker, 'mouseout');
  }
  this.button = row;
}
// adds a sidebar item to a <div>
SidebarItem.prototype.addIn = function(block){
  if(block && block.nodeType == 1)this.div = block;
  else
    this.div = document.getElementById(block)
    || document.getElementById("sidebar")
    || document.getElementsByTagName("body")[0];
  this.div.appendChild(this.button);
}
// deletes a sidebar item
SidebarItem.prototype.remove = function(){
  if(!this.div) return false;
  this.div.removeChild(this.button);
  return true;
}
  var image = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
      new google.maps.Size(32, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
    var shadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',

      new google.maps.Size(37, 44),
      new google.maps.Point(0,0),
      new google.maps.Point(-6, 35));

<?
if (isset($_GET[categoria])){
	$where = " AND categoria = '$_GET[categoria]'";
}
$result = mysql_query("SELECT * FROM negozi WHERE zona = '$_GET[zona]'$where",$dbh);
if (!$result)
{
	$js_mappacitta.= "no results ";
}
while($row = mysql_fetch_array($result))
{
$address=addslashes ("$row[indirizzo]");
$htmlentities=htmlentities("$address", ENT_QUOTES);
	$js_mappacitta.= "

/**
 * markers and info window contents
 */
makeMarker({
  position: new google.maps.LatLng($row[lat], $row[lng]),
  icon:image,shadow:shadow,
  title: \"$row[nome_negozio]\",
  sidebarItem: \"$row[nome_negozio]\",
  content: '<font class=\"azzurro_bold\">$row[nome_negozio]</font>
'+
        '<a class=\"azzurro_small_sotto\" target=\"_parent\" href=\"index.php?page=negozio&neg_id=$row[id]\">vai alla pagina del negozio &#187;</a>

'+
        '<font class=\"testo_blu\">$htmlentities - $row[localita]</font>

'+
        '<div align=\"center\"><font class=\"azzurro_smallcaps\">".categ($row[categoria])."</font></div>'
}); ";
}
echo $js_mappacitta;
?>

/**
 *   fit viewport to markers
 */
map.fitBounds(markerBounds);

</script>


</div>
</body>
</html>

Discussione: Aprire InfoWindow da links

Strumenti discussione

Ricerca discussione

Visualizza

Aprire InfoWindow da links

Permessi di invio