| |
Interactive Markers |
|
|
Subject: Interactive Markers
Author: WebSpider
In response to: Markers
Posted on: 06/22/2009 08:49:51 PM
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);
>
> On 06/22/2009 08:27:15 PM WebSpider wrote:
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)
References:
|
|
|
|
