Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts

    External link, linked to Google maps

    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>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,762
    Thanks
    55
    Thanked 517 Times in 514 Posts
    any reason why it wouldn't be
    <a href="javascript: map.panTo(new google.maps.LatLng(25.2, 105.7))">Mexico</a> ?

    (those coords are for China, btw...)

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    just noticed that. Must have changed the numbers by accident. Thats not the main problem though. I tried your solution, and the link is clickable, but nothing happens when clicked.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,762
    Thanks
    55
    Thanked 517 Times in 514 Posts
    1) you really need to get firebug and learn how to use it. How was this:
    Code:
    </script>
    		<script>
    	google.maps.event.addDomListener(controlUI, 'click', function() {
        map.setCenter(chicago)
    	</script>
    ever going to do anything but be weird and fail miserably?

    2) if you're unsure about what you're doing, you need to make sure that your code is fundamentally sound before trying to do other stuff to it. The code you have at the moment will never work because there is something wrong with the initialize function to begin with. I can't see it, but it there is some problem with the way the map initializes and every time you try to modify the map state it will come up as undefined.

    so you can make your link a million ways but it will never work.

    what I do in this case is take it back to basics, remove all the bells and whistles, get my new function working and THEN start putting the fancy stuff on top:
    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.346896,-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};
        map = new google.maps.Map(document.getElementById("map_canvas"), settings);		
    }
    
    	</script>
    	</head>
    	<body onload="initialize()">
    		<div id="map_canvas" style="width:500px; height:300px"></div>
    <a href="javascript:map.panTo(new google.maps.LatLng(25.2,105.7))">China</a>
    
    </body>
    </html>
    ... and check it at very stage when I add something, and if something stops working, have a look at firebug...


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •