Thursday, July 3, 2014

A Couple of Common Maps API Errors

I think it's worth occasionally calling out common errors using the Google Maps API. I run into these periodically, and I am calling them out not because people are doing something done but because they are easy to make and I wanted to record them. I'll probably make this a semi-regular thing I post about. If you run into questions about using our API, the Google Maps API support page has the right links and resources to use. In this post, I've got two that I see a lot. Both are for the JavaScript Maps API.

Using undocumented methods and properties

It's not uncommon that I run into people complaining on Twitter where they say something like "Google has changed the properties of this object so that Latitude is no longer in the .a property, it's now in .b. Thanks Google for breaking my site! :-)"

FYI, the Google Maps API has no object with a .a property. When Google compiles objects, the object may be represented with a .a property to the API. People find this out using tools like Firebug and Chrome Dev Tools and then come to rely on them, not realizing that the actual object is a say a google.maps.LatLng object that has methods .lat() and .lng() and that's the right way to get those values. And Google won't change those with a version change. There's no such guarantee about undocumented methods and properties.

Making the map invisible

Creating a google.maps.Map object you give it a node in the DOM to place the map. Usually people put this in a div object. However, developers often forget to give the node a size, say a height and width. And they're confused then when nothing shows up on their map. You can see it in the Simple Map sample if you click on the Javascript + HTML tab.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
  zoom: 8,
  center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>


1 comment:

Aditya Mani said...

Is it possible to call a places autcomplete API of the nearby hospitals? (Not establishments!)