Sometimes I have to put text on a path

Tuesday, August 23, 2011

geography GIS, google maps javascript API (only v3) and google web services and Google Chart Tools: more than 300 examples of various useful snippets, javascript, codes, tutorials and documentation


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 KML icon 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! MapsBing Maps PlatformMapQuestOpenLayers
--------------------------------------
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     -
map-simple.html      -
map-language.html      -
map-rtl.html      -
Events     -
event-simple.html      -
event-closure.html      -
Controls     -
Overlays     -
marker-simple.html      -
icon-simple.html      -
icon-complex.html      -
circle-simple.html      -
Layers     -
layer-kml.html      -
layer-georss.html      -
layer-traffic.html      -
MapTypes     -
maptype-base.html      -
maptype-image.html      -
aerial-simple.html      -
Services     -
Libraries     -
Adsense      -
ads-adunit.html      -
Geometry      -
Panoramio      -
Places      -
place-details.html      -
place-search.html      -
            


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:

45degrees/      -
articles/      -
callback/      -
circle-overlay/      -
cloud/      -
commonloader/      -
controls/      -
country_explorer/      -
custom-copyirghts/      -
devfest-2010/      -
digitalclock/      -
distancematrix/      -
draggable-markers/      -
drivingdirections/      -
elevation/      -
folds/      -
fusiontables/      -
geocoder/      -
geolocate/      -
infowindow/      -
infowindow_custom/      -
io-2010-bootcamp/      -
io-2010-migration/      -
layers/      -
localsearch/      -
map_events/      -
mapofthedead/      -
markeranimations/      -
overlayview/      -
places/      -
poly/      -
rectangle-overlay/      -
routeboxer/      -
screenshots/      -
sidebar/      -
single-infowindow/      -
smartinfowindow/      -
spreadsheets/      -
streetview/      -
styledmaps/      -
talks/      -
toomanymarkers/      -
whereinworld/      -
xmlparsing/      -
          


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 - Lots of sidebar entries (4. Select box example) translated to v3      -
Directions examples      -
Geocoder examples      -
Elevation examples      -
Polygon examples      -
Polyline examples      -
Bounds examples      -
Tabbed InfoWindows      -
geoxml3 examples & test cases (testing polyline & polygon implementation)      -
Fusion Tables      -


1 comment:

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