Cara Menampilkan Google Maps Di Smartphone Mobile

kali ini saya akan membahas tentang Googlemaps (lagi) dan Jquery Mobile, buat apa? ok, saya jelasin dulu ya…Jquery Mobile adalah salah satu framework javascript dari Jquery yang berfungsi untuk kamu-kamu yang ingin developing di mobile web. Tentunya berbeda dengan WAP, Jquery Mobile ini diperuntukkuan untuk perangkat smartphone seperti blackberry,android atau produk-produk Apple seperti Iphone,Ipod Touch atau Ipad.

Untuk Source codenya seperti ini :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

 
<script src="themes/jquery-1.8.2.min.js"></script><script src="themes/jquery.mobile-1.2.0.min.js"></script><script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script><script src="js/jquery.js" type="text/javascript"></script><script src="js/markerclusterer_packed.js" type="text/javascript"></script><script type="text/javascript">// <![CDATA[
var peta;
var peta2;
var gambar_tanda;
gambar_tanda = 'img/marker.png';
var x = new Array();
var y = new Array();
function peta_awal(){
// posisi default peta saat diload
var lokasibaru = new google.maps.LatLng(-7.090911,107.668887);
var petaoption = {
zoom: 8,
center: lokasibaru,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
peta = new google.maps.Map(document.getElementById("map_canvas"),petaoption);
// memanggil function ambilpeta() untuk menampilkan koordinat
ambilpeta();
}
 
function ambilpeta(){
    url = "json.php";
    $.ajax({
        url: url,
        dataType: 'json',
        cache: false,
        success: function(msg) {
    var markers = [];
            for(i=0;i<msg.warteg.cabang.length;i++){
x[i] = msg.warteg.cabang[i].x;
y[i] = msg.warteg.cabang[i].y;
                var point = new google.maps.LatLng(parseFloat(msg.warteg.cabang[i].x),parseFloat(msg.warteg.cabang[i].y));
                  tanda = new google.maps.Marker({
position: point,
map: peta,
icon: gambar_tanda,
clickable: true
});
markers.push(tanda);
}
var markerCluster = new MarkerClusterer(peta, markers);
        }
    });
}
 
// ketika button caripeta ditekan, maka script ini akan berjalan
$(document).ready(function() {
    $("#caripeta").click(function(){
        var kab = $("#kab").val();
$.ajax({
        url: "json.php",
        data: "kab="+kab,
        dataType: 'json',
        cache: false,
        success: function(msg){
var awal2 = new google.maps.LatLng(-7.090911,107.668887);
var petaoption2 = {
zoom: 8,
center: awal2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var peta2 = new google.maps.Map(document.getElementById("map_canvas"),petaoption2);
google.maps.event.addListener(peta2,'click',function(event){
kasihtanda(event.latLng);
});
 
             var markers = [];
            for(i=0;i<msg.warteg.cabang.length;i++){
x[i] = msg.warteg.cabang[i].x;
y[i] = msg.warteg.cabang[i].y;
                var point2 = new google.maps.LatLng(parseFloat(msg.warteg.cabang[i].x),parseFloat(msg.warteg.cabang[i].y));
                  tanda = new google.maps.Marker({
position: point2,
map: peta2,
icon: gambar_tanda,
clickable: true
});
markers.push(tanda);
}
var markerCluster = new MarkerClusterer(peta2, markers);
        }
    });
    });
});
 
function loadURL(marker) {
    return function () {
        window.location.href = marker.url;
    }
}
// ]]></script>&gt;

Dengan jQuery MobileNah….untuk output pada desktopnya kaya gini nich…

Dan saya coba di perangkat android saya, dan hasilnya kaya gini :

TUBE KITTY BLOG

Cara Menampilkan Google Maps Di Smartphone Mobile

0 Response to "Cara Menampilkan Google Maps Di Smartphone Mobile"

Posting Komentar