Integrasi GoogleMap dengan Foxpro

hehe meluangkan waktu sedikit nih dengan foxpro, kebetulan juga lagi pake Google Map, Ok langsung aja nih, yang perlu dilakukan create New Form dulu, terus masukkan Active Control Microsoft Web Browser, Combobox, dan commadbottun, berikut tampilannya

Capture

ok, selanjutnya kita bikin Tabel di dalam form di procedure INIT 

CREATE CURSOR GroupIcon (IdIcon N(2),ikon C(160))
INSERT INTO GroupIcon values(0,'hospital-building.png')
INSERT INTO GroupIcon values(1,'latrine.png')
INSERT INTO GroupIcon values(2,'office-building.png')
INSERT INTO GroupIcon values(3,'university.png')

CREATE CURSOR PosGoogleMaps (idkota C(4),kota C(60),alamat C(160), Lat N(16,15), Lon N(16,15), Zoom I(4),oIcon N(2))

INSERT INTO PosGoogleMaps VALUES ("DA01","Banjarmasin City",'Pemurus dalam pal 6 sadewa 4',-3.3180619,114.6003276, 10,0)
INSERT INTO PosGoogleMaps VALUES ("DA02","Kandangan City",'Perumnas baluti',-2.808459, 115.27486820000001, 15,1)
INSERT INTO PosGoogleMaps VALUES ("DA03","Martapura City",'pagar dalam', -3.4167, 114.8500, 10,3)
INSERT INTO PosGoogleMaps VALUES ("DA04","Kotabaru City",'gunungnya bamega', -3.2333,116.2167, 10,3)

thisform.cmbPosGoogleMaps.ColumnCount=2
thisform.cmbPosGoogleMaps.ColumnWidths="0,800"
Thisform.cmbPosGoogleMaps.RowSourceType= 3
Thisform.cmbPosGoogleMaps.RowSource = "Select idkota+'-'+kota as desk,kota,idkota from PosGoogleMaps into cursor cPosGooglemaps" &&'PosGoogleMaps.kota'
thisform.cmbPosGoogleMaps.ListIndex=1
thisform.command2.Click

kemudian dobel click commadbutton dan tulis seperti ini


*Buat Array Lokasi Tempat
SELECT posGooglemaps
i=0
lcSql1=''
nJlh=RECCOUNT()
SCAN
i=i+1
 cnama=kota
 clat=lat
 calamat=alamat
 cLon=Lon
 nZoom=zoom
 cIcon=oIcon
 TEXT TO lcsql NOSHOW TEXTMERGE PRETEXT 7
 ['<<ALLTRIM(cnama)>>','<<ALLTRIM(calamat)>>',<<clat>>,<<clon>>,<<nzoom>>,'<<cicon>>'] <<IIF(i=nJlh,'',',')>>
 ENDTEXT
 lcSql1=lcSql1+lcSql
ENDSCAN
*End Array lokasi

*Buat Array Icon
SELECT GroupIcon 
i=0
lcicon1=''
nJlh=RECCOUNT()
SCAN
i=i+1
 cLokasi=pcUrlFile
 nIdIcon=IdIcon
 cikon=ikon
 
 TEXT TO lcsql NOSHOW TEXTMERGE PRETEXT 7
 '<<ALLTRIM(cLokasi)>>'+'<<ALLTRIM(cikon)>>' <<IIF(i=nJlh,' ',',')>>
 ENDTEXT
 lcicon1=lcicon1+lcSql
ENDSCAN
*End Array Icon
TEXT TO lcHtml NOSHOW TEXTMERGE
<!DOCTYPE html>
<html> 
<head> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 <title>Google Maps Multiple Markers</title> 
 <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <style>
 html, body, #map {
 height: 100%;
 width: 100%;
 
 }
 </style>
 
</head> 
<body style="border:0 white none" scroll="no">
 <div id="map" ></div>
 <script>
 // Define your locations: HTML content for the info window, latitude, longitude
 var locations = [
 <<lcSql1>>
 ];
 
 // pengaturan icon berdasarkan kode group
 // var iconURLPrefix = 'file:///D:/TipsTrik/vfp/googlemap/icon/';
 
 var icons = [
 <<lcicon1>>
 
 ]
 var iconsLength = icons.length;

 var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 10,
 center: new google.maps.LatLng(-3.3180619, 114.6003276),
 mapTypeId: google.maps.MapTypeId.ROADMAP,
 mapTypeControl: false,
 streetViewControl: false,
 panControl: false,
 zoomControlOptions: {
 position: google.maps.ControlPosition.LEFT_BOTTOM
 }
 });

 var infowindow = new google.maps.InfoWindow({
 maxWidth: 160
 });

 var markers = new Array();
 
 var iconCounter = 0;
 
 // Add the markers and infowindows to the map
 for (var i = 0; i < locations.length; i++) { 
 var marker = new google.maps.Marker({
 position: new google.maps.LatLng(locations[i][2], locations[i][3]),
 map: map,
 icon: icons[ locations[i][5]]
 });

 markers.push(marker);

 google.maps.event.addListener(marker, 'click', (function(marker, i) {
 return function() {
 var cHtml="<table>"+
 "<tr>"+
 "<td rowspan='2'><img src='" + icons[locations[i][5]] + "'></td>"+
 "<td><b>" + locations[i][0] + "</b></td>"+
 "</tr>"+
 "<tr>"+
 "<td>" + locations[i][1] + "</td>"+
 "</tr>"+
 "</table>"
 infowindow.setContent(cHtml);
 infowindow.open(map, marker);
 }
 })(marker, i));
 
 
 
 }

 function autoCenter() {
 // Create a new viewpoint bound
 var bounds = new google.maps.LatLngBounds();
 // Go through each...
 for (var i = 0; i < markers.length; i++) { 
 bounds.extend(markers[i].position);
 }
 // Fit these bounds to the map
 map.fitBounds(bounds);
 }
 autoCenter();
 </script>
</body>
</html>
ENDTEXT
cTemp=SYS(2023)+'\'+"Gvfp.html"
STRTOFILE(lcHtml,cTemp)
Thisform.oInternetExplorer.Navigate2(cTemp)
SELECT posGooglemaps
thisform.cmbPosGoogleMaps.Click


perhatikan didalam sintak Text to lcHtml ……. EndText, itu adalah script Api dari Google Map, Naa lo saya dapat dapat dari mana tu, yaa silahkan kunjugi disini Api googlemap

Screenshot_3

naa perhatikan kotak warna biru (Javascript+html) naa itu dicopas aja terus paste di dalam text to ….. endtext 

klo ga salah script diatas itu menggunakan Api Versi 3, jadi anda bisa sesuaikan lagi dengan Versi terbarunya yang ada di link tadi, naa selanjutkan coba perhatikan juga script <<PosGoogleMaps.Zoom>> , <<PosGoogleMaps.Lat>>,<<PosGoogleMaps.Lon>> ini adalah cursor dan field dari tabel tadi. Ok coba deh kita run, liat hasilnya

[update]

Capture Capture

ada icon+label, dan bisa di zoom saat diklik iconnya

Ok ni saya kasih sourcenya

[update source]

http://www.mediafire.com/download/mxy7pua9p0g91nk/googlemap.rar

dan untuk lokasi Htmlnya ada di folder temporary di C biasa, klo ditempat saya ada di direktori

C:\USERS\LENOVO\APPDATA\LOCAL\TEMP , nama file htmlnya, gvfp.html
Semoga bermanfaat dan sukses selalu untuk kali

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: