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 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):
This reference is kept up-to-date with the latest changes to the API.

Now just a small introduction of (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 If you don't want to jump on the Web 2.0 javascript wagon, just play with URL 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 ( 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":

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 ( into your map. To do this, create or open a map and click Import.
You can also add HTML, photo, video:

You can share your maps:

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:

But until now there is no management system!!! Try this excellent web services:

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 :
then you have many examples (see below).
there are many tutorials, i.e.

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:
B)  many labs (click on "options" top right corner of,
i.e. (summer 2011) :
a)weather with
for example, France
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)
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:
5 APIs:
Directions APIDistance Matrix APIElevation APIGeocoding APIPlaces API
alternatives API, wikipedia:  Yahoo! MapsBing Maps PlatformMapQuestOpenLayers
structure: "URL link" "tab" "-"

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      -

(64 examples)
which are
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/      -

17 directories:

23 examples "experiments"
complex custom layers overlay...
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.

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 .