Google Maps API
The Google Maps API gives developers access to the world’s most complete map. Google has been processing tremendous amounts of data and compiling it all into this project which has been growing in complexity and value since it’s undertaking in 2004. When using the API, you get full control over the map which allows you to customize it to fit your exact needs.
Technical Details
There are many options for developers wishing to implement Google Maps functionality into their application. There is a JavaScript API as well as a Flash API. I have personal experience with the Flash version of the API which can be integrated into any Flash, Flex, or Air application, making it very flexible. Developers can integrate Google Maps into any website, desktop, or even mobile application (now better than ever).
E-Commerce Applications
There are many benefits to integrating a map into an E-commerce application. Here are some ideas I’ve come up with, not necessarily just for e-commerce:
- Integrate with order tracking API to visually show the user where there shipment is.
- Add insight as to where other users have purchased a given item from
- Traditional store locator
- Augmented reality store locator (mobile device)
- Live stream user status updates
- Live stream of user reviews
Examples
Some sites that have made some amazing applications with the Google Maps API:
A Simple Implementation
Try it for yourself, it only takes a second!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Google Map</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<style type="text/css">
body
{
margin: 0;
padding: 10px 20px 20px;
font-family: Arial;
font-size: 16px;
}
#map_container
{
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 600px;
}
#map_canvas
{
width: 600px;
height: 400px;
}
</style>
<script type="text/javascript">
google.load('maps', '3', {other_params: 'sensor=false'});
google.setOnLoadCallback(initialize);
function initialize()
{
var center = new google.maps.LatLng(44.5057, -73.1266);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
</script>
</head>
<body>
<div id="map_container">
<div id="map_canvas"></div>
</div>
</body>
</html>