google maps pan to

Question

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

Uglify

Answer 1

@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)

Bite

Answer 2

clickroute(map); is incompatible with the definition

function clickroute(lati, long) {
    var latLng = new google.maps.LatLng(51.433373, -0.712251);
    map.panTo(latLng);
}

I guess what you want it

function clickroute(map) {
    var latLng = new google.maps.LatLng(51.433373, -0.712251);
    map.panTo(latLng);
}

UPDATE:

I am confused what exactly do you want.

onclick=clickroute() does not pass any arguments to the function.

Also there is no global map in clickroute.

Build

thanks for taking the time to reply, still no joy with that and same error :( – Uglify