Home > Ecommerce School > 3. E-commerce Articles > Implementing Google Maps into Your Website

Implementing Google Maps into Your Website

Help customers locate your business on the web.

Google Maps is a free web mapping service application and technology rendered by Google. The application contains street maps, a route planner, and an urban business locator for countries around the world.

Implementing Google Maps into your website is easy. Google Maps provides an Application Programming Interface (API) that makes it easy for developers to embed custom maps into any website they want. By leveraging the full capabilities of Google Maps API, one can enjoy several rich and interactive map-based services including the Google Maps website, Google Ride Finder, and embedded maps on third-party websites.

Here’s what you need to know in order to work with the Google Maps API. 
First, sign up for a Maps API key here. A single Maps API key is valid for a single “directory” on your web server. For instance, if you sign up for the URL http://www.test.com/mysite, the key you obtain will be good for all URLs included in the http://www.test.com/mysite/ directory. The only catch is you must have a Google Account to obtain a Maps API key, since your API key is connected with it. Each website that embeds the Google Maps application must have its own API key. This ensures reduction in spam and abuse of service.

Second, after receiving the API key, you’ll require coordinates that tell the API about the center of your map. Addresses like “1600 Park Avenue, Mountain View, CA” need to be converted into geographic coordinates like “latitude 37.43 and longitude -122.09”. This process of converting addresses to geographic coordinates is termed as geocoding. The Google Maps API includes a geocoding service that can be accessed via an HTTP request or a GClientGeocoder object.

Google Maps provide access to geocoders to convert the address serving as the center of your map into latitude and longitude coordinates. You are now equipped to render this map on a web page. 
Third, to render a map you’ll need to add a link (unique API key for your site) to the Google Maps 

API in the Head section of your HTML page. After adding the link, specify an empty DIV element on your page where you’d like the map to appear. The API automatically displays and scales the map interface to this DIV element.

The last step includes customising your map presentation. The standard way to present Google Map on your web page is by showing an illustrated map that can be easily dragged; a map that centers on your specified position. In addition, you can use the more advanced features to customise your map presentation. For instance, you can add controls to pan and zoom the map, and to switch between the illustrated and satellite views.

If you are keen on introducing animation and special visual effects, you can use an animation API to animate certain actions. To display precise locations, you can include markers and pointers to the map along with callouts that supply more information. The information in the callouts can be customised; even the callouts themselves can be customised to contain tabs, display custom images, and so on. By including a few lines of JavaScript, you can provide your customers with an interface to obtain directions from their location to your store.

Finally, one thing seems certain. After implementing Google Maps into your website, your customers will never face any problem in locating your physical address on the Internet.


Translate and Localize your website with 'Localizer pluggin

Shopping Cart Software by Ashop