Presentation is loading. Please wait.

Presentation is loading. Please wait.

Using Google Maps. AJAX Google Maps is an AJAX Application Asynchronous JavaScript and XML, is a web development technique for creating interactive web.

Similar presentations


Presentation on theme: "Using Google Maps. AJAX Google Maps is an AJAX Application Asynchronous JavaScript and XML, is a web development technique for creating interactive web."— Presentation transcript:

1 Using Google Maps

2 AJAX Google Maps is an AJAX Application Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page's interactivity, speed, and usability.

3 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.

4 Page Elements Map Controls Markers Sidebar

5 Basics var map = newGMap2(document.getElementById("map")); map.setCenter(new GLatLng( , ), 13); My Google Maps Hack v\:* { behavior:url(#default#VML); } 1- Set up the page 2- Generate map **references html element with id == map

6 Controls GSmallMapControl()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

7 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 markersUtilizing polyline markers

8 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.

9 API Overview If you only want to use the map to display your content, then you need to know these classes, types, and functions: GMap2 GMapOptions GInfoWindow GInfoWindowTab GInfoWindowOptions GMarker GMarkerOptions GPolyline GIcon GPoint GSize GBounds GLatLng GLatLngBounds GControl GEvent GEventListener GXmlHttp GXml GXslt GLog GDraggableObject GGeoStatusCode GGeoAddressAccuracy GClientGeocoder GGeocodeCache GFactualGeocodeCache GDownloadUrl GBrowserIsCompatible 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: GMapPane GOverlay GControl GControlPosition GControlAnchor GMapType GMapTypeOptions GTileLayer GTileLayerOverlay GCopyrightCollection GCopyright GProjection GMercatorProjection

10 PHP Class GoogleMapAPI 2.2 php class Author: Monte Ohrt Copyright New Digital Group 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.

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

12 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.html 4.http://rpc.geocoder.us/service/csv?address=440+West+Franklin+ St,+Chapel+Hill+NC 5.http://www.xml.com/pub/a/2005/08/10/google-maps.html 6.http://www.directionsmag.com/article.php?article_id=2120&trv=1 7.http://mapki.com/wiki/Main_Page 8.http://www.econym.demon.co.uk/googlemaps/index.htm 9.http://dotnet.sys-con.com/read/ htm 10.http://mapmaker.donkeymagic.co.uk/ 11.http://www.econym.demon.co.uk/googlemaps/reference.htm 12.http://mapki.com/coordtotile.html


Download ppt "Using Google Maps. AJAX Google Maps is an AJAX Application Asynchronous JavaScript and XML, is a web development technique for creating interactive web."

Similar presentations


Ads by Google