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

} 


//]]> 
});