Forums

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:

  
$(\"<li />\")
      .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

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

   
      <ul id=\"list\"></ul>

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

$(\"<li />\")
      .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:

function addPoints() {
 
	newpoints[0] = new Array(35.600168, -77.334524, icon0, 'GK Café', 'Two sisters have opened a cafe and catering company, GK Café &amp;amp; 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&#39;s Fresh Cantina', 'A Salsarita&#39;s Fresh Cantina is slated to open soon in this location.'); 
	newpoints[2] = new Array(35.609966, -77.401196, icon0, 'Jimmy John&#39;s', 'Jimmy John&#39;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 = \"<div id=\\"popup\\">\" + popuphtml + \"<\/div>\";
	var marker = new GMarker(point, icon);
	GEvent.addListener(marker, \"click\", function() {
		marker.openInfoWindowHtml(popuphtml);
	});
	return marker;
}

This is my code for my list:

<div id=\"holder\">
	<ul id=\"list\">
	<li>GK Cafe</li>
	<li>Salsarita</li>
	<li>Jimmy John's</li>
	</ul>
</div>

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

treehouse : what would you like to learn today?

Forums

List + google maps = headache