javascript - Maps Api V3: getCenter() and getZoom() not working

In the Google Maps API V3, I've created a map object:

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

I will zoom in and pan on that map and to go back to the original view later, I'd like to save the zoom level and the center of the map. I try the following:

oldCenter = map.getCenter();
oldZoom = map.getZoom();

But the variables stay 'undefined'. When I do the same thing in the console, I get the correct responses.

What am I doing wrong? Please let me know if more code is needed to find the answer or if it's an obvious problem.

Thanks!

Full Code:

function initialize() {

  // CUSTOM PLACES
  var latlng = new google.maps.LatLng(51, 10);
  var germany = new google.maps.LatLng(51, 10);
  var myLatlng = new google.maps.LatLng(49,12);

  // DEFINE STYLE
  var styles = [
    {
      "stylers": [
        { "invert_lightness": true }
      ]
    }
  ];

  // MARKER STYLES
  var coin_image  = 'coin.png';
  var merch_image = 'merch.png';

  // DEFINE OPTIONS FOR MAP
  var myOptions = {
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
      position: google.maps.ControlPosition.LEFT_TOP
    },
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };


  // CREATE MAP OBJECT
  map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  map.setOptions({styles: styles});

  // select zoom, etc by defining 2 points
  var southWest = new google.maps.LatLng(45,-10);
  var northEast = new google.maps.LatLng(55,15);
  var bounds = new google.maps.LatLngBounds(southWest,northEast);
  map.fitBounds(bounds);

  placeMarker(southWest);
  placeMarker(northEast);

  // Place Random Markers
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 50; i++) {
    var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
    var marker = new google.maps.Marker({
        position: location, 
        map: map,
        icon: merch_image
    });
    var j = i + 1;
    marker.setTitle(j.toString());
  }


  // TRANSACTION MARKERS

  // ONE FULL CYCLE
  // set marker

  var trans_marker = new google.maps.LatLng(52.31799,13.241904);
  var marker = new google.maps.Marker({
      position: trans_marker, 
      map: map,
      animation: google.maps.Animation.DROP,
      title:"Hello World!",
      icon: coin_image
  });

      // HERE'S THE PROBLEM
  // var oldCenter = map.getCenter();
  // var oldZoom = map.getZoom();

  console.log(map);
  oldMap = map;
  console.log(oldMap);
  // console.log(oldZoom);
  // console.log(oldCenter.toString());

  // pan to marker
  setTimeout(function() {map.panTo(trans_marker)}, startDelayed(3000));

  // zoom in on marker
  setTimeout(function() {zoomIn(ENDZOOM)}, startDelayed(1000));

  // show info window
  var contentString =  "<h3>Döner @ Coco Banh</h3>";
  contentString += ("<p>SumUp was used to pay for a Döner at Coco Banh in Berlin, Germany</p>");
  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  setTimeout(function() {infowindow.open(map,marker)}, startDelayed(8000));
  setTimeout(function() {infowindow.close()}, startDelayed(5000));  

  // zoom out again
  setTimeout(function() {zoomOut(oldZoom)}, startDelayed(2000));

  // center again
  setTimeout(function() {map.panTo(oldCenter)}, startDelayed(8000));

}
    infowindow = new google.maps.InfoWindow({
   content: contentString
});


}

In the Google Maps API V3, I've created a map object:

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

I will zoom in and pan on that map and to go back to the original view later, I'd like to save the zoom level and the center of the map. I try the following:

oldCenter = map.getCenter();
oldZoom = map.getZoom();

But the variables stay 'undefined'. When I do the same thing in the console, I get the correct responses.

What am I doing wrong? Please let me know if more code is needed to find the answer or if it's an obvious problem.

Thanks!

Full Code:

