Been struggling all day with setting a pan to in google maps from a text link. It looks like the id of the map itself isnt being passed through to the function but I have tried a number of things with no joy.
<script type="text/javascript">
var home = new google.maps.LatLng(4.915833, 10.195313);
function initialize() {
var myOptions = {
zoom: 2,
center: home,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: false,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
}
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
setMarkers(map, destinations);
clickroute(map);
}
var destinations = [
['Marbella', 36.509937, -4.886352],
['Algarve', 37.016945, -7.928728],
['London', 51.508129, -0.128005],
['Istanbul', 41.00527, 28.97696],
['Whistler', 50.116168, -122.959423]
];
function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('img/marker.png',
new google.maps.Size(41, 63),
new google.maps.Point(0,0));
for (var i = 0; i < locations.length; i++) {
var destination = locations[i];
var myLatLng = new google.maps.LatLng(destination[1], destination[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: destination[0]
});
}
}
function clickroute(lati, long) {
var latLng = new google.maps.LatLng(51.433373, -0.712251);
map.panTo(latLng);
}
</script>
<li onclick="clickroute()">test</li>
Any possible ideas on what could cause the issue? I get a js error with
Uncaught TypeError: Object #<HTMLDivElement> has no method 'panTo'
Thanks
Richard
@onemach is correct.
1.
You have to declare the map
as a global variable at the beginning of javascript. Just do a var map;
declaration immediately after <script type="text/javascript">
tag.
2. And at the same time your map initialization should be changed to
map = new google.maps.Map(document.getElementById("map"), myOptions); // without the 'var'
3. Your calling clickroute()
onClick of <li>
without parameters. So change the definition of clickroute()
like this :
function clickroute() { //just omit the 'lati' and 'long'
var latLng = new google.maps.LatLng(51.433373, -0.712251);
map.panTo(latLng);
}
Now clicking on the test
<li>
your map will move to point (51.433373, -0.712251)