ipin's blog

best practices don't come easy, it comes with a passion for self-improvment

Google Maps API

leave a comment »

Membuat web menggunakan fitur Google Maps API :

  1. membuat marker
  2. membuat info window

dengan menggunakan parameter :

  1. width dan height (ukuran map yang ingin ditampilkan)
  2. latitude dan longitude (posisi pusat map)
  3. poinlat dan poinlong (posisi marker map)
  4. label (info yang ditampilkan)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Map View</title>
		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=123456" type="text/javascript"></script>

		<script type="text/javascript">
		//<![CDATA[
			var map;

			function load() {
				var params = {};
				if (GBrowserIsCompatible()) {
					var mapEl = document.getElementById("map");
					try {
						var paramsArr = String(document.location).split('?')[1].split('&');
						for (var i = 0; i < paramsArr.length; ++i) {
							var p = paramsArr[i].split('=');
							params[p[0]] = p[1];
						}
					}
					catch (e) {}

					var lat = (params['latitude'] ? parseFloat(params['latitude']) : -6.1749842);
					var lng = (params['longitude'] ? parseFloat(params['longitude']) : 106.8271203);
					var zoom = (params['zoom'] ? parseInt(params['zoom']) : 15);

                    mapEl.style.width = (params['width'] ? parseFloat(params['width']) + 'px' : (window.innerWidth - 0) + 'px');
                    mapEl.style.height = (params['height'] ? parseFloat(params['height']) + 'px' : (window.innerHeight - 0) + 'px');

					map = new GMap2(mapEl);
					map.setCenter(new GLatLng(lat, lng), zoom);
                    if(params['label']){
                        map.openInfoWindow(map.getCenter(),document.createTextNode(params['label']));
                    }
                    if(params['pointlat']&&params['pointlong']){
                        var point = new GLatLng(parseFloat(params['pointlat']), parseFloat(params['pointlong']));
                        map.addOverlay(new GMarker(point));
                    }

					try {
						mapEl.childNodes[1].style.visibility = 'hidden';
						mapEl.childNodes[2].style.visibility = 'hidden';
					}
					catch (e) {}
				}
			}
		//]]>
		</script>
  </head>

  <body style="margin: 0px;" onload="load()" onunload="GUnload()" onresize="resizeDiv()">
    <div id="map" style="border: 0px solid black"/>
  </body>
</html>

Membuat marker

var point = new GLatLng(parseFloat(params['pointlat']), parseFloat(params['pointlong']));
map.addOverlay(new GMarker(point));

Membuat info window

map.openInfoWindow(map.getCenter(),document.createTextNode(params['label']));

Written by yanuarseno

January 26, 2010 at 2:37 pm

Posted in API

«
»

Leave a comment