Mark B. – tech

Google Maps (Part 3) – Markers

Markers identify points on the map. By default, they use use G_DEFAULT_ICON, though you can specify a custom icon.
The GMarker constructor takes a GLatLng and an optional GMarkerOptions objects as arguments.

Markers are designed to be interactive. By default, they receive “click” events, for example, and are often used
within event listeners to bring up info windows.

Example :

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Add 10 markers to the map at random locationsvar bounds = map.getBounds();
var southWest = bounds.getSouthWest();var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),        southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));}

Draggable Markers

Markers are interactive objects that can be clicked on and dragged to a new location. In this example,
we place a draggable marker on the map, and listen to a few of its simpler events.
Draggable markers implement four kinds of events: click, dragstart, drag and dragend to indicate their drag status.
By default, markers are clickable but not draggable, so they need to be initialized with the additional marker
option draggable set to true. Draggable markers are also bouncy by default. If you don’t like this behavior,
just set the bouncy option to false and it will drop down gracefully.

var map = new GMap2(document.getElementById("map_canvas"));
var center = new GLatLng(37.4419, -122.1419);
map.setCenter(center, 13);
var marker = new GMarker(center, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {  map.closeInfoWindow();  });
GEvent.addListener(marker, "dragend", function() {  marker.openInfoWindowHtml("Just bouncing along...");
});
map.addOverlay(marker);


Icons

Modify icon that used in marker :

// Create our "tiny" marker iconvar 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
objectmarkerOptions = { icon:blueIcon };
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),    southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point, markerOptions));

Advertisements
This entry was published on April 18, 2011 at 4:56 am and is filed under IT - Tutorial. Bookmark the permalink. Follow any comments here with the RSS feed for this post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: