List + google maps = headache

[kevsyers]

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

[kevsyers]

surprisingly that doesn’t help me

[apostrophe]

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

[kevsyers]

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:

$(“

[apostrophe]

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.

[kevsyers]

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

” + 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?

[apostrophe]

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

[kevsyers]

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

[kevsyers]

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

[Author]

Posts