mirror of
https://github.com/purplecabbage/phonegap-plugins.git
synced 2026-01-15 01:08:17 -05:00
103 lines
3.0 KiB
HTML
Executable File
103 lines
3.0 KiB
HTML
Executable File
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<!-- Change this if you want to allow scaling -->
|
|
<meta name="viewport" content="width=default-width; user-scalable=no" />
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
|
|
<title>MapTest</title>
|
|
|
|
<!-- iPad/iPhone specific css below, add after your main css >
|
|
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
|
|
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
|
|
-->
|
|
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
|
|
<script type="text/javascript" charset="utf-8" src="MapKitPlug.js"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
// If you want to prevent dragging, uncomment this section
|
|
/*
|
|
function preventBehavior(e) {
|
|
e.preventDefault();
|
|
};
|
|
document.addEventListener("touchmove", preventBehavior, false);
|
|
*/
|
|
|
|
function onBodyLoad() {
|
|
document.addEventListener("deviceready",onDeviceReady,false);
|
|
}
|
|
|
|
function cbMapCallback() {
|
|
alert(arguments[0]);
|
|
}
|
|
|
|
/* When this function is called, PhoneGap has been initialized and is ready to roll */
|
|
function onDeviceReady() {
|
|
|
|
}
|
|
|
|
var pins = [
|
|
{ lat:49.281468,
|
|
lon:-123.104446,
|
|
title:"Nitobi HQ",
|
|
pinColor:"purple",
|
|
selected:true
|
|
},
|
|
{ lat:49.28267206508114,
|
|
lon:-123.09438228607178,
|
|
title:"Oppenheimer Park",
|
|
pinColor:"green",
|
|
selected:false
|
|
}
|
|
]
|
|
|
|
function showMap() {
|
|
// do your thing!
|
|
var mapOptions = {
|
|
buttonCallback: "cbMapCallback",
|
|
height: 360,
|
|
diameter: 1000,
|
|
offsetTop: 25,
|
|
lat: pins[0].lat,
|
|
lon: pins[0].lon
|
|
};
|
|
|
|
window.plugins.mapKit.showMap();
|
|
window.plugins.mapKit.setMapData(mapOptions);
|
|
window.plugins.mapKit.addMapPins(pins);
|
|
}
|
|
|
|
function hideMap() {
|
|
window.plugins.mapKit.hideMap();
|
|
}
|
|
|
|
function clearPins() {
|
|
window.plugins.mapKit.clearMapPins();
|
|
}
|
|
|
|
function resizeMap() {
|
|
var mapOptions = {
|
|
height:260
|
|
}
|
|
|
|
window.plugins.mapKit.setMapData(mapOptions);
|
|
}
|
|
|
|
function zoomIn() {
|
|
var mapOptions = {
|
|
diameter: 30
|
|
}
|
|
|
|
window.plugins.mapKit.setMapData(mapOptions);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="onBodyLoad()">
|
|
<button style="top:400px;position:absolute;" onclick="showMap()">Show</button>
|
|
<button style="left:63px;top:400px;position:absolute;" onclick="hideMap()">Hide</button>
|
|
<button style="left:115px;top:400px;position:absolute;" onclick="resizeMap()">Shrink</button>
|
|
<button style="left:175px;top:400px;position:absolute;" onclick="zoomIn()">Zoom</button>
|
|
<button style="left:230px;top:400px;position:absolute;" onclick="clearPins()">Clear Pins</button>
|
|
</body>
|
|
</html>
|