CodingForums.com - View Single Post

conphill · 07-19-2011, 03:41 PM

I am trying to have a text link above Google Maps link to a marker on my map. When the link is clicked, the map will automatically center itself on the marker. I already have the custom markers and locations, I am just not that good with Javascript and jQuery to figure it out.

I tried to use

Code:

<a href="javascript: map.panTo(new LatLng(25.2, 105.7))">Mexico</a>

and the link shows up, but nothing happens. Here is my code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
			body {
				font-family: Helvetica, Arial, sans-serif;
				font-size:10px;
				margin:0;
			}

			#content {

			}
		</style>

		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
			function initialize() {
				var latlng = new google.maps.LatLng(39.346246,-76.624446);
				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);
				var contentString = '<div id="content">'+
					'<div id="siteNotice">'+
					'</div>'+
					'<div id="bodyContent">'+
					'</div>';
				var infowindow = new google.maps.InfoWindow({
					content: contentString
				});
				
				var loyolaImage = new google.maps.MarkerImage('images/Loyola.png',
					new google.maps.Size(100,50),
					new google.maps.Point(0,0),
					new google.maps.Point(50,50)
				);

				var loyolaShadow = new google.maps.MarkerImage('images/logo_shadow.png',
					new google.maps.Size(130,50),
					new google.maps.Point(0,0),
					new google.maps.Point(65, 50));

				var loyolaPos = new google.maps.LatLng(39.3462326,-76.624446);

				var loyolaMarker = new google.maps.Marker({
					position: loyolaPos,
					map: map,
					icon: loyolaImage,
					shadow: loyolaShadow,
					title:"Loyola",
					zIndex: 3});
				
				var jhuImage = new google.maps.MarkerImage('images/Jhu.png',
					new google.maps.Size(150,50),
					new google.maps.Point(0,0),
					new google.maps.Point(50,50)
				);

				var jhuShadow = new google.maps.MarkerImage('images/logo_shadow.png',
					new google.maps.Size(130,50),
					new google.maps.Point(0,0),
					new google.maps.Point(60, 50)
				);

				var jhuPos = new google.maps.LatLng(39.329157,-76.620477);

				var jhuMarker = new google.maps.Marker({
					position: jhuPos,
					map: map,
					icon: jhuImage,
					shadow: jhuShadow,
					title:"Johns Hopkins",
					zIndex: 2
				});

var fellsImage = new google.maps.MarkerImage('images/FellsPoint.png',
					new google.maps.Size(150,50),
					new google.maps.Point(0,0),
					new google.maps.Point(50,50)
				);
var fellsShadow = new google.maps.MarkerImage('images/logo_shadow.png',
					new google.maps.Size(130,50),
					new google.maps.Point(0,0),
					new google.maps.Point(60, 50)
				);

				var fellsPos = new google.maps.LatLng(39.28231,-76.593611);

				var fellsMarker = new google.maps.Marker({
					position: fellsPos,
					map: map,
					icon: fellsImage,
					shadow: fellsShadow,
					title:"Johns Hopkins",
					zIndex: 4
				});

				var towsonImage = new google.maps.MarkerImage('images/Towson.png',
					new google.maps.Size(150,50),
					new google.maps.Point(0,0),
					new google.maps.Point(50,50)
				);

				var towsonShadow = new google.maps.MarkerImage('images/logo_shadow.png',
					new google.maps.Size(130,50),
					new google.maps.Point(0,0),
					new google.maps.Point(60, 50)
				);

				var towsonPos = new google.maps.LatLng(39.3322248,-76.610944);

				var towsonMarker = new google.maps.Marker({
					position: towsonPos,
					map: map,
					icon: towsonImage,
					shadow: towsonShadow,
					title:"Towson",
					zIndex: 1
				});
				
				google.maps.event.addListener(companyMarker, 'click', function() {
					infowindow.open(map,companyMarker);
				});
			}
		</script>
		
		
		<script>
	google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(chicago)
	</script>
	</head>
	<body onload="initialize()">
		<div id="map_canvas" style="width:500px; height:300px"></div>

<a href="javascript: map.panTo(new LatLng(39.393248,-76.610944))">Towson</a>



	</body>
</html>