...

View Full Version : External link, linked to Google maps



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


<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:



<!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>

xelawho
07-20-2011, 12:45 AM
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...)

conphill
07-21-2011, 01:14 AM
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.

xelawho
07-21-2011, 06:27 AM
1) you really need to get firebug and learn how to use it. How was this:

</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:


<!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...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum