How to Add Interactive Area Maps to Website

Interactive Area Maps Based on Google Map API, Yahoo map API and Flash Stand alone area maps.

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

For more sample of Google Map API embedded to website and to google map tutorials visit: How to Add Google Map to your Website, Blog?


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

map info box options

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

Preview Canal System Map here

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

google map with flash video player embedded Preview Google map with custom flash video player embedded inside map info box here
Sample for Yahoo Map API embedded to website

Sample for Yahoo Map API embedded to web site preview here

map info box options Downtown Syracuse Map preview it here
Connective Corridor on Syracuse NY The Connective Corridor in Syracuse Interactive Map preview it here
Connective Corridor on Syracuse NY Cleveland City Living – Interactive Map preview here
purdue university map Purdue University Campus Map preview here
odessa city interactive map Odessa City interactive map:
Flash map, Java map online panorama overview
New Mexico Stories interactive map 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
Google My Maps Mashup: DC Taxi Zones Google My Maps Mashup: DC Taxi Zones: view here
US Presidents and their spouse(s) - Their Birth Places on Google Maps US Presidents and their spouse(s) – Their Birth Places on Google Maps.

For history buffs and school kids, a mashup showing where presidents/first ladies were born. From George Washington through Barack Obama.


Preview birth places map here

MyMaps GeometryControls Example Google Maps:
My Maps Geometry Controls Example
preview here.
How was Build NY Subway System Online Interactive Map find our here

Examples of using Google Maps – Google Maps Mashups

http://googlemapsmania.blogspot.com/

http://www.2itch.com/

http://www.programmableweb.com/api/google-maps/mashups

Google Maps API Examples and Test Pages

Hiding Google Map controls when not needed

Simple custom marker

Official Google Maps API Demo Gallery

Customizing GMaps

Google Maps API Examples

Overlaying Images on the Map

MCslp Map Works

http://econym.org.uk/gmap/egeoxml.htm

Mouseover tooltip

 

Detailed Google Map Zoom

http://gmaps-utility-library.googlecode.com/svn/trunk/snaptoroute/1.0/examples/detailzoom.html

Map explorer with scroll- down selection.

http://code.google.com/p/mymapexplorer/

http://johnbeales.com/demos/mtw/

http://channel9.msdn.com/posts/keydet/JavaScript-Intellisense-for-the-Virtual-Earth-Map-Control/

Google map API:

Google Maps API Reference

Google code map examples

Overlays

Google map custom icons

Polyline Utility

Ground overlay sample

http://code.google.com/apis/maps/documentation/examples/groundoverlay-simple.html

Advanced Map Overlay

http://code.google.com/apis/maps/documentation/examples/tile-detector.html

http://code.google.com/apis/maps/documentation/examples/layer-simple.html

Google Map Tools and Google map Tutorials.

http://code.google.com/apis/maps/documentation/polylineutility.html

http://code.google.com/apis/ajax/playground/?exp=maps#map_simple

gmaps-utility-library.googlecode.com

http://econym.org.uk/gmap/egeoxml.htm

If you looking for custom marker for your Google Map use Marker Icon Options:

Wizard
http://gmaps-utility-library-dev.googlecode.com/svn/trunk/