Setting marker title in Google Maps API 3 using jQuery

Posted by bateman_ap on Stack Overflow See other posts from Stack Overflow or by bateman_ap
Published on 2010-05-05T12:49:24Z Indexed on 2010/05/05 13:48 UTC
Read the original article Hit count: 283

Filed under:
|

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.

© Stack Overflow or respective owner

Related posts about google-maps

Related posts about jQuery