Simple Google Maps Application


Ini merupakan aplikasi sederhana menggunakan Google Maps. Aplikasi ini menerima input nama dan alamat user kemudian memberikan tanda atau marke r pada map. Berikut previewnya dan source codenya,

Preview Simple Google Map

google maps sample preview

Simple Google Map.html

<html>
<head>
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”/>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>
<title>Google Maps Simple Sample</title>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script&gt;
<script type=”text/javascript”>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-0.397, 120.644);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
}
function codeAddress() {
var address = document.getElementById(“address”).value;
var name = document.getElementById(“name”).value;
if (geocoder) {
geocoder.geocode( { ‘address’: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.set_center(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
attachMessage(marker, name, address);
} else {
alert(“No results found”);
}
} else {
alert(“Geocode was not successful for the following reason: ” + status);
}
});
}
}
function attachMessage(marker, name, address) {
var name = “<h4>”+name+”</h4>”;
var show = name + address;
var infowindow = new google.maps.InfoWindow(
{ content: show,
});
google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body style=”margin:0px; padding:0px;” onload=”initialize()”>
<div id=”map_canvas” style=”width:70%; height:70%; float: left”></div>
<div>
<br />
<br />
<br />
<div style=”width: 50px; float: left”>
Nama <br/ >
Alamat
</div>
<div>
<input id=”name” type=”textbox” value=””> <br />
<input id=”address” type=”textbox” value=””> <br />
<input type=”button” value=”Find” onclick=”codeAddress()”>
</div>
</div>
</body>
</html>

Pastikan code diatas disimpan dengan ekstensi .html serta pastikan tanda kutip (“) sudah sesuai. Untuk keterangan mengenai codenya silakan lihat google maps API disini .

    • abu hasan
    • December 2nd, 2010

    mas klo buat aplikasi google maps harus online to…???

    • iya, harus online untuk koneksi ke librarynya🙂

  1. No trackbacks yet.

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: