Custom Map

samg914 · July 3, 2012, 6:39pm

I am currently developing a custom map, but have one issue. I have several infoboxes, but only one of them is displaying for every marker. How do I get each marker to display it’s own infobox? The infobox that is displaying is the last one listed in the code (coppla). Also, not sure if this is important, but whichever infobox is listed last in the code is the one that displays for each marker.

Thanks for any help!

Code:


<script type="text/javascript">
	function initialize() {
		var latlng = new google.maps.LatLng(42.3435295,-71.0871923);
		var settings = {
			zoom: 15,
			center: latlng,
			mapTypeControl: true,
			mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
			navigationControl: true,
			navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
			mapTypeId: google.maps.MapTypeId.ROADMAP};
		var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

<!--START Fenway Park-->		
		var contentStringfenpar = '<div id="content">'+
			'<div id="siteNotice">'+
			'</div>'+
			'<h1 id="firstHeading" class="firstHeading">Fenway Park</h1>'+
			'<div id="bodyContent">'+
			'<p>Fenway Park is where you go to see any major league baseball game. Also, home of the Boston Red Sox team.</p>'+
			'</div>'+
			'</div>';
		var infowindow = new google.maps.InfoWindow({
			content: contentStringfenpar
		});
		
		var fenparImage = new google.maps.MarkerImage('images/map-icons/fenway-park.png',
			new google.maps.Size(122,50),
			new google.maps.Point(0,0),
			new google.maps.Point(50,50)
		);

		var fenparShadow = new google.maps.MarkerImage('images/map-icons/fenway-park-shadow.png',
			new google.maps.Size(122,50),
			new google.maps.Point(0,0),
			new google.maps.Point(65, 50));

		var fenparPos = new google.maps.LatLng(42.3462509,-71.0981704);

		var fenparMarker = new google.maps.Marker({
			position: fenparPos,
			map: map,
			icon: fenparImage,
			shadow: fenparShadow,
			title:"Fenway Park",
			zIndex: 3});
<!--STOP Fenway Park-->

<!--START Northeastern University-->		
		var contentStringnoruni = '<div id="content">'+
			'<div id="siteNotice">'+
			'</div>'+
			'<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
			'<div id="bodyContent">'+
			'<p>DESCRIPTION HERE.</p>'+
			'</div>'+
			'</div>';
		var infowindow = new google.maps.InfoWindow({
			content: contentStringnoruni
		});
		
		var noruniImage = new google.maps.MarkerImage('images/map-icons/northeastern-university.png',
			new google.maps.Size(200,50),
			new google.maps.Point(0,0),
			new google.maps.Point(50,50)
		);

		var noruniShadow = new google.maps.MarkerImage('images/map-icons/northeastern-university-shadow.png',
			new google.maps.Size(200,50),
			new google.maps.Point(0,0),
			new google.maps.Point(65, 50));

		var noruniPos = new google.maps.LatLng(42.3385917,-71.0909155);

		var noruniMarker = new google.maps.Marker({
			position: noruniPos,
			map: map,
			icon: noruniImage,
			shadow: noruniShadow,
			title:"Northeastern University",
			zIndex: 3});
<!--STOP Northeastern University-->

<!--START Berklee College of Music-->		
		var contentStringbercol = '<div id="content">'+
			'<div id="siteNotice">'+
			'</div>'+
			'<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
			'<div id="bodyContent">'+
			'<p>DESCRIPTION HERE.</p>'+
			'</div>'+
			'</div>';
		var infowindow = new google.maps.InfoWindow({
			content: contentStringbercol
		});
		
		var bercolImage = new google.maps.MarkerImage('images/map-icons/berklee-college-of-music.png',
			new google.maps.Size(202,50),
			new google.maps.Point(0,0),
			new google.maps.Point(50,50)
		);

		var bercolShadow = new google.maps.MarkerImage('images/map-icons/berklee-college-of-music-shadow.png',
			new google.maps.Size(202,50),
			new google.maps.Point(0,0),
			new google.maps.Point(65, 50));

		var bercolPos = new google.maps.LatLng(42.3475459,-71.0870190);

		var bercolMarker = new google.maps.Marker({
			position: bercolPos,
			map: map,
			icon: bercolImage,
			shadow: bercolShadow,
			title:"Berklee College of Music",
			zIndex: 3});
<!--STOP Berklee College of Music-->

<!--START Wentworth Institute of Technology-->		
		var contentStringwentec = '<div id="content">'+
			'<div id="siteNotice">'+
			'</div>'+
			'<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
			'<div id="bodyContent">'+
			'<p>DESCRIPTION HERE.</p>'+
			'</div>'+
			'</div>';
		var infowindow = new google.maps.InfoWindow({
			content: contentStringwentec
		});
		
		var wentecImage = new google.maps.MarkerImage('images/map-icons/wentworth-institute-of-technology.png',
			new google.maps.Size(272,50),
			new google.maps.Point(0,0),
			new google.maps.Point(50,50)
		);

		var wentecShadow = new google.maps.MarkerImage('images/map-icons/wentworth-institute-of-technology-shadow.png',
			new google.maps.Size(272,50),
			new google.maps.Point(0,0),
			new google.maps.Point(65, 50));

		var wentecPos = new google.maps.LatLng(42.3370475,-71.0970402);

		var wentecMarker = new google.maps.Marker({
			position: wentecPos,
			map: map,
			icon: wentecImage,
			shadow: wentecShadow,
			title:"Wentworth Institute of Technology",
			zIndex: 3});
<!--STOP Wentworth Institute of Technology-->

<!--START Symphony Hall-->		
		var contentStringsymhal = '<div id="content">'+
			'<div id="siteNotice">'+
			'</div>'+
			'<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
			'<div id="bodyContent">'+
			'<p>DESCRIPTION HERE.</p>'+
			'</div>'+
			'</div>';
		var infowindow = new google.maps.InfoWindow({
			content: contentStringsymhal
		});
		
		var symhalImage = new google.maps.MarkerImage('images/map-icons/symphony-hall.png',
			new google.maps.Size(136,50),
			new google.maps.Point(0,0),
			new google.maps.Point(50,50)
		);

		var symhalShadow = new google.maps.MarkerImage('images/map-icons/symphony-hall-shadow.png',
			new google.maps.Size(136,50),
			new google.maps.Point(0,0),
			new google.maps.Point(65, 50));

		var symhalPos = new google.maps.LatLng(42.3430809,-71.0853963);

		var symhalMarker = new google.maps.Marker({
			position: symhalPos,
			map: map,
			icon: symhalImage,
			shadow: symhalShadow,
			title:"Symphony Hall",
			zIndex: 3});
<!--STOP Symphony Hall-->

<!--START Newbury Street Shopping-->		
		var contentStringnewstr = '<div id="content">'+
			'<div id="siteNotice">'+
			'</div>'+
			'<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
			'<div id="bodyContent">'+
			'<p>DESCRIPTION HERE.</p>'+
			'</div>'+
			'</div>';
		var infowindow = new google.maps.InfoWindow({
			content: contentStringnewstr
		});
		
		var newstrImage = new google.maps.MarkerImage('images/map-icons/newbury-street-shopping.png',
			new google.maps.Size(204,50),
			new google.maps.Point(0,0),
			new google.maps.Point(50,50)
		);

		var newstrShadow = new google.maps.MarkerImage('images/map-icons/newbury-street-shopping-shadow.png',
			new google.maps.Size(204,50),
			new google.maps.Point(0,0),
			new google.maps.Point(65, 50));

		var newstrPos = new google.maps.LatLng(42.3483867,-71.0884548);

		var newstrMarker = new google.maps.Marker({
			position: newstrPos,
			map: map,
			icon: newstrImage,
			shadow: newstrShadow,
			title:"Newbury Street Shopping",
			zIndex: 3});
<!--STOP Newbury Street Shopping-->

<!--START House of Blues-->		
		var contentStringhoublu = '<div id="content">'+
			'<div id="siteNotice">'+
			'</div>'+
			'<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
			'<div id="bodyContent">'+
			'<p>DESCRIPTION HERE.</p>'+
			'</div>'+
			'</div>';
		var infowindow = new google.maps.InfoWindow({
			content: contentStringhoublu
		});
		
		var houbluImage = new google.maps.MarkerImage('images/map-icons/house-of-blues.png',
			new google.maps.Size(134,50),
			new google.maps.Point(0,0),
			new google.maps.Point(50,50)
		);

		var houbluShadow = new google.maps.MarkerImage('images/map-icons/house-of-blues-shadow.png',
			new google.maps.Size(134,50),
			new google.maps.Point(0,0),
			new google.maps.Point(65, 50));

		var houbluPos = new google.maps.LatLng(42.3471727,-71.0957007);

		var houbluMarker = new google.maps.Marker({
			position: houbluPos,
			map: map,
			icon: houbluImage,
			shadow: houbluShadow,
			title:"House of Blues",
			zIndex: 3});
<!--STOP House of Blues-->

<!--START Prudential Center Shopping-->		
		var contentStringprucen = '<div id="content">'+
			'<div id="siteNotice">'+
			'</div>'+
			'<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
			'<div id="bodyContent">'+
			'<p>DESCRIPTION HERE.</p>'+
			'</div>'+
			'</div>';
		var infowindow = new google.maps.InfoWindow({
			content: contentStringprucen
		});
		
		var prucenImage = new google.maps.MarkerImage('images/map-icons/prudential-center-shopping.png',
			new google.maps.Size(220,50),
			new google.maps.Point(0,0),
			new google.maps.Point(50,50)
		);

		var prucenShadow = new google.maps.MarkerImage('images/map-icons/prudential-center-shopping-shadow.png',
			new google.maps.Size(220,50),
			new google.maps.Point(0,0),
			new google.maps.Point(65, 50));

		var prucenPos = new google.maps.LatLng(42.3486763,-71.0826469);

		var prucenMarker = new google.maps.Marker({
			position: prucenPos,
			map: map,
			icon: prucenImage,
			shadow: prucenShadow,
			title:"Prudential Center Shopping",
			zIndex: 3});
<!--STOP Prudential Center Shopping-->

<!--START Copley Place Shopping-->		
		var contentStringcoppla = '<div id="content">'+
			'<div id="siteNotice">'+
			'</div>'+
			'<h1 id="firstHeading" class="firstHeading">Copley Place Shopping</h1>'+
			'<div id="bodyContent">'+
			'<p><ul><li>Neiman Marcus</li><li>Barneys New York</li><li>Tiffany & Co.</li><li>Jimmy Choo</li><li>Intimacy</li><li>Tourneau</li><li>Salvatore Ferragamo</li><li>Porsche Design</li><li>David Yurman</li><li>A|X Armani Exchange</li><li>Louis Vuitton</li><li>Emporio Armani</li><li>Elie Tahari</li><li>Christian Dior</li><li>Burberry</li><li>BCBGMAXAZRIA</li></ul></p>'+
			'</div>'+
			'</div>';
		var infowindow = new google.maps.InfoWindow({
			content: contentStringcoppla
		});
		
		var copplaImage = new google.maps.MarkerImage('images/map-icons/copley-place-shopping.png',
			new google.maps.Size(186,50),
			new google.maps.Point(0,0),
			new google.maps.Point(50,50)
		);

		var copplaShadow = new google.maps.MarkerImage('images/map-icons/copley-place-shopping-shadow.png',
			new google.maps.Size(186,50),
			new google.maps.Point(0,0),
			new google.maps.Point(65, 50));

		var copplaPos = new google.maps.LatLng(42.3473509,-71.0783045);

		var copplaMarker = new google.maps.Marker({
			position: copplaPos,
			map: map,
			icon: copplaImage,
			shadow: copplaShadow,
			title:"Copley Place Shopping",
			zIndex: 3});
<!--STOP Copley Place Shopping-->

		google.maps.event.addListener(fenparMarker, 'click', function() {
			infowindow.open(map,fenparMarker);
		});
		google.maps.event.addListener(noruniMarker, 'click', function() {
			infowindow.open(map,noruniMarker);
		});
		google.maps.event.addListener(bercolMarker, 'click', function() {
			infowindow.open(map,bercolMarker);
		});
		google.maps.event.addListener(wentecMarker, 'click', function() {
			infowindow.open(map,wentecMarker);
		});
		google.maps.event.addListener(symhalMarker, 'click', function() {
			infowindow.open(map,symhalMarker);
		});
		google.maps.event.addListener(newstrMarker, 'click', function() {
			infowindow.open(map,newstrMarker);
		});
		google.maps.event.addListener(houbluMarker, 'click', function() {
			infowindow.open(map,houbluMarker);
		});
		google.maps.event.addListener(prucenMarker, 'click', function() {
			infowindow.open(map,prucenMarker);
		});
		google.maps.event.addListener(copplaMarker, 'click', function() {
			infowindow.open(map,copplaMarker);
		});

	}
</script>