0

On my map, it loads a table with a list of spots on the left, the map on the right, I want to be able to click on the table row and have it center the map and zoom over the marker. I load the table rows like this:

  <table id="listOfStops" class="table table-striped">
  <thead>
  <tr>
    <th>Stop #</th>
    <th>Street Name</th>
  </tr>
  </thead>
  <tbody>
  <?php
  $i = 0;
  while($stmt -> fetch()) {
    echo '<tr  id="arrMarker[' . $i . ']">';
    echo '<td>' . $gStopNumber . '</td>';
    echo '<td>' . $gStreetName . '</td>';
    echo '</tr>';
  $i++;} $stmt -> close(); $mysqli -> close(); ?>  
  </tbody>
  </table>

and now I just need the JQuery to complete my task I've tried googling but I guess it's not as popular as you would think. Thanks.

Datsik
  • 14,453
  • 14
  • 80
  • 121
  • The answer to this might help: [Google map V3 Set Center to specific Marker](http://stackoverflow.com/questions/6150409/google-map-v3-set-center-to-specific-marker) using `map.setCenter(latLng)` – nickhar Mar 06 '13 at 09:52

1 Answers1

1

I've done something similar, so I'll show you the way I did it.

When you create a marker, make sure to give it an 'id' (preferably with a number element), and add your markers to an array.

var map;  // A  reference to 'the' Google map 
var markers = [];
var num = 1; // Increment for additional markers
var _id = 'marker'+num;
var _title = 'Marker ' + num;
var _pos = new google.maps.LatLng(lat, lng);
var zoom = 6;

var _marker = new google.maps.Marker({
    id: _id,
    position: _pos,
    map: map,
    title: _title,
   animation : google.maps.Animation.DROP
});

markers.push(_marker);

Give your TR elements a corresponding number in their id, or a data-num attribute (containing the id number part), and bind the click event as follows:

$("#listOfStops").children("tr").each(function() {
    $(this).on(
        'click',
        function() {
            var num = $(this).data("num"); // Assuming you've given it a data attribute
            for (var i = 0; i < markers.length; i++) {
                if (markers[i].id=='marker'+num) {
                    map.setCenter(markers[i].position);
                    map.setZoom(zoom);
                    break;
                }
            }
        }
    );
});
net892z
  • 61
  • 4
  • I'm trying to do that but I just got it setup as this right now: `$('#listOfStops').children('tr').each(function() { $(this).on('click', function() { alert('test'); }); }); `but when I click no alert pops up – Datsik Mar 06 '13 at 21:49
  • what do you mean by data attribute – Datsik Mar 06 '13 at 22:26
  • The HTML5 data attribute: http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes Try this instead: $("tr[id^='arrMarker']").each(...); – net892z Mar 07 '13 at 09:17
  • Your TR tags should look like the following: , where the (num)ber is replaced incrementally. You could also try $("[data-num]").each(...);, which will access only the TR elements that have the data-num attribute, and if you wished to select a TR element with a specific value, $("[data-num='1']") – net892z Mar 07 '13 at 09:25