Archive for November 2011
Menggunakan Google Map API
Mencoba untuk menulis informasi yang mengkin berguna bagi teman-teman yang lagi mempelajarinya
disini saya akan mencoba berbagi informasi mengenai cara menampilkan sebuah peta surabaya di file HTML.
Beginilah kode program dasarnya:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Langkah 1 -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key=ABQIAAAA8tt4eKTuBZMVnLJfP2BZrBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS4Rz1LFzG0odNPtk8VLkdrQF5grA"></script>
<script type="text/javascript">
// Langkah 4
function initialize() {
var latlng = new google.maps.LatLng(-7.2492, 112.7508);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Langkah 3
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<!-- Langkah 5 -->
<body onload="initialize()">
<!-- Langkah 2 -->
<div id="map_canvas" style="width:600px; height:600px"></div>
</body>
</html>
Perhatikan urutan langkah-langkahnya yang saya tuliskan dalam komentar HTML dan JavaScript kode HTML di atas.
Kita bisa mulai menulis program Google Map API dengan urutan sebagai berikut:
1. Memasukkan Maps API JavaScript ke dalam HTML kita.
2. Membuat element div dengan nama map_canvas untuk menampilkan peta.
3. Membuat beberapa objek literal untuk menyimpan property-properti pada peta.
4. Menuliskan fungsi JavaScript untuk membuat objek peta.
5. Meng-inisiasi peta dalam tag body HTML dengan event onload.
semoga bermanfaat
disini saya akan mencoba berbagi informasi mengenai cara menampilkan sebuah peta surabaya di file HTML.
Beginilah kode program dasarnya:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Langkah 1 -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key=ABQIAAAA8tt4eKTuBZMVnLJfP2BZrBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxS4Rz1LFzG0odNPtk8VLkdrQF5grA"></script>
<script type="text/javascript">
// Langkah 4
function initialize() {
var latlng = new google.maps.LatLng(-7.2492, 112.7508);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Langkah 3
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<!-- Langkah 5 -->
<body onload="initialize()">
<!-- Langkah 2 -->
<div id="map_canvas" style="width:600px; height:600px"></div>
</body>
</html>
Perhatikan urutan langkah-langkahnya yang saya tuliskan dalam komentar HTML dan JavaScript kode HTML di atas.
Kita bisa mulai menulis program Google Map API dengan urutan sebagai berikut:
1. Memasukkan Maps API JavaScript ke dalam HTML kita.
2. Membuat element div dengan nama map_canvas untuk menampilkan peta.
3. Membuat beberapa objek literal untuk menyimpan property-properti pada peta.
4. Menuliskan fungsi JavaScript untuk membuat objek peta.
5. Meng-inisiasi peta dalam tag body HTML dengan event onload.
semoga bermanfaat
