Установка названия маркера в Google Maps API 3 с помощью jQuery

Question

У меня пара проблем с Google Maps и jQuery. Интересно, сможет ли кто-нибудь помочь с меньшей из двух проблем, и, надеюсь, это поможет мне решить большую.

Я использую приведенный ниже код для заполнения карты Google, в основном он использует сгенерированный 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 перебирает все div с классом mapSearch и использует его для построения маркеров с использованием идентификатора div для получения широты / долготы и идентификатора места проведения:

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

На карте все маркеры в порядке, но у меня есть пробники с битом infoWindow. Я хочу отображать информацию о каждом месте при нажатии, однако, используя мой код выше, он просто помещает всю информацию в одно поле при нажатии, а не по отдельности. Надеюсь, это просто исправить!

Надеясь, что когда я это исправлю, я могу найти способ отображения информационного окна, если навести курсор мыши на div в html.

Answer 1

Что касается моих знаний о jQuery, то, что вы видите, правильно; $("h2").text() объединит внутренний текст all H2s в одну строку и вернет его. Лучше попробуй что-нибудь в этом духе:

// inside your if (id) clause
var jsName = $("h2", locations[i]).text();
var jsAddress = $("p.address", locations[i]).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");

}


//]]>
});