function initialize() {

  // CUSTOM PLACES
  var latlng = new google.maps.LatLng(51, 10);
  var germany = new google.maps.LatLng(51, 10);
  var myLatlng = new google.maps.LatLng(49,12);

  // DEFINE STYLE
  var styles = [
    {
      "stylers": [
        { "invert_lightness": true }
      ]
    }
  ];

  // MARKER STYLES
  var coin_image  = 'coin.png';
  var merch_image = 'merch.png';

  // DEFINE OPTIONS FOR MAP
  var myOptions = {
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
      position: google.maps.ControlPosition.LEFT_TOP
    },
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };


  // CREATE MAP OBJECT
  map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  map.setOptions({styles: styles});

  // select zoom, etc by defining 2 points
  var southWest = new google.maps.LatLng(45,-10);
  var northEast = new google.maps.LatLng(55,15);
  var bounds = new google.maps.LatLngBounds(southWest,northEast);
  map.fitBounds(bounds);

  placeMarker(southWest);
  placeMarker(northEast);

  // Place Random Markers
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 50; i++) {
    var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
    var marker = new google.maps.Marker({
        position: location, 
        map: map,
        icon: merch_image
    });
    var j = i + 1;
    marker.setTitle(j.toString());
  }


  // TRANSACTION MARKERS

  // ONE FULL CYCLE
  // set marker

  var trans_marker = new google.maps.LatLng(52.31799,13.241904);
  var marker = new google.maps.Marker({
      position: trans_marker, 
      map: map,
      animation: google.maps.Animation.DROP,
      title:"Hello World!",
      icon: coin_image
  });

      // HERE'S THE PROBLEM
  // var oldCenter = map.getCenter();
  // var oldZoom = map.getZoom();

  console.log(map);
  oldMap = map;
  console.log(oldMap);
  // console.log(oldZoom);
  // console.log(oldCenter.toString());

  // pan to marker
  setTimeout(function() {map.panTo(trans_marker)}, startDelayed(3000));

  // zoom in on marker
  setTimeout(function() {zoomIn(ENDZOOM)}, startDelayed(1000));

  // show info window
  var contentString =  "<h3>Döner @ Coco Banh</h3>";
  contentString += ("<p>SumUp was used to pay for a Döner at Coco Banh in Berlin, Germany</p>");
  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  setTimeout(function() {infowindow.open(map,marker)}, startDelayed(8000));
  setTimeout(function() {infowindow.close()}, startDelayed(5000));  

  // zoom out again
  setTimeout(function() {zoomOut(oldZoom)}, startDelayed(2000));

  // center again
  setTimeout(function() {map.panTo(oldCenter)}, startDelayed(8000));

}
    infowindow = new google.maps.InfoWindow({
   content: contentString
});


}

Share Improve this question edited Nov 17, 2012 at 21:10 asked Nov 17, 2012 at 21:02 tomburger 2372 gold badges3 silver badges13 bronze badges

It appears there's an extra curly brace at the bottom. Is there more context here? iirc, assigning of infowindow is happening outside of the initialize method. fwiw, the general idea should work though. I've done something similar before. – Dane O'Connor Commented Nov 17, 2012 at 21:23

Add a comment |

2 Answers 2

Sorted by: Reset to default 13

The problem is that the bounds and center are not set yet. To get them you need to do it in a listener on zoom_changed (for zoom); center_changed (for center). Available Map events are listed in the documentation, under events. You can use the addListenerOnce to only do it once (the first time).

Something like this will work:

var oldZoom = null;
var oldCenter = null;
google.maps.event.addListenerOnce(map, "zoom_changed", function() { oldZoom = map.getZoom(); });
google.maps.event.addListenerOnce(map, "center_changed", function() { oldCenter = map.getCenter(); });

proof of concept fiddle

You won't be able to use them until after those events have fired.

code snippet:

var map;
var ENDZOOM = 0;

