Getting a Google Map to show in a web page requires an astonishingly small amount of JavaScript. In this article, we’ll show the user where they are on earth in 12 lines of code.
Since 2005, the Google Maps API has driven one of the most popular web-based applications ever: Google Maps. What I find so appealing about the Google Maps JavaScript API is the relatively small amount of code needed to display a map in a web page. And of course when you do, it’s pretty magical: you are prompted by the browser to allow the page to use your location, and “poof” there you are!
The Google Maps API is a topic worthy of a deep discussion. In this article, we’ll just cover the absolute basics needed to get a map on the page. I chose to limit Part I to this scope because quite often, if you can just “get it to work,” a topic will seem more approachable, and easier to digest.
Ok, let’s show a Google Map on a web page!
Example # 1
1 2 3 |
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(successHandler); } |
In Example # 1, we test to see if the user’s browser supports Geolocation. Specifically, we check to see if the navigator object has a property called “geolocation.” If this property does exist, then we call its .getCurrentPosition() method, passing it a callback. In this case, the callback is a function named “successHandler,” which we will discuss next.
Example # 2
1 2 3 4 5 6 7 8 9 10 11 |
var successHandler = function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; map = new google.maps.Map(document.getElementById("mapHolder"),{ zoom: 17, center: new google.maps.LatLng(latitude, longitude), mapTypeId: google.maps.MapTypeId.ROADMAP } ); } |
In Example # 2, we have the successHandler function. This is the callback that we have provided to the getCurrentPosition() method. This callback will receive a “position” object as its first argument. That position object holds the data that we will need to provide to the Google Maps API.
Using the latitude and longitude properties of the position object’s “coords” object, we can now instantiate the Map() constructor, which is a property of the google.maps object. When instantiating the Map() constructor, we provide two arguments: a reference to the DOM element in which the map will be displayed, and an object literal, containing display settings:
zoom: Tells the map how much to zoom in when first displaying
center: the “place on earth” on which the map should be centered. Here we instantiate the LatLang() constructor, passing it the latitude and longitude values that were obtained by the geolocation.getCurrentPosition() method
mapTypeId: The type of map to show. The four possible values are: ROADMAP, SATELLITE, HYBRID, and TERRAIN
Example # 3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Geolocation API Example</title> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <style> #mapHolder { height:500px; width:500px; margin:0 auto; } </style> </head> <body> <div id="mapHolder"></div> <script type="text/javascript"> if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(successHandler); } function successHandler(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; map = new google.maps.Map(document.getElementById("mapHolder"),{ zoom: 17, center: new google.maps.LatLng(latitude, longitude), mapTypeId: google.maps.MapTypeId.ROADMAP } ); } </script> </body> </html> |
In Example # 3, we have the full code for this article’s working demo. Here, the exact same code that we discussed in Examples 1 & 2 are used in the context of a full web page.
Here is the JsFiddle.net link for this article’s working demo: http://jsfiddle.net/uQ35v/
Summary
In this article we learned about the absolute basics of the Google Maps JavaScript API. We discussed the need to implement the geolocation.getCurrentPosition() method to get the user’s location and how to provide that information to the Google Maps API to show a basic map on the page. In Part II, we will discuss some of the features that are available when displaying a Google map in a web page.
Helpful Links for the Google Maps JavaScript API.
https://developers.google.com/maps/documentation/javascript/reference
https://developers.google.com/maps/documentation/javascript/tutorial
[…] Getting Started with the Google Maps JavaScript API – Part II: Adding a Marker […]