<img height="1" width="1" style="display:none;" alt="" src="https://px.ads.linkedin.com/collect/?pid=299788&amp;fmt=gif">

Google Maps APIs - An Introduction

Software Development, Software Solutions

By Justin Freeman

One of the more interesting developer tools I have come across is Google Maps API. It is very simple to use and incorporate into your web application if you need to specify a location or enable searching for a specific locations of things, whether they be stores, banks, libraries etc. I would talk about 2 of the Google Maps APIs and how to use them.

Before We Begin

Before we get started, you should know that you need a Google key to access any of the Google APIs (nothing is free, right?). They are relatively simple to get, especially if you are just developing for your own learning experience. Anyway, once you receive a key you just create your JavaScript URL.
It should looks something like this:
[html]src=&amp;quot;https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&amp;amp;sensor=false&amp;amp;libraries=places&amp;quot;[/html]
After you import that into your JSP page, you are ready to start using Google Maps! All you really need on your JSP to display the map is the tag:
[html]&amp;lt;div id=&amp;quot;map_canvas&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;[/html]

Google Geocoding API

First, let’s talk about the Google Geocoding API. Let’s write a little JavaScript to place a position on the map.
[javascript]
var map;
var address = “4 Pennsylvania Plaza New York NY 10001”;;
while (!(typeof google === 'object' &amp;amp;&amp;amp; typeof google.maps === 'object')) {}
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
var mapOptions = {
zoom: 12
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(&amp;quot;map_canvas&amp;quot;), mapOptions);
map.setCenter(results[0].geometry.location);
}
});
[/javascript]
Here is a screenshot of the map:
web application development
The code is pretty simple. You create a Google Geocoder object and call the geocode method. It returns you a Geocode object that lots of data about the location. If you only care about the latitude and longitude of the location, then you can easily plot your location on the map with this tidbit:
[javascript]var marker = new google.maps.Marker({map: map, position: results[0].geometry.location});[/javascript]
If you need to adjust the zoom level, you can change that under the mapOptions variable. I chose 12 randomly but something like 7 would have been more appropriate here since NYC has so many streets in that area.

Google Places Library

Now let’s talk about the Google Places Library. This API is useful if you are looking to search for and plot several locations in your web application. A simple example is where you want to find the number of Chase banks in a certain area. Your script would look something like this:
(NOTE: for this example, I used the coordinates from the previous example to make this simpler)
[javascript]
var request = {location: latlng,mrankBy: google.maps.places.RankBy.DISTANCE,
name: 'Chase Bank', types: ['bank']};
var service = new google.maps.places.PlacesService(this.map);
service.search(request, dojo.hitch(this, callback));
callback = function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i &amp;lt; results.length; i++) {
var marker = new google.maps.Marker({map: map, position: results[0].geometry.location}); break;
}
}
};
[/javascript]
And a screenshot:
web application development
And now you have the original location and the location of a Chase Bank near the selected location.

Conclusion

These are just some of the basics of using Google Maps APIs. There is a lot more to learn, but hopefully this introduction will encourage you to dive in on your own and explore the API for whatever web application you are developing.

TAGS: Software Development, Software Solutions

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Subscribe to Our Newsletter

Recent Blog Posts