Move google map center javascript api

Your problem is that in moveToLocation, you're using document.getElementById to try to get the Map object, but that only gets you an HTMLDivElement, not the google.maps.Map element you're expecting. So your variable map has no panTo function, which is why it doesn't work. What you need to is squirrel the map variable away somewhere, and it should work as planned. You can just use a global variable like so:

window.map = undefined;      // global variable

function initialize() {
  const mapOptions = {
    center: new google.maps.LatLng(0, 0),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  // assigning to global variable:
  window.map = new google.maps.Map(
    document.getElementById("map_canvas"), mapOptions);
}

function moveToLocation(lat, lng){
  const center = new google.maps.LatLng(lat, lng);
  // using global variable:
  window.map.panTo(center);
}

See working jsFiddle here: http://jsfiddle.net/fqt7L/1/


Display the Google Maps API using dynamically, fetch the data in database to display the place, lat, long and to show map marker in center using AngularJS. Done by Sureshchan...

Screenshot of Google Maps

$(function() {
    $http.get('school/transport/scroute/viewRoute?scRouteId=' + scRouteId).success(function(data) {
        console.log(data);

        for (var i = 0; i < data.viewRoute.length; i++) {
            $scope.view = [];
            $scope.view.push(data.viewRoute[i].stoppingName, data.viewRoute[i].latitude, data.viewRoute[i].longitude);
            $scope.locData.push($scope.view);
        }            

        var locations = $scope.locData;
        var map = new google.maps.Map(document.getElementById('map'), {                    
            mapTypeId : google.maps.MapTypeId.ROADMAP
        });
        var infowindow = new google.maps.InfoWindow();
        var bounds = new google.maps.LatLngBounds();
        var marker, j;

        for (j = 0; j < locations.length; j++) {
            marker = new google.maps.Marker({
                position : new google.maps.LatLng(locations[j][1], locations[j][2]),
                map : map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, j) {
                bounds.extend(marker.position);
                return function() {
                    infowindow.setContent(locations[j][0]); 
                    infowindow.open(map, marker);
                    map.setZoom(map.getZoom() + 1);
                    map.setCenter(marker.getPosition());
                }
            })(marker, j));
        };
        map.fitBounds(bounds);
    });
});