google maps
I had to make a google map with the locations of hotel for the participants of the AEMP2007 congress. The API of google maps is very simple:
1) Creation of the map including center point and zoom used
2) Include controls
3) Creation of the Icons to be used
4) Adding a point to the map and making a marker (clicking the point it will display HTML)
5) Div section with the map on the webpage
There is a nice webpage with google maps icons:
http://www.econym.demon.co.uk/googlemaps/geicons.htm
1) Creation of the map:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.03339,-7.95112), 13);
map.setMapType(G_HYBRID_TYPE);
2) Include controls
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl(true));
3) Creation of Hotel icon
var iconHotel = new GIcon();
iconHotel.image = "http://maps.google.com/mapfiles/kml/pal2/icon20.png";
iconHotel.shadow = "http://maps.google.com/mapfiles/kml/pal2/icon20s.png";
iconHotel.iconSize = new GSize(32, 32);
iconHotel.shadowSize = new GSize(37, 34);
iconHotel.iconAnchor = new GPoint(9, 34);
iconHotel.infoWindowAnchor = new GPoint(9, 2);
iconHotel.infoShadowAnchor = new GPoint(18, 25);
4) Adding Point and marker
var pointIbis = new GLatLng(37.03339,-7.95112);
var markerIbis=new GMarker(pointIbis,iconHotel)
map.addOverlay(markerIbis);
GEvent.addListener(markerIbis, "click", function() {
markerIbis.openInfoWindowHtml("<b>Hotel Ibis</b>");
}); //don't forget this
and closing the load function and if statement:
}
}
- The function load() is called inside the body tag with the onload event
<body onload="load()">
- The DIV in the page couldn't be simpler
<div id="map" style="width: 600px; height: 400px"></div>
Labels: google earth, hotel, points
posted by Mister Jesus @ 2:45 PM
0 comments
