google map set new marker position and panTo

Question

I am trying to modify an existing theme's js to be able to show different locations on the map. here is the original code:

function initialize() {
    var map;
    var brooklyn = new google.maps.LatLng(parseFloat("<?php echo $coordinates[0]; ?>"), parseFloat("<?php echo $coordinates[1]; ?>"));
    var stylez = [{
        featureType: "all",
        elementType: "all",
        stylers: [{
                saturation: -100
            } // <-- THIS
        ]
    }];

    var mapOptions = {
        zoom: parseInt("<?php the_field("google_map_zoom_level"); ?>"),
        center: brooklyn,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
        }
    };

    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    var mapType = new google.maps.StyledMapType(stylez, {
        name: "Grayscale"
    });
    map.mapTypes.set('tehgrayz', mapType);
    map.setMapTypeId('tehgrayz');
    marker = new google.maps.Marker({
        title: "<?php echo $map["
        address "]; ?>",
        position: new google.maps.LatLng(parseFloat("<?php echo $coordinates[0]; ?>"), parseFloat("<?php echo $coordinates[1]; ?>")),
        map: map
    });
}
initialize();
 //google.maps.event.addDomListener(window, 'load', initialize);
}

I have also managed to use various tutorials to create a function that moves the marker to a new location.

function changeMarkerPos(lat, lon){
    myLatLng = new google.maps.LatLng(lat, lon);
    marker.setPosition(myLatLng);
    map.panTo(myLatLng);
}

However, although the marker does move, the map does not center to is, as I would like. Can anyone help me out? I am not that good with js, so please keep things simple...

Thanks!!!

Answer 1

You need to declare the map variable globally. The function changeMarkerPos cannot currently use it.

var map;
function initialize() {
    var brooklyn = new googl............

EDIT - The following will not make any difference this time. setCenter() is useful but not the answer to your question.

I was doing something similar earlier this week and used map.setCenter(); What about this:

function changeMarkerPos(lat, lon){
    myLatLng = new google.maps.LatLng(lat, lon);
    marker.setPosition(myLatLng);
    map.panTo(myLatLng); 
    map.setCenter(myLatLng);    
}