http://demos.jquerymobile.com/1.4.0/map-geolocation/
I'm going to do these things in this example.
- Add google map to my app.
- Get my current location and add marker.
- Show information window with the address when the marker is clicked.
- Show the boundary position of the google map when a button is clicked.
1. Prepare Page
<html>
<head>
<link rel="stylesheet" href="css/jquery.mobile-1.4.4.min.css" />
<style>
#map-page, #map-canvas { width: 100%; height: 93%; padding: 1px; }
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<!-- import google map js -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<div data-role="page" id="map-page" data-url="map-page">
<div data-role="header">
<h1>Google map demo</h1>
<a href="#" id='showBounds' class="ui-btn ui-icon-search ui-btn-icon-left">Show</a>
</div>
<div role="main" class="ui-content" id="map-canvas">
<!-- map loads here... -->
</div>
</div>
</html>
2. Prepare Script
<script>
/*
* Google Maps documentation: http://code.google.com/apis/maps/documentation/javascript/basics.html
* Geolocation documentation: http://dev.w3.org/geo/api/spec-source.html
*/
var bounds;
var map;
$( document ).on( "pageinit", "#map-page", function() {
var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434); // Default to Hollywood, CA when no geolocation support
if ( navigator.geolocation ) {
function success(pos) {
// Location found, show map with these coordinates
//alert(pos.coords.latitude);
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail(error) {
drawMap(defaultLatLng); // Failed to find location, show default map
}
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
} else {
drawMap(defaultLatLng); // No geolocation support, show default map
}
function drawMap(latlng) {
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Greetings!",
});
var contentString = '<div id="content"><h3>Info</h1></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
showAddressFromLatLang(map,marker);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
bounds = map.getBounds();
});
// var b = map.getBounds();
// alert(b);
//alert(b.getNorthEast().lat());
// alert(b.getCenter().lat());
}
});
function showAddressFromLatLang(map,marker){
var pos = marker.getPosition();
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'latLng': pos}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if(results[0]) {
var infowindow0 = new google.maps.InfoWindow({
content: '<div id="content"><h3>' + results[0].formatted_address + '</h3></div>'
});
infowindow0.open(map,marker);
}
}else{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
$( "#showBounds" ).click(function() {
alert(bounds); // .getSouthWest());
});
</script>
3. Edit config.xml
- Add these lines to config.xml
<feature name="Geolocation">
<param name="ios-package" value="CDVLocation" />
<param name="android-package" value="org.apache.cordova.GeoBroker" />
</feature>
4. Add permission for android
- Add these lines to AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
5. Run...
When 'Show' button is clicked you can see the boundary positions.
$ cordova run android
No comments:
Post a Comment