Need help writing jQuery to loop through table and inject markers into google map?

Question

I am new to jQuery. I've done some simple things with it but what I am attempting now is a over my head and I need some help.

I am building a locator for all the firearms dealers in the US for a client. I am working within Drupal. I have a proximity search by zip-code that works great. If you search by zip a list of paginated results shows up in an html table that can by paged through via ajax.

I would like a map to be above this list with markers corresponding to the names and addresses being listed. I already have all the lat and long values in the table results. I want the script to update the markers and automatically zoom to fit the markers in the view when a user changes the sort order of the table or pages through the results.

Also, I'd like to have a hover highlight effect over the rows of the table that simultaneously highlight the corresponding marker, and have a click on the table row equal a click on a marker that pops up a marker info window to be populated using jQuery to read the name and address fields of the table. Hope this all makes sense.

I know I'm putting a lot out there, I'm not asking for someone to write the whole script, just wanted to give as many details as possible. Thanks for any help. I'm just lost when it comes to looping and moving data around.

If you want to check out what I have so far on the project please visit: www.axtsweapons.com and login with the username: "test" and the password: "1234" and then visit this direct link: www.axtsweapons.com/ffllocator.

For just a simple page that would be easy to manipulate and play with go to: http://www.axtsweapons.com/maptest.html Thanks!

Answer 1

Figured out how to loop through the table and push the pins into the map. Now I'm having trouble figuring out how to integrate the bounds functionality of Google Maps API V3 with my script. Let me know if there are any pointers. Here is the test code that I'm using:

$(function() {
   var latlng = new google.maps.LatLng(45.522015,-122.683811);

   var settings = {
      zoom: 15,
      center: latlng,
      disableDefaultUI: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   };

   var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

      $('tr').each(function(i) {

         var the_marker = new google.maps.Marker({
            title: $(this).find('.views-field-title').text(),
            map: map,
            clickable: true,
            position: new google.maps.LatLng(
               parseFloat($(this).find('.views-field-latitude').text()),
               parseFloat($(this).find('.views-field-longitude').text())
            )
         });

         var infowindow = new google.maps.InfoWindow({
            content:  $(this).find('.views-field-title').text() +
                      $(this).find('.adr').text()
         });

         new google.maps.event.addListener(the_marker, 'click', function() {
            infowindow.open(map, the_marker);
         });
      });
});

Also, I'd like to know how to insert line breaks into info window data. Thanks