Sometimes I have to put text on a path
Showing posts with label iframe. Show all posts
Showing posts with label iframe. Show all posts

Monday, July 16, 2012

The top 10 ways to embed Google Earth content (trails, footpaths, interactive guide to fishing, walking, biking) on your site blog (special mention to blogger) with or without earth plugin and with/without earth API

A) without coding (no javascript)
3 categories of methods: without the need of plugin install (Google Earth plugin, for browsers) and without the google earth API or with this API (in this case, the client must install the  Google Earth plugin)

A-a) without the need of Google Earth plugin
A-b) without the google earth API 
A-c) with the google earth API 

B) with coding (javascript)

-----------------------------------------------
-----intro (not necessary if you just want a one-click service to directly embed in your site)

The Google Earth plug-in allows you to navigate and explore geographic data on a 3D globe using a web browser: http://www.google.com/earth/explore/products/plugin.html
If you want to embed the Google Earth plug-in on your website, visit the Google Earth API site to learn more: http://code.google.com/apis/earth/
Check out the recently revamped (2011) Earth API Developer's Guidehttp://code.google.com/apis/earth/documentation/

This plugin and this API may work correctly on all browsers (Internet Explorer 7.0+, mac and PC: Firefox 3.0+; Google Chrome 5.0+; Safari 3.1+, etc...) that support NPAPI with npruntime extensions (https://developer.mozilla.org/En/Gecko_Plugin_API_Reference:Scripting_plugins).
Plugins (or plug-ins) are shared libraries that users can install to display content that the application itself can't display natively. For example, Adobe Reader plugin (or Google earth plugin) lets the user open PDF files directly inside the browser. Plugins are written using NPAPI, the cross-browser API for plugins: https://developer.mozilla.org/en/Plugins

To install the Google Earth Plugin, browse to any page in which the plugin is included or at http://www.google.com/earth/explore/products/plugin.html (at this URL, you can see the version of your plugin).

This plugin and this API offer many services, see these 2 "ex-amples" (trail):
(google maps and google earth and a path from one start address and one end address)
http://www.themountainpulse.com/trail-maps-plus/grand-teton-national-park/ (The Mountain Pulse is an online resource for Jackson Hole’s outdoor community: mountain biking, hiking, pathways cycling, fishing, kayaking, lodging and more)

---after this intro, let's start!
from http://code.google.com/apis/earth/documentation/

To load the Google Earth Plugin in your web page, you need to:
  1. Load the Google Earth API.
  2. Create a DIV element to hold the plugin.
  3. Create functions to initialize the plugin.
  4. Call the initialization functions once the page has loaded.
try the hello: http://code.google.com/apis/ajax/playground/?exp=earth#hello,_earth



A) without coding (no javascript)


A-a) without the need of Google Earth plugin


A-b) without the google earth API 

A-c) with the google earth API 



B) with coding (javascript)

http://code.google.com/apis/ajax/playground/?exp=earth#hello,_earth

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      -