Step 1 - Sign up for a Google Maps API key:
- Go to http://code.google.com/apis/maps/ and Sign up for a Google Maps API key -> enter your web site URL in My web site URL, and check I have read and agree with the terms and conditions, then click Generate API Key.
For example: I'll sign up for a Google Maps API key for my website http://skyofflowers.googlepages.com.
The result: - Now, you can copy example code to make an example web page and see how Google Maps works.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip3SrCr65mgyiid74JsM98RjbQhFrk0Ma9J3Lcy5uYCXIErCUNqzBOPw_fRDijoxDAGATVz92wUgNc4-qn3IsCdydt2d4GezfNFLpv76UtXo5H6ofGXn8XqDfqyLrSouA2bwbnPlXD_M1Y/s320/googlemapsapi03.jpg)
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQ...
type="text/javascript"></script>
This Javascript contains API key "ABQ..." is required for page using Google Maps. Use the API key you've got at Step 1.
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
This is main function to load a map.
var map = new GMap2(document.getElementById("map")); //create map object
map.setCenter(new GLatLng(37.4419, -122.1419), 13); //set the center view of map ~ where you want to display.
Method setCenter(...) has 2 arguments:
- Latitude and Longtitude as a GLatLng object
- Zoom level
And maybe.... you want to know how to get latitude and longtitude of a place. Go to http://maps.google.com and search for one.
<body onload="load()" onunload="GUnload()">
This HTML script calls load() function defined above. It also has onunload event to prevent memory leaks
<div id="map" style="width: 500px; height: 300px"></div>
This HTML script makes a view to display map on web page. You can customize the width and height of the view.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz2uQTGbXBQnr0hOK0mkCFBG_W5W7FuXVdvWlo9YcAOfyRNcCkCWXsggnGaHSnaak9g5l-VNLqREgI2qY46VdZW8Q-K4bdM-y0QRVpkM6gzIfxO11racFuUUCZUhAbdEw_IAx3YNtO_id9/s320/googlemapsapi04.jpg)
Step 3 - Customize your map:
Based on the example code, you can modify it to suit your need.
1. Customize map type: use method
setMapType(map_type)
. Standard map types:G_NORMAL_MAP
- the default viewG_SATELLITE_MAP
- showing Google Earth satellite imagesG_HYBRID_MAP
- showing a mixture of normal and satellite viewsG_DEFAULT_MAP_TYPES
- an array of these three types, useful for iterative processing
var map = new GMap2(document.getElementById("map_canvas"));
map.setMapType(
G_HYBRID_MAP
); //showing a mixture of normal and satellite views
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGxGA_6W0wPa0MY9PFJRA-IS9gZv4UeCthU6N9hmMAQQiGwy7SRz5MRcKSks_pNgGPjavh_RLp6GSIRQQhQLIDvkxMUbsJHslba1vI__jleRD5ZIVj4HOnLRo6LZbnDcWeSJrodVwTkcJn/s320/googlemapsapi05.jpg)
2. Show a welcome message like a floating balloon: use method openInfoWindow(...)
map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world"));
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz9bipvjnLhJHI_s_OHBLQFxHRDAWsTn7oMhh3pSP_TxhOplYSJqD0H8kxtBCX5aS6UHcJMq42Fq4gM_h7vd6uIAenr_SfWL5my7JO03bPol31-sGQSUlADBX2hErJMDsKvHkp4EawXttw/s320/googlemapsapi06.jpg)
3. Add Large Map control:
map.addControl(new GLargeMapControl());
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjkftIsfeol9vBurJWdtSbf4u72WRJiZ_1ywq8ED52-__M7SoFdX2D6b2U_nJlOEBGr2unIQQW0uhVJa9MHLHEw5AFE-zuPr9N6nV-wXCKgqEAo5ZR1WW_2Rq09yg9w_HeYhJKJ6RCJXpp/s320/googlemapsapi07.jpg)
4. Add Small Map control:
map.addControl(new GSmallMapControl());
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2vUlExuP_-uuJYMjLgJQbTVSBW64DUjz-KSwbBH_W1l4o9_68rWDLNSd5G8tvPsSsZzKJEVf-IJjJYYPEm6lneppOH33xRtgFmk0Cjv4oehQQHldRooaXq4J54fjm1cpz2oRRsVxLwaNx/s320/googlemapsapi07b.jpg)
5. Add Zoom In & Zoom Out buttons:
map.addControl(new GSmallZoomControl());
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSOfgsMsjBfEKlU3Dg9Tulb_KjrAJfkD1gu4CcHPI3cjXM5lxv01x3tyVqBgv4pzOfkUtsXFK2E1A3YaV9yEDqZ2OUt0qWsGBpUk2TttUug_wXz2_ueGx8Qs3cVB7xpw1yL02l7H08S-wu/s320/googlemapsapi08.jpg)
6. Add Map Type control:
map.addControl(new GMapTypeControl());
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXoPFQAQ1CZ_4ZiMyzBGu2KiVcvUktstq822K_w5kwvU6UOuWoBFNNF8lGwQN2fiNg6vne4qZgpPxaxy_rBQNSXEk57sgxfuwAefYKpmAB8hDvJn-l-pciF3rtiTzt1gCgB-PIsbsm0zOE/s320/googlemapsapi09.jpg)
7. Add a marker:
var options = {
title: "Welcome you!",
icon: G_DEFAULT_ICON
};
var marker = new GMarker(new GLatLng(37.4419, -122.1419), options);
map.addOverlay(marker);
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCp7z4FqpXQEWPJAO2Zp8ThxPT-ptm3Kjw1E8u5W-M42x3l44pxTwJK_4rxZ7_8FJqSI6TRApQh6EqumsA9er2LiacnUt7XdhYhIT5BKJPS8jO0g0HA33SEth-NUzZyXZoE2klI1_cbji/s320/googlemapsapi10.jpg)
8. Add a marker:
var marker = new GMarker(new GLatLng(37.4419, -122.1419));
GEvent.addListener(marker, "click", function() {
var html = '<div style="width: 210px; padding-right: 10px;"><a href="http://www.blogger.com/signup.html">Welcome you!<\/a><\/div>';
marker.openInfoWindowHtml(html);
});
map.addOverlay(marker);
GEvent.trigger(marker, "click");
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPd1sKSe9vAvWWbmckw-liBtKK0KEQ_MdEF6f0IACz-ePnILa3sWrFCL4Dy1uSVevQlsssfXIiFbLefwOrkBKmM0ukzsFXJghLz_QABPW9zNsdQ0mpH6NPFFqS8xD9N1MaBqXoKLETQkHB/s320/googlemapsapi11.jpg)
Here is a modified sample.
References:
0 comments:
Post a Comment