Using Google Maps. AJAX Google Maps is an AJAX Application Asynchronous JavaScript and XML, is a web...

Using Google Maps

AJAX

Google Maps is an AJAX Application

Asynchronous JavaScript and XML, is a web developmenttechnique for creating interactive web applications. Theintent is to make web pages feel more responsive by exchanging small amounts of data with the server behindthe scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This ismeant to increase the web page's interactivity, speed, andusability.

First Steps – get a map key

You will need to get a key to use Google Maps inside your site.

It is best to register using a higher level domain (mysite.com/), instead of a sub folder of the domain. (mysite.com/subfolder/)

This will reduce the number of keys that you will need to register for.

www.google.com/apis/maps/

Page Elements

Map

Controls

Markers

Sidebar

Basics

var map = newGMap2(document.getElementById("map"));map.setCenter(new GLatLng(37.4419, -122.1419), 13);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>My Google Maps Hack</title> <style type="text/css"> v\:* { behavior:url(#default#VML); } </style> <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script> </head>

1- Set up the page

2- Generate map

**references html element with id == map

ControlsGSmallMapControl() Creates a control with

buttons to pan in four directions, and zoom in and zoom out.

GLargeMapControl() Creates a control with buttons to pan in four directions, and zoom in and zoom out, and a zoom slider.

GSmallZoomControl() Creates a control with buttons to zoom in and zoom out.

GScaleControl() Creates a control that displays the map scale.

GMapTypeControl() Creates a control with buttons to switch between map types.

GOverviewMapControl() Creates a control which displays the current map selection area

Examples

Map opens with markers that opens an info window when clicked

Map opens with markers that open a tabbed info window when clicked

Using an icon class to customize markers

Utilizing draggable markers

Utilizing polyline markers

http://www.google.com/apis/maps/documentation/markerinfowindow.html

http://www.google.com/apis/maps/documentation/tabbedinfowindow.html

http://www.google.com/apis/maps/documentation/iconclass.html

http://www.google.com/apis/maps/documentation/dragmarker.html

http://www.google.com/apis/maps/documentation/polylineencoding.html

Geocodes

Geocoding is the process of assigning geographic identifiers (e.g., codes or geographic coordinates expressed as latitude-longitude) to map features and other data records, such as street addresses. You can also geocode media, for example where a picture was taken, IP Addresses, and anything that has a geographic component. With geographic coordinates, the features can then be mapped and entered into Geographic Information Systems.

Google Maps uses geocodes (latitude and longitude) to find points on the map.A built-in geocoder can be accessed from within the JavaScript using the GClientGeocoder object. The getLatLng method can be used to convert an address into a GLatLng. Because geocoding involves sending a request to Google's servers, it can take some time. To avoid making your script wait, you need to pass in a function to call after the response comes back.

This example uses the built-in geocoder to find a point on the map after submitting a complete address.

http://www.google.com/apis/maps/documentation/geocoder.html

API OverviewIf you only want to use the map to display your content, then you need to know these classes, types, and functions:

GMap2GMapOptionsGInfoWindowGInfoWindowTabGInfoWindowOptionsGMarkerGMarkerOptionsGPolylineGIconGPoint

GSizeGBoundsGLatLngGLatLngBoundsGControlGEventGEventListenerGXmlHttpGXmlGXslt

GLogGDraggableObjectGGeoStatusCodeGGeoAddressAccuracyGClientGeocoderGGeocodeCacheGFactualGeocodeCacheGDownloadUrlGBrowserIsCompatible

If you want to extend the functionality of the maps API by implementing your own controls, overlays, or map types, then you also need to know these classes and types:

GMapPaneGOverlayGControlGControlPositionGControlAnchor

GMapTypeGMapTypeOptionsGTileLayerGTileLayerOverlayGCopyrightCollection

GCopyrightGProjectionGMercatorProjection

http://www.google.com/apis/maps/documentation/reference.html#GMapOptions

http://www.google.com/apis/maps/documentation/reference.html#GInfoWindow

http://www.google.com/apis/maps/documentation/reference.html#GInfoWindowTab

http://www.google.com/apis/maps/documentation/reference.html#GInfoWindowOptions

http://www.google.com/apis/maps/documentation/reference.html#GMarker

http://www.google.com/apis/maps/documentation/reference.html#GMarkerOptions

http://www.google.com/apis/maps/documentation/reference.html#GPolyline

http://www.google.com/apis/maps/documentation/reference.html#GIcon

http://www.google.com/apis/maps/documentation/reference.html#GPoint

http://www.google.com/apis/maps/documentation/reference.html#GSize

http://www.google.com/apis/maps/documentation/reference.html#GBounds

http://www.google.com/apis/maps/documentation/reference.html#GLatLng

http://www.google.com/apis/maps/documentation/reference.html#GLatLngBounds

http://www.google.com/apis/maps/documentation/reference.html#GControlImpl

http://www.google.com/apis/maps/documentation/reference.html#GEvent

http://www.google.com/apis/maps/documentation/reference.html#GEventListener

http://www.google.com/apis/maps/documentation/reference.html#GXmlHttp

http://www.google.com/apis/maps/documentation/reference.html#GXml

http://www.google.com/apis/maps/documentation/reference.html#GXslt

http://www.google.com/apis/maps/documentation/reference.html#GLog

http://www.google.com/apis/maps/documentation/reference.html#GDraggableObject

http://www.google.com/apis/maps/documentation/reference.html#GGeoStatusCode

http://www.google.com/apis/maps/documentation/reference.html#GGeoAddressAccuracy

http://www.google.com/apis/maps/documentation/reference.html#GClientGeocoder

http://www.google.com/apis/maps/documentation/reference.html#GGeocodeCache

http://www.google.com/apis/maps/documentation/reference.html#GFactualGeocodeCache

http://www.google.com/apis/maps/documentation/reference.html#GDownloadUrl

http://www.google.com/apis/maps/documentation/reference.html#GBrowserIsCompatible

http://www.google.com/apis/maps/documentation/reference.html#GOverlay

http://www.google.com/apis/maps/documentation/reference.html#GControl

http://www.google.com/apis/maps/documentation/reference.html#GControlPosition

http://www.google.com/apis/maps/documentation/reference.html#GControlAnchor

http://www.google.com/apis/maps/documentation/reference.html#GMapType

http://www.google.com/apis/maps/documentation/reference.html#GMapTypeOptions

http://www.google.com/apis/maps/documentation/reference.html#GTileLayer

http://www.google.com/apis/maps/documentation/reference.html#GTileLayerOverlay

http://www.google.com/apis/maps/documentation/reference.html#GCopyrightCollection

http://www.google.com/apis/maps/documentation/reference.html#GCopyright

http://www.google.com/apis/maps/documentation/reference.html#GProjection

PHP Class

GoogleMapAPI 2.2 php classAuthor: Monte Ohrt [email protected] Copyright 2005-2006 New Digital Group http://www.phpinsider.com/php/code/GoogleMapAPI/

This class allows you to dynamically generate your maps from a simple address and set options at runtime. Using this class will allow you to render maps from database entries and customize the display regarding user preferences or other factors.

The link above contains all necessary resources and basic documentation for implementing the class.

Mashups

http://www.onnyturf.com/subway/

http://www.weatherbonk.com/weather/index.jsp

http://www.1001seafoods.com/fishing/fishing-maps.php

http://www.mapgasprices.com/

Many new web applications today integrate Google Maps and other web service APIs.

Other Links

1. http://www.econym.demon.co.uk/googlemaps/extensions.htm

2. http://geocoder.us/3. http://www.lifehack.org/articles/lifehack/essential-

resources-for-google-maps.html4. http://rpc.geocoder.us/service/csv?

address=440+West+Franklin+St,+Chapel+Hill+NC5. http://www.xml.com/pub/a/2005/08/10/google-maps.html6. http://www.directionsmag.com/article.php?

article_id=2120&trv=17. http://mapki.com/wiki/Main_Page8. http://www.econym.demon.co.uk/googlemaps/index.htm9. http://dotnet.sys-con.com/read/171162.htm10. http://mapmaker.donkeymagic.co.uk/11. http://www.econym.demon.co.uk/googlemaps/

reference.htm12. http://mapki.com/coordtotile.html

Using Google Maps. AJAX Google Maps is an AJAX Application Asynchronous JavaScript and XML, is a web...

Documents

Transcript of Using Google Maps. AJAX Google Maps is an AJAX Application Asynchronous JavaScript and XML, is a web...