使用jQuery在Google Maps API 3中設置標記標題

Question

我在Google地圖和jQuery中遇到了一些問題。想知道是否有人可以幫助解決這兩個問題中較小的問題，並希望它能幫助我修復更大的問題。

我使用下面的代碼來填充一個谷歌地圖，基本上它使用生成的HTML來填充形式的地圖：

<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> 

JavaScript的循環，雖然所有類mapSearch的div並使用這使用div ID情節標記，以獲得經/緯度和會場ID：

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); 
       } 
      } 

的標記都在地圖上繪製好了，但是我有信息窗口位probs。我想在點擊時顯示有關每個場所的信息，但是使用我上面的代碼只是單擊時將所有信息放在一個框中。希望這是一個簡單的修復！

希望一旦我解決這個問題，我可以找到一種方法來獲取信息窗口，如果我將鼠標懸停在HTML中的div上。

Answer 1

嘿，當你做什麼，你得到一個：

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

至於我的jQuery的知識而言，你看到的是正確的; $("h2").text()將把全部 H2的內部文本連接成一個字符串並返回。你最好嘗試的東西沿着這些路線：

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

可以.each()在$(".mapSearch")如果你想簡化你的代碼。

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"); 

} 


//]]> 
});