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>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
      html, body, #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
    <script src=""></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);

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


Unknown said...

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

Barbara Nimmo said...

I stumbled upon your insightful blog post about common Maps API errors, and I must say it was both informative and helpful.
cash app barcode to load money at 7 eleven

Ashlee Rolfson said...

Your expertise shines through, making complex topics easier to understand for readers like me.Thanks again for sharing your knowledge, and I look forward to reading more of your valuable content.
how old do you have to work at walmart

Timothee Lambert said...

"Your blog has become my go-to for staying informed and inspired. Your ability to address current trends and timeless topics alike showcases your versatility. Thanks for consistently delivering content that resonates with a wide audience."
piada coupon

Abigale Huels said...

"Your blog has a way of sparking curiosity. The engaging writing style and the thought-provoking questions you pose invite readers to think deeper about the topics at hand. It's this ability to inspire curiosity that sets your blog apart."
applebees coupons 10 off $30