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.
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.
Using undocumented methods and properties
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>
<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>
6 comments:
Is it possible to call a places autcomplete API of the nearby hospitals? (Not establishments!)
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
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
"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
"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
A Couple of Common Maps API Errors is an insightful guide for developers navigating potential pitfalls. The blog's detailed analysis and troubleshooting tips showcase expertise in addressing mapping challenges. UsePromos to access this invaluable resource and streamline your mapping projects with confidence.
Post a Comment