Page 1 of 1

Google Map API - Info Window

Posted: Fri Feb 18, 2011 7:22 pm
by MythX
Hi,
I'm trying to setup a page with a Google Map that plots down about 500 markers (at widest zoom). Map is setup, it looks pretty sharp. What I'd like to do next, though is to be able to click a marker and have a bubble pop up and load some html. I don't want to load the html for all 500 or so markers (I think that would be too serious a performance hit). The site is PHP based, so that's what I'll use to build the HTML on the fly, and that part I have down pretty good. What I need to understand, is how to make a marker listen for a click, and how to get that click to pass the appropriate info so my PHP script will know what data to pull. I think this will have to be an AJAX solution (I'm a newbie there, but not afraid of it)

Here's a section of the code that loads the map:

Code: Select all

		var map;
		var denver = new google.maps.LatLng(39.737818, -104.978485);
			  function initialize() {
				var myOptions = {
				  zoom: 9,
				  mapTypeId: google.maps.MapTypeId.TERRAIN
				}
				map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
				var myLatlng = new google.maps.LatLng(39.7255555556,-105.513055556);
				var marker = new google.maps.Marker({
					position: myLatlng, 
					map: map, 
					title:"Road"
				});
				var myLatlng = new google.maps.LatLng(39.6423333333,-105.71645);
				var marker = new google.maps.Marker({
					position: myLatlng, 
					map: map, 
					title:"Pass"
				});
				var myLatlng = new google.maps.LatLng(38.8422222222,-106.401777778);
				var marker = new google.maps.Marker({
					position: myLatlng, 
					map: map, 
					title:"Lakes"
				});
         }
Thanks in advance for the help

Jason