Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google maps API getProjection() not working in V3

According to the API ref, the map object should have a getProjection method:
http://code.google.com/apis/maps/documentation/v3/reference.html#Map

While loading the map in this example should alert the x,y point, but instead throws the value as undefined. This is the below sample code called in onload.

function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    alert("projection:" + map.getProjection());
}
like image 809
Kiran Kumar Avatar asked Jun 19 '13 12:06

Kiran Kumar


People also ask

Is Google Maps API no longer free?

Note that the Maps Embed API, Maps SDK for Android, and Maps SDK for iOS currently have no usage limits and are at no charge (usage of the API or SDKs is not applied against your $200 monthly credit).

What is MVCArray?

An MVCArray inherits from MVCObject so you can set or get its properties, bind some of them, be binded by other objects, etc. But also, it implements some extras. It implements several of the methods you could use in a native javascript array, like push , pop , forEach , etc, so several google.

How do I center a Google map?

Please go to your map and drag and drop your map to the position you wish. You can also zoom in your map a little bit with mouse wheel or zoom cotrols on the bottom right corner of the map. Please remember to save your map after any changes. Hope that helps.


1 Answers

It isn't available until the map is finished initializing. You have to wait on the "projection_changed" event before accessing it.

function initialize() {
 var mapOptions = {
   zoom: 8,
   center: new google.maps.LatLng(-34.397, 150.644),
   mapTypeId: google.maps.MapTypeId.ROADMAP
   };
 map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
 google.maps.event.addListenerOnce(map,"projection_changed", function() {
   alert("projection:"+map.getProjection());
 });
}

proof of concept fiddle

code snippet:

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
  google.maps.event.addListenerOnce(map, "projection_changed", function() {
    console.log("projection:" + map.getProjection());
    document.getElementById('output').innerHTML = "map.getProjection()=" + JSON.stringify(map.getProjection(), null, ' ');
  });
}
/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map-canvas {
  height: 80%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="output"></div>
  <div id="map-canvas"></div>

  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly" async></script>
</body>

</html>
like image 58
geocodezip Avatar answered Sep 17 '22 20:09

geocodezip