Grow your CSS skills. Land your dream job.

List + google maps = headache

  • # April 21, 2009 at 3:57 pm

    Hey guys,

    This is my first post to CSS-Tricks so I hope I provide you guys with all of the info I need to.

    Here’s my issue:

    I have several markers on a google map. I have a list that corresponds to those markers. Could someone please point me in the right direction as to how to get the list items to link to the markers in the map.

    e.g.
    Click on ‘GK Cafe’ in the list and the map goes to the marker.

    I have attached an html file to show you what I have so far.

    I’m not necessarily asking for someone to do this for me, just for a bit of help. Also this is my very first attempt at Javascript so please bear with me.

    Thank in advance

    # April 22, 2009 at 11:42 am

    surprisingly that doesn’t help me

    # April 22, 2009 at 12:20 pm

    I knew I had seen something like this before. It’s just taken me all day to remember where! :D

    This is exactly what you need (check the demo) http://marcgrabanski.com/article/jquery-google-maps-tutorial-basics

    # April 22, 2009 at 2:55 pm

    Thanks for the link.

    I’ve done that tutorial before and found it useful. However I’m not certain how they are getting the objects in the list to match the markers. I’m assuming it has something to do with this code:

    Code:
    $(“
  • “)
    .html(“Point “+i)
    .click(function(){
    map.panTo(marker.getLatLng());
    })

    .appendTo(“#list”);

Again, I’m new to javascript so the solution might be staring right at me.

Thanks again

# April 22, 2009 at 3:25 pm

I’m no Javascript ninja but if you read through that tutorial again you will notice that he has an empty list in the html

Code:

    and calls the list items dynamically with jQuery in that bit of code you posted

    Code:
    $(“
  • “)
    .html(“Point “+i)
    .click(function(){
    map.panTo(marker.getLatLng());
    })

    .appendTo(“#list”);

    In his example the variable "i" is a random point on the map so I guess for your example you would create a variable for each specific location and append those to the list.

    Hope that helps a bit. If I have some time tomorrow I will try and work through it properly.

    # April 23, 2009 at 12:11 pm

    Yeah that makes sense. The empty list is populated by the javascript (the random points). And the markers are appended to the list. (Not trying to repeat what you said, just making sure I understand it)

    This is the code that I have for my points on the map:

    Code:
    function addPoints() {

    newpoints[0] = new Array(35.600168, -77.334524, icon0, ‘GK Café’, ‘Two sisters have opened a cafe and catering company, GK Café & Catering, bearing their initials and featuring some of the Southern food they grew up eating at home.’);
    newpoints[1] = new Array(35.57771, -77.381184, icon0, ‘Salsarita's Fresh Cantina’, ‘A Salsarita's Fresh Cantina is slated to open soon in this location.’);
    newpoints[2] = new Array(35.609966, -77.401196, icon0, ‘Jimmy John's’, ‘Jimmy John's is known for its “freaky fast,” fresh subs, which local owner Pete Triebenbacher’);

    for(var i = 0; i < newpoints.length; i++) {
    var point = new GPoint(newpoints[i][1],newpoints[i][0]);
    var popuphtml = newpoints[i][4] ;
    var marker = createMarker(point,newpoints[i][2],popuphtml);
    map.addOverlay(marker);
    }
    }

    function createMarker(point, icon, popuphtml) {
    var popuphtml = "

    “;
    var marker = new GMarker(point, icon);
    GEvent.addListener(marker, “click”, function() {
    marker.openInfoWindowHtml(popuphtml);
    });
    return marker;
    }

    This is my code for my list:

    Code:
    • GK Cafe
    • Salsarita
    • Jimmy John’s

    Is it possible for me to give the list items an id and append each ‘newpoints’ to it. Or am I way off base?

    # April 23, 2009 at 1:43 pm

    Again, I’m no expert. But yes, I was thinking something along those lines.
    I also just found this which is a a slightly different approach but is even closer to what you want http://www.appelsiini.net/demo/google_maps_nojs/enabled.html

    # April 23, 2009 at 1:59 pm

    man thanks for all of your help….I’m about to go through the tut and see what happens.

    # April 23, 2009 at 2:57 pm

    Unfortunately I think the last link you sent me might be to time consuming. I have to update this map about once a week with different locations. I’m going to keep working with this jQuery attempt.

    Thanks Again

    Viewing 9 posts - 1 through 9 (of 9 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".