Please note Published on: Mar 10, 2009 so some link may not work, and Google API changed since.

How to use and embed Google Map to website.

Google Maps provides a slick, highly responsive visual interface built using AJAX technologies along with detailed street and aerial imagery data, and an open API allowing customization of the map output including the ability to add application-specific data to the map. To make it even better, Google currently provides access to this service for FREE! In this article we’ll examine some of the basic capabilities provided through the Google Maps product.

What is Google Maps?
Google Maps provides a highly responsive, intuitive mapping interface with embedded, detailed street and aerial imagery data. In addition, map controls can be embedded in the product to give users full control over map navigation and the display of street and imagery data. Users can also perform map panning through the use of the “arrow” keys on a keyboard, as well as by dragging the map via the mouse. All of these capabilities combine to provide a compelling product, but the primary driver behind its rapid acceptance as an Internet mapping viewer is its ability to customize the map to fit application-specific needs. For instance, a real estate agency might develop a Web-based application that allows end user searching for residential properties to display the results on a Google Maps application. To get a good idea of the diversity of applications that are possible through Google Maps, spend some time at Mike Pegg’s Google Maps Blog.

Google Maps Fundamentals
At this time, the Google Maps API is a free beta service. However, Google reserves the right to put advertising on the map at any point in the future, so keep this in mind as you begin to develop Google Maps applications. Your applications may also need frequent code changes since this product is still in beta and subject to changes in the API.

Before you can get started developing Google Maps applications you will need to sign up for an API key. When you sign up for an API key, you must specify a Web site URL that will be used in your development. One problem frequently associated with Google Maps is that you must acquire a unique key for each directory that will serve Google Maps. Google Maps will generate a unique keycode for the directory that you specify. You must use this keycode in each script that accesses the Google Maps API.

Google also provides documentation for its product, including full documentation of the classes, methods and events available for the Google Maps objects as well as code examples to get you started. In addition, Google provides a blog and discussion group for additional information on using the API.

A Basic Google Map
When you sign up with Google Maps, an API key will be generated. Make sure you save this key as you will need it for all Google Maps applications that you develop for the particular URL directory that was specified. In addition to the API key, Google will also generate an example Web page centered on the Palo Alto area (in the vicinity of the Google headquarters). You can copy and paste the HTML and JavaScript generated into a plain text file, save it to the Web server directory you specified when you generated the key, and then display the map in your Web browser.

Embedding a map into a website or blog

New York State’s Contemporary Canal System Educator’s Guide interactive Area Map with Directions – created for WCNY

Preview example with multiple tabs. If you zoom very close to first marker above WCNY we will see – info box with several tabs
Also it show how markers and polylines might be used. It is possible to write and draw any letters and shapes on Google map. Google map developer might use static or animated images such as jpg, png, and gif as map markers

New Mexico Stories Interactive Map.
A community site that encourages residents and New Mexico visitors to share their stories and experiences in the state. Some of the photographs and images that appear are from museums and cultural institutions. Preview map here