Saturday, March 31, 2007

My Google Map


(ps. click the image above to open my google map. 8 flags on map in total, if it's not ,please press F5 to reload)

The webpage is fine when off-line exploring, but there are problems on-line .

What I have done are :

1. Copy the basic example from Google Maps API

2. Create my marker :
(1) Create the icons of markers
(2) Create markers with its own icons
(3) Edit the InfoWindowHtml

// define a Baseicon class
var Baseicon = new GIcon();
Baseicon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
Baseicon.iconSize = new GSize(16.5, 11);
Baseicon.shadowSize = new GSize(22, 20);
Baseicon.iconAnchor = new GPoint(6, 20);
Baseicon.infoWindowAnchor = new GPoint(5, 1);

// new a Baseicon class object with its own image
var Ticon = new GIcon(Baseicon);
Ticon.image="01May.gif";

// new a marker , at point(101.42, 3.08), with Ticon
var marker2 = new GMarker((new GPoint(101.42, 3.08)),Ticon);

// edit the information Html, open the infor window when mouse moves over
GEvent.addListener(marker2, "mouseover", function() {
marker2.openInfoWindowHtml("Maylasia");
});
map.addOverlay(marker2);


3. Sign up for a Google API key


[Ref]
1. Google Maps API document
2.Google Maps API 2.0 參考文檔
........


No comments:

Post a Comment