function initialize() {

  // CUSTOM PLACES
  var latlng = new google.maps.LatLng(51, 10);
  var germany = new google.maps.LatLng(51, 10);
  var myLatlng = new google.maps.LatLng(49, 12);

  // DEFINE STYLE
  var styles = [{
    "stylers": [{
      "invert_lightness": true
    }]
  }];

  // MARKER STYLES
  var coin_image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
  var merch_image = 'http://maps.google.com/mapfiles/ms/micons/yellow.png';

  // DEFINE OPTIONS FOR MAP
  var myOptions = {
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
      position: google.maps.ControlPosition.LEFT_TOP
    },
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };


  // CREATE MAP OBJECT
  map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

  map.setOptions({
    styles: styles
  });

  // select zoom, etc by defining 2 points
  var southWest = new google.maps.LatLng(45, -10);
  var northEast = new google.maps.LatLng(55, 15);
  var bounds = new google.maps.LatLngBounds(southWest, northEast);
  map.fitBounds(bounds);

  placeMarker(southWest);
  placeMarker(northEast);

  // Place Random Markers
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  for (var i = 0; i < 50; i++) {
    var location = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
      southWest.lng() + lngSpan * Math.random());
    var marker = new google.maps.Marker({
      position: location,
      map: map,
      icon: merch_image
    });
    var j = i + 1;
    marker.setTitle(j.toString());
  }


  // TRANSACTION MARKERS

  // ONE FULL CYCLE
  // set marker

  var trans_marker = new google.maps.LatLng(52.31799, 13.241904);
  var marker = new google.maps.Marker({
    position: trans_marker,
    map: map,
    animation: google.maps.Animation.DROP,
    title: "Hello World!",
    icon: coin_image
  });

  var oldZoom = null;
  var oldCenter = null;
  google.maps.event.addListenerOnce(map, "zoom_changed", function() {
    oldZoom = map.getZoom();
    console.log(oldZoom);
    console.log(oldCenter.toString());
  });
  google.maps.event.addListenerOnce(map, "center_changed", function() {
    oldCenter = map.getCenter();
  });



  console.log(map);
  oldMap = map;
  console.log(oldMap);


  // pan to marker
  setTimeout(function() {
    map.panTo(trans_marker)
  }, startDelayed(3000));

  // zoom in on marker
  setTimeout(function() {
    zoomIn(ENDZOOM)
  }, startDelayed(1000));

  // show info window
  var contentString = "<h3>Döner @ Coco Banh</h3>";
  contentString += ("<p>SumUp was used to pay for a Döner at Coco Banh in Berlin, Germany</p>");
  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  setTimeout(function() {
    infowindow.open(map, marker)
  }, startDelayed(8000));
  setTimeout(function() {
    infowindow.close()
  }, startDelayed(5000));

  // zoom out again
  setTimeout(function() {
    zoomOut(oldZoom)
  }, startDelayed(2000));

  // center again
  setTimeout(function() {
    map.panTo(oldCenter)
  }, startDelayed(8000));


  infowindow = new google.maps.InfoWindow({
    content: contentString
  });
}
google.maps.event.addDomListener(window, "load", initialize);

function placeMarker(latlng) {
  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  })
}

function startDelayed() {};

function zoomIn(zoom) {};

function zoomOut(zoom) {};

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

If you get the following error when trying to use getZoom():

TypeError: undefined is not an object (evaluating 'mapRef.current.getZoom')

You can find the current zoom at:

mapRef.current.state.map.zoom

For example, I am using a react-google-maps/api component where

 const onZoomChanged = () => {
    if (mapRef.current) {
      setZoom(mapRef.current.state.map.zoom);
    }
  };

  return (
    // ... Modal and other components ...
    <GoogleMap
      mapContainerStyle={mapContainerStyle}
      center={mapCenter}
      zoom={zoom}
      ref={mapRef} // Correctly attaching ref here
      onZoomChanged={onZoomChanged}
      onClick={handleMapClick}
      // ... other props ...
    >
      {markerPosition && <Marker position={markerPosition} />}
    </GoogleMap>
    // ... rest of the component ...
  );
};

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Maps Api V3: getCenter() and getZoom() not working - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)