PENGENALAN
Tutorial ini menyediakan panduan ringkas bagaimana membuat Mobile Apps yang memaparkan Peta Google Map berdasarkan JQuery Mobile Framework
LANGKAH2
2) Salin kod berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="shortcut icon" href="http://computersforpeople.info/websites/images/favicon.ico">
<link rel="apple-touch-icon" sizes="72x72" href="http://computersforpeople.info/websites/Icons/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="http://computersforpeople.info/websites/Icons/apple-touch-icon-114x114.png"/>
<link rel="icon" type="image/png" href="http://computersforpeople.info/websites/Icons/icon48.png" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://computersforpeople.info/websites/scripts/jquery-1.9.1.min.js"></script>
<script src="http://computersforpeople.info/websites/scripts/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
<link href="http://computersforpeople.info/websites/scripts/jquery/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
<script type="text/javascript">
$(window).load(function(){initialize();}) (function() {
$('a').live('click', function() {
var $this = $(this);
if ( !$this.attr('rel') || $this.attr('rel') != 'external' )
$(document.getElementById( $this.attr('href') )).remove();
});
});
</script>
<style type="text/css">
<!--
.style1 {font-size: large}
-->
</style>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
</head>
<body >
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" >
<div data-role="header" >
<h1>test</h1>
<div align="center">
</div>
</div>
<ul data-role="listview" data-inset="true" data-filter="false">
<div data-role="collapsible-set" style="padding-left: 10px; padding-bottom: 10px;">
<ul data-role="listview" data-filter="false" id="test-more" >
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var address ="Zoo Negara, Kuala Lumpur ";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: '<b>'+address+'</b>',
size: new google.maps.Size(600,400)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
<div data-role="collapsible" data-collapsed="false">
<h3>Map</h3>
<p>
<div align="center"><font size="2" color="#0000AA" face="Verdana, Arial, Helvetica, Sans-Serif"><b>
<div id="map_canvas" style="width: 300px; height: 200px"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</b></font>
<font size="2" face="Arial, Helvetica, sans-serif">
<br>
<strong>Map location not guaranteed</strong> </font> </div>
</p>
</div>
</div>
</ul> <br />
<li><a href="#contact_us" data-role="button" data-icon="info" data-iconpos="left" data-rel="dialog" data-transition="pop" id="contact">Contact Geoff Duncan</a></li>
</ul>
</div>
<div data-role="page" id="contact_us" data-title="Contact Us">
<div data-role="header">
<h1></h1>
</div>
</body>
</html>
|
3) Paste kod di atas di ruang kod di dalam Langkah 1.
Perhatikan baris no. 59 mengandungi alamat lokasi “Zoo Negara, Kuala Lumpur”.
4) Klik butang “Result Preview”.
Panel di sebelah kanan akan memaparkan lokasi “Zoo Negara, Kuala Lumpur”.
5) Catatan:
Kod ini diambil dari sumber asal http://www.xuanyinwen.com/jquery/jquerymap/demos/test.html
Saya cuma tukarkan alamat asal kepada “Zoo Negara, Kuala Lumpur".
