Setting marker title in Google Maps API 3 using jQuery

Question

Hi, I am having a couple of problems with Google Maps and jQuery. Wondered if anyone can help with the smaller of the two problems and hopefully it will help me to fixing the bigger one.

I am using the below code to populate a google map, basically it uses generated HTML to populate the maps in the form:

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

The JavaScript loops though all the divs with class mapSearch and uses this to plot markers using the div ID to get the lat/lon and ID of the venue:

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

The markers all plot OK on the map, however I am having probs with the infoWindow bit. I want to display info about each venue when clicked, however using my code above it just puts all info in one box when clicked, not individually. Hoping it is a simple fix!

Hoping once I fix this I can work out a way to get the info window displaying if I hover over the div in the html.

Answer 1

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

}


//]]>
});

Answer 2

Hey, what do you get when you do a:

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

As far as my jQuery knowledge is concerned, what you are seeing is right; $("h2").text() will concatenate inner text of all H2s into one string and return it. You better try something along these lines:

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

You can .each() over $(".mapSearch") if you want to simplify your code.