| Author |
Topic: Google Maps API Tutorial -- Overlays |
|
WebSpider
member
offline  |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
 |
|
|
| Google Maps API Tutorial -- Overlays |
Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map. Overlays reflect objects that you "add" to the map to designate points, lines, or areas.
The Maps API has several types of overlays:
Markers -- Points on the map are displayed using markers, which are objects of type GMarker and may make use of the GIcon type.
Polylines -- Lines on the map are displayed using polylines (representing a collection of points). Lines are objects of type GPolyline.
Polygons -- Areas on the map are displayed either as polygons if they are areas of an arbitrary shape or as ground overlays if they are rectangular. Polygons are similar to polylines in that they consist of a collection of points with a closed loop and may take any shape. Ground overlays are often used for areas that map either directly or indirectly to tiles on the map.
Tile -- The map itself is displayed using a tile overlay. You can modify this with your own set of tiles by using a GTileLayerOverlay.
Info Window -- The info window is also a special kind of overlay. Note, however, that the info window is added to the map automatically, and that there can only be one object of type GInfoWindow attached to a map.
Each overlay implements the GOverlay interface. Overlays can be added to a map using the GMap2.addOverlay() method and removed using the Map2.removeOverlay() method.
|
|
|
|
|
|
|
WebSpider
member
offline  |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| Markers |
A GMarker marks a position on the map. The constructor is
GMarker(latlng:GLatLng, opts?:GMarkerOptions)
It creates a marker at the latlng with options specified in GMarkerOptions. By default markers are clickable and have the default icon G_DEFAULT_ICON.
For example, a very simple marker is created pointing to (37.4419, -122.1419):
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl()); // zoom control
map.addControl(new GMapTypeControl()); // type control
map.setCenter(new GLatLng(37.4419, -122.1419),8);
// create a marker
var point = new GLatLng(37.4419, -122.1419);
var marker = new GMarker(point);
map.addOverlay(marker);
The following example creates a draggable marker:
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl()); // zoom control
map.addControl(new GMapTypeControl()); // type control
map.setCenter(new GLatLng(37.4419, -122.1419),8);
// create a draggablemarker
var point = new GLatLng(37.4419, -122.1419);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
Events fired by marker
click(latlng:GLatLng)
dblclick(latlng:GLatLng)
mousedown(latlng:GLatLng)
mouseup(latlng:GLatLng)
mouseover(latlng:GLatLng)
mouseout(latlng:GLatLng)
infowindowopen()
infowindowbeforeclose()
infowindowclose()
dragstart(latlng:GLatLng)
drag(latlng:GLatLng)
dragend(latlng:GLatLng)
remove()
visibilitychanged(isVisible:Boolean)
|
|
|
|
|
|
|
WebSpider
member
offline |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| Interactive Markers |
In this example, a mouse clickable marker and a mouse hoverable marker are created.
// Display the map, with some controls and set the initial location
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl()); // zoom control
map.addControl(new GMapTypeControl()); // type control
map.setCenter(new GLatLng(37.4419, -122.1419), 8);
// A clickable marker
var point1 = new GLatLng(37.4419, -122.1419);
var marker1 = new GMarker(point1);
GEvent.addListener(marker1, "click", function() {
marker1.openInfoWindowHtml("You just clicked on me!");
});
map.addOverlay(marker1);
// A hoverable marker
var point2 = new GLatLng(37.4419, -123.1419);
var marker2 = new GMarker(point2);
GEvent.addListener(marker2, "mouseover", function() {
marker2.openInfoWindowHtml("You are hovering above me!");
});
GEvent.addListener(marker2, "mouseout", function() {
marker2.closeInfoWindow();
});
map.addOverlay(marker2);
|
|
|
|
|
|
|
WebSpider
member
offline |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| Icon |
An icon specifies the images used to display a GMarker on the map.
Constructor:
new GIcon(copy?:GIcon, image?:String)
For example, the fo
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl()); // zoom control
map.addControl(new GMapTypeControl()); // type control
map.setCenter(new GLatLng(37.4419, -122.1419),8);
// Create our "tiny" marker icon
var blueIcon = new GIcon(G_DEFAULT_ICON);
blueIcon.image =
"http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
// Set up our GMarkerOptions object
markerOptions = { icon:blueIcon };
// create a marker
var point = new GLatLng(37.4419, -122.1419);
var marker = new GMarker(point, markerOptions);
map.addOverlay(marker);
|
|
|
|
|
|
|
|
Email To Friend | 
Set Alert To This Topic
New Topic | 
Post Reply 
posted on: 06/22/2009 08:06:19 PM
Edit
Quote
Report
Profile
Reply