Définition du titre du marqueur dans l'API Google Maps 3 en utilisant jQuery

Question

J'ai quelques problèmes avec Google Maps et jQuery. Je me demandais si quelqu'un peut aider avec le plus petit des deux problèmes et j'espère qu'il va m'aider à réparer le plus gros.

J'utilise le code ci-dessous pour remplir une carte Google, fondamentalement, il utilise le HTML généré pour remplir les cartes sous la forme:

<div class="item mapSearch" id="map52.48228_-1.9026:800"> 
     <div class="box-prise"><p>(0.62km away)</p><div class="btn-book-now"> 
       <a href="/venue/800.htm">BOOK NOW</a> 

      </div> 
     </div><img src="http://media.toptable.com/images/thumb/13152.jpg" alt="Metro Bar and Grill" width="60" height="60" /> 
     <div class="info"> 
     <h2><a href="/venue/800.htm">Metro Bar and Grill</a></h2> 
     <p class="address">73 Cornwall Street, Birmingham, B3 2DF</p><strong class="proposal">2 courses £14.50</strong> 
      <dl> 
      <dt>Diner Rating: </dt> 

      <dd>7.8</dd> 
      </dl></div></div> 
     <div class="item mapSearch" id="map52.4754_-1.8999:3195"> 
     <div class="box-prise"><p>(0.97km away)</p><div class="btn-book-now"> 
       <a href="/venue/3195.htm">BOOK NOW</a> 
      </div> 
     </div><img src="http://media.toptable.com/images/thumb/34998.jpg" alt="Filini Restaurant - Birmingham" width="60" height="60" /> 

     <div class="info"> 
     <h2><a href="/venue/3195.htm">Filini Restaurant - Birmingham</a></h2> 
     <p class="address">Radisson Blu Hotel, 12 Holloway Circus, Queensway, Birmingham, B1 1BT</p><strong class="proposal">2 for 1: main courses </strong> 
      <dl> 
      <dt>Diner Rating: </dt> 
      <dd>7.8</dd> 

      </dl></div></div> 
     <div class="item mapSearch" id="map52.47775_-1.90619:10657"> 
     <div class="box-prise"><p>(1.05km away)</p><div class="btn-book-now"> 
       <a href="/venue/10657.htm">BOOK NOW</a> 
      </div> 
     </div><img src="http://media.toptable.com/images/thumb/34963.jpg" alt="B1 " width="60" height="60" /> 
     <div class="info"> 
     <h2><a href="/venue/10657.htm">B1 </a></h2> 

     <p class="address">Central Square , Birmingham, B1 1HH</p><strong class="proposal">25% off food</strong> 
      <dl> 
      <dt>Diner Rating: </dt> 
      <dd>7.9</dd> 
      </dl></div></div> 

Les boucles JavaScript que tous les divs avec classe MapSearch et utilise pour marqueurs de tracé à l'aide de l'ID div pour obtenir le latitude/longitude et l'ID du lieu:

var locations = $(".mapSearch"); 
      for (var i=0;i<locations.length;i++) { 
       var id = locations[i].id; 
       if (id) { 
        var jsLonLat = id.substring(3).split(":")[0]; 
        var jsId = id.substring(3).split(":")[1]; 
        var jsLat = jsLonLat.split("_")[0]; 
        var jsLon = jsLonLat.split("_")[1]; 
        var jsName = $("h2").text(); 
        var jsAddress = $("p.address").text(); 
        var latlng = new google.maps.LatLng(jsLat,jsLon); 
        var marker = new google.maps.Marker({ 
         position: latlng, 
         map:map, 
         icon: greenRestaurantImage, 
         title: jsName 
        }); 

        google.maps.event.addListener(marker, 'click', function() { 
        //Check to see if info window already exists 
         if (!infowindow) { 
          //if doesn't exist then create a empty InfoWindow object 
          infowindow = new google.maps.InfoWindow(); 
         } 
        //Set the content of InfoWindow 
        infowindow.setContent(jsAddress); 
        //Tie the InfoWindow to the market 
        infowindow.open(map,marker); 
        }); 

        bounds.extend(latlng); 
        map.fitBounds(bounds); 
       } 
      } 

les marqueurs tout terrain OK sur la carte, mais j'ai probs avec le bit InfoWindow. Je souhaite afficher des informations sur chaque site lorsque je clique dessus, mais en utilisant mon code ci-dessus, je mets toutes les informations dans une seule case lorsque je clique dessus, pas individuellement. En espérant que c'est une solution simple! En espérant une fois que j'aurai résolu ce problème, je pourrai trouver un moyen d'afficher la fenêtre d'information si je passe la souris sur la div dans le code HTML.

Answer 1

Hé, qu'est-ce que vous obtenez lorsque vous faites:

alert($("h2").text()) 
// and 
alert($("p.address").text()) 

En ce qui concerne ma connaissance jQuery est concerné, ce que vous voyez est juste; $("h2").text() va concaténer le texte interne de tous les H2s en une chaîne et le renvoyer. Vous feriez mieux d'essayer quelque chose le long de ces lignes:

// inside your if (id) clause 
var jsName = $("#" + id + " h2").text(); 
var jsAddress = $("#" + id + " p.address").text(); 

Vous pouvez .each() sur $(".mapSearch") si vous voulez simplifier votre code.

Answer 2

$(document).ready(function() { 

//<![CDATA[ 

if (GBrowserIsCompatible()) { 

    function createMarker(point, html) { 

     var marker = new GMarker(point); 

     GEvent.addListener(marker, "click", function() { 

      marker.openInfoWindowHtml(html); 

     }); 

     return marker; 
    } 

    // Display the map, with some controls and set the initial location 

    var map = new GMap2(document.getElementById("map")); 

    map.enableContinuousZoom(); 

    //map.enableScrollWheelZoom(); 

    map.enablePinchToZoom(); // ForiPhone users 

    map.addControl(new GLargeMapControl()); 

    map.addControl(new GMapTypeControl()); 

    map.setCenter(new GLatLng(51.53177, -0.08001), 16); 

    var icon = new GIcon(); 

    var point = new GLatLng(51.53177, -0.08001); 

    var marker = createMarker(point, '<div style="width:240px" id="mapsball"></div>'); 

    map.addOverlay(marker, icon); 

} 

// display a warning if the browser was not compatible 

else { 

    alert("Sorry, Google Maps is not compatible with your browser"); 

} 


//]]> 
});