What is Google Maps API
Google Maps API is an interface that lets you embed Google Maps into your own pages.
You may ask ... what do I need them?
It is pretty simple ... do you want to show your visitors where your office is located and how can they get to you from anywhere in the world? do you want to plot on a map all your sales so you can see some nice statistics? and many many other cool ideas.
Prerequisites
You need to have basic/medium JavaScript skills in order to be able to understand their code and use it in your projects.
Obtaining an API key
In order to use the API you must first register for an access key here : Registration page for Google Maps API Key . It is free and it takes less than a minute to get it.
The current working version is v2 but once v3 will be in place the API key will not be needed anymore.
Hello World! for Google Maps API
Here is a "Hello World!" example for Google Maps API v3 (so ... no need for the API access key) :)
<html> <head> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(45.792784,24.152069); var myOptions = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
Just copy & paste the code above in a new file, rename it hello.html and then open it in a browser. You will see a map showing the city of Sibiu (from where I did wrote this tutorial).
I will explain the code in the next tutorials so you fully understand how to handle Google Maps API.