Using Google Maps AJAX Google Maps is an

  • Slides: 12
Download presentation
Using Google Maps

Using Google Maps

AJAX Google Maps is an AJAX Application Asynchronous Java. Script and XML, is a

AJAX Google Maps is an AJAX Application Asynchronous Java. Script 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.

First Steps – get a map key You will need to get a key

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

Page Elements Map Controls Markers Sidebar

Basics 1 - Set up the page <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML

Basics 1 - Set up the page <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> <html xmlns="http: //www. w 3. 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> 2 - Generate map var map = new. GMap 2(document. get. Element. By. Id("map")); map. set. Center(new GLat. Lng(37. 4419, -122. 1419), 13); **references html element with id == map

Controls GSmall. Map. Control() Creates a control with buttons to pan in four directions,

Controls GSmall. Map. Control() Creates a control with buttons to pan in four directions, and zoom in and zoom out. GLarge. Map. Control() Creates a control with buttons to pan in four directions, and zoom in and zoom out, and a zoom slider. GSmall. Zoom. Control() Creates a control with buttons to zoom in and zoom out. GScale. Control() Creates a control that displays the map scale. GMap. Type. Control() Creates a control with buttons to switch between map types. GOverview. Map. Control() Creates a control which displays the current map selection area

Examples Map opens with markers that opens an info window when clicked Map opens

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

Geocodes Geocoding is the process of assigning geographic identifiers (e. g. , codes or

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 Java. Script using the GClient. Geocoder object. The get. Lat. Lng method can be used to convert an address into a GLat. Lng. 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.

API Overview If you only want to use the map to display your content,

API Overview If you only want to use the map to display your content, then you need to know these classes, types, and functions: GSize GLog GMap 2 GBounds GDraggable. Object GMap. Options GLat. Lng GGeo. Status. Code GInfo. Window GLat. Lng. Bounds GGeo. Address. Accuracy GInfo. Window. Tab GControl GClient. Geocoder GInfo. Window. Options GEvent GGeocode. Cache GMarker GEvent. Listener GFactual. Geocode. Cache GMarker. Options GXml. Http GPolyline GDownload. Url GXml GIcon GBrowser. Is. Compatible GXslt GPoint 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: GMap. Type GMap. Pane GMap. Type. Options GCopyright GOverlay GProjection GTile. Layer GControl GTile. Layer. Overlay GMercator. Projection GControl. Position GCopyright. Collection GControl. Anchor

PHP Class Google. Map. API 2. 2 php class Author: Monte Ohrt monte@ohrt. com

PHP Class Google. Map. API 2. 2 php class Author: Monte Ohrt monte@ohrt. com Copyright 2005 -2006 New Digital Group http: //www. phpinsider. com/php/code/Google. Map. API/ 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 Many new web applications today integrate Google Maps and other web service APIs.

Mashups Many new web applications today integrate Google Maps and other web service APIs. http: //www. onnyturf. com/subway/ http: //www. weatherbonk. com/weather/index. jsp http: //www. 1001 seafoods. com/fishing-maps. php http: //www. mapgasprices. com/

Other Links 1. 2. 3. http: //www. econym. demon. co. uk/googlemaps/extensions. htm http: //geocoder.

Other Links 1. 2. 3. http: //www. econym. demon. co. uk/googlemaps/extensions. htm http: //geocoder. us/ http: //www. lifehack. org/articles/lifehack/essential-resources-forgoogle-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/171162. htm 10. http: //mapmaker. donkeymagic. co. uk/ 11. http: //www. econym. demon. co. uk/googlemaps/reference. htm 12. http: //mapki. com/coordtotile. html