The JavaScript Maps API V3 is a free service (with no ads).
It provides a number of utilities for
1) manipulating maps ("like" on the http://maps.google.com web page, in fact not the same) and
2) adding content to the map through a variety of services, allowing you to create robust maps applications on your website.
REFERENCE (all functions): http://code.google.com/apis/maps/documentation/javascript/reference.html
This reference is kept up-to-date with the latest changes to the API.
Now just a small introduction of maps.google.com (Google Maps) in regards to Gmaps API:
1)Google Maps is a web service provided by Google. Like many other web applications, Google Maps uses JavaScript extensively (you don't need javascript coding for playing with maps.google.com). If you don't want to jump on the Web 2.0 javascript wagon, just play with maps.google.com URL parameters: http://mapki.com/wiki/Google_Map_Parameters.
The Google Maps API has 3 required pieces:
- 2 Javascript blocks: one to import the Gmaps API and the other to define the map.
- The third piece is a html div element (that defines the size and width of the map).
2)Google Maps satellite images are not updated in real time (Google uses the word satellite, most of the high-resolution imagery is aerial photography taken from aircraft rather than from satellites). With javascript and these API, you can use other images (other than the map/satellite images hosted by Google)...
3)Javascript Gmaps API is a better route planner. Depending on the area, it may allow the choice between "by car", "by public transit" (you can add your data), "walking" (you can add your data, from your GPS), "bicycling" (you can add your data, from your GPS), and by direct lines, polylines (maps.google.com has no undo function, draw lines is painful)...
4)Google Maps is coded almost entirely in JavaScript and XML. There are many customized features into the Google Maps interface but no "save" button!
For saving your maps, only two solutions/tricks: use google account for saving a maps or just bookmark (or web browser history). The fact that you simply just can't click "Save" after creating a map is absolutely ridiculous, especially if you're logged into your Google account.
(if you want to save "your maps" "your adress": http://www.google.com/support/forum/p/maps/thread?tid=4cd8199bd3eb3ff2&hl=en)
In April 2007, "My Maps" was a new feature added to. "My Maps" lets users create their own map by positioning markers, polylines and polygons onto a map. The interface is an overlay on the map. A set of 84 pre-designed markers is available. Polyline and Polygon color, width and opacity are selectable. Maps modified using My Maps can be saved for later viewing and made public or marked as unlisted, in which case a user will need the saved URL with a 42 character unique ID.
Each element added to a My Map has an editable tag. This tag can contain text, rich text or HTML. Embeddable video and other content can be included within the HTML tag.
You can embed your maps in a site/blog and there are many ways to do this :
Once you have created a map, you can import KML, KMZ (google earth) or GeoRSS data (http://georss.org/gml) into your map. To do this, create or open a map and click Import.
You can also add HTML, photo, video: http://maps.google.com/support/bin/static.py?page=guide.cs&guide=21670&topic=21676&answer=144364#import
You can share your maps:
http://maps.google.com/support/bin/static.py?page=guide.cs&guide=21670&topic=21676&answer=144365
If you have Google Earth installed on your computer, you can view your maps in Google Earth. To do this:
Click the KML or in the orange title bar. Google Maps uploads a KML file to your computer that you can open in Google Earth.
You can use access this KML file using the Google Maps API:
http://googlemapsapi.blogspot.com/2007/03/kml-and-georss-support-added-to-google.html
But until now there is no management system!!! Try this excellent web services: http://www.click2map.com/
Google Maps is in itself not a Geospatial Content Management System but is a powerful building block; see other articles about geo data/metadata and interoperability in this ex-ample blog ;).
At the end, the best saving method is coding with Google maps API!
5)This API is the most heavily used : http://www.programmableweb.com/apis
then you have many examples (see below).
there are many tutorials, i.e. http://www.higheredblogcon.com/library/deweese/presentation.html
6)periodically Google offers many new services:
A) The Google Maps API team will regularly update this Javascript API with new features, bug fixes, and performance improvements.
Please consult the Javascript Maps API V3 Changelog for information on what's new in each release:
http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog
B) many labs (click on "options" top right corner of maps.google.com),
i.e. (summer 2011) :
a)weather with maps.google:
for example, France
http://maps.google.fr/maps?lci=weather&utm_campaign=fr&utm_medium=mapshpp&utm_source=fr-mapshpp-emea-fr-gns-gtn&utm_term=weather
b)new items (right click)
7) use both!!!
--------------
Two other groups of APIs/tools are important for the geo tasks:
1)GViz: Google visualization API (Google Chart Tools)
http://code.google.com/apis/chart/
All charts are populated with data using a common JavaScript DataTable class.
many tools, also in Infographics (Pins, Icons, etc)
2)GmapsWS: google maps web services: http://code.google.com/apis/maps/documentation/webservices/index.html
5 APIs:
Directions APIDistance Matrix APIElevation APIGeocoding APIPlaces API
-------------------------------
alternatives API, wikipedia: Yahoo! Maps, Bing Maps Platform, MapQuest, OpenLayers
--------------------------------------
LIST OF EXAMPLES
structure: "URL link" "tab" "-"
from http://code.google.com/apis/maps/documentation/javascript/examples/index.html
100 examples:
All of the examples contained in the Google Maps API documentation set are listed below for quick reference. -
Basics -
Events -
Controls -
Overlays -
Layers -
MapTypes -
Services -
Libraries -
Adsense -
Geometry -
Panoramio -
Places -
from http://code.google.com/apis/maps/documentation/javascript/demogallery.html
(64 examples)
which are http://gmaps-samples-v3.googlecode.com/svn/trunk/
50 directories:
cloud/ -
folds/ -
layers/ -
places/ -
poly/ -
sidebar/ -
talks/ -
google-maps-utility-library-v3
from http://code.google.com/p/google-maps-utility-library-v3/source/browse/
17 directories:
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2FExtDraggableObject
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Farcgislink
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Fextoverviewmapcontrol
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Fgoogleearth
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Finfobox
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Finfobubble
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Fkeydragzoom
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Fmaplabel
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Fmarkerclusterer
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Fmarkerclustererplus
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Fmarkermanager
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Fmarkerwithlabel
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Frichmarker
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Frouteboxer
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Fstyledmarker
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Fstyledmarkermaker
http://code.google.com/p/google-maps-utility-library-v3/source/browse/#svn%2Ftrunk%2Futil
from http://maps.forum.nu/
23 examples "experiments"
complex custom layers overlay...
http://maps.forum.nu/gm_place_that_state.html
is a very good example: puzzle with US states
A game like mashup where you're given the outline of a random state and you have to move it into place by dragging.
Implements a trick to drag entire polygons without setting the polygon into edit mode.
from http://www.geocodezip.com/
120 examples:
Mike Williams' tutorial The Basics - Part 1: Markers with info windows translated to v3 -
Mike Williams' tutorial The Basics - Part 2: Adding a clickable sidebar translated to v3 -
Mike Williams' tutorial The Basics - Part 3: Loading the data from an XML file translated to v3
with added "Zoom To, Zoom In, Zoom Out links in infowindow
With clustering -
with added "Zoom To, Zoom In, Zoom Out links in infowindow
With clustering -
Mike Williams' tutorial The Basics - Lots of sidebar entries (4. Select box example) translated to v3 -
Mike Williams' tutorial More advanced stuff - Part 25 Marker Categories translated to v3 -
Modified Mike Williams example that changes the marker icons on mouseover/mouseout (v3) (his example for v2 is from this page [Sidebar mouseovers] of his tutorial). -
Mike William' tutorial More advanced stuff - Part 20 Passing and receiving parameters translated to v3 -
Mike William' tutorial More advanced stuff - Part 20 Passing and receiving parameters link to 2nd marker in xml (v3) - link to "Marker Two" (v3) -
Directions examples -
- Directions example with custom markers (icons) -
- Directions with draggable start/end markers -
- Directions with draggable start/end markers, reverse geocodes the dragged location -
- Directions example with LatLng waypoint -
- Directions example with address waypoint -
- Directions with waypoint marker -
- Directions with waypoint marker and clickable polyline -
- Animated directions (moving marker) -
- Draggable Directions -
- Draggable Directions to Xml -
- Showing alternate directions -
- Mile/Km Marker examples -
Geocoder examples -
Elevation examples -
Polygon examples -
- v3_polygon_example -
- v3_polygon_exampleA -
- v3 polygon exmple, with 3201 point polyline -
- with infowindows (v3 behavior) -
- 64 polygons on a map -
- Even more polygons on a map (try in IE at your own risk...) -
- Donut polygon - Multiple holes - Overlapping holes - More complex -
- Hexagon -
- Polygon arc -
- More Polygon arcs -
- Polygon squares -
- Clickable Polygon squares -
- Area calculations on polygons -
- Area calculations on polygons using the google.maps.geometry.spherical library -
Polyline examples -
Bounds examples -
Tabbed InfoWindows -
geoxml3 examples & test cases (testing polyline & polygon implementation) -
- show/hide markers (US state capitols) -
- another marker test case -
- show/hide markers - Kml with polyline and markers -
- Load KML_Samples.kml -
- Global Volcanism Program Weekly Report -
- Simple Network Link Test - complete URL -
- Simple Network Link Test - local file -
- KML with Polygons -
- KML Polygon with holes (now depends on winding direction, as of April 2011) -
- point in polygon example -
- Access individual polygons -
- State of Hawaii from KML (compare to kmlLayer) -
- State of Alaska from KML (compare to kmlLayer) (complex KML, usual warnings apply with IE) -
- US states w/ sidebar (complex KML, usual warnings apply with IE) -
- Polygons w/sidebar -
- highligh individual polygons return to original color -
- Highlight individual polygons (complex KML, usual warnings apply with IE) -
- Custom parse function, manage "map" infowindow example -
- Projected Overlay test page from John Coryat (www.usnaviguide.com) -
- Highlight polylines on mouseover -
- Google "CTA" example -
- Dynamic sidebar of polygons in view (complex KML, usual warnings apply with IE) -
- link to example -
- Google "CTA" example (with highlighting and sidebar) -
- Ground overlay - UN Map of Israel -
- Map of Israel, Ground Overlay, Polygons -
- Map of Georgia, Ground Overlay, Polygons -
- Map of Africa with capitols -
- multiple kml files (complex KML, may require large amounts of memory and time to render) -
- two kml files -
- five kml files -
- six kml files -
- another example with six kml files -
- icons in the sidebar -
- categories from kml styleID -
- StyleMap rollover icon support example -
- StyleMap rollover icon in KML_Samples -
- StyleMap rollover polygon (multigeometry) support example -
- suppressInfoWindow test -
Fusion Tables -
- Fusion Tables Users Group - Developers Guide - Reference -
- gviz example code -
- Fusion Tables Map (started with this kml:Map of Africa with capitols) -
- Fusion Tables Map with sidebar -
- Playing with Fusion Tables - Natural Earth dataset and sidebars (and a modified version of geoxml3)
Italy - Greece - Albania - Georgia - UK - Russia - Israel - USA - - Fusion Tables/Natural Earth Data Country Browser -
- Fusion Tables Map with sidebar -
- Fusion Tables Map with sidebar, w/ polygon sidebar entries clickable -
- Fusion Tables map with custom markers (specified by the load of the layer) -
- two layer map, one infowindow -
- three fusion layers, selected by checkboxes -
- Zoom to results of query (markers) (using GViz) -
- Zoom to results of query (kml) (using GViz) -
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Online Training from India .
ReplyDelete