This android geolocation application uses PhoneGap api for phone geo position and displays the phone position point on Google Maps. jQuery Mobile is used to display the page header, footer and content map. Page is resized to full height and width for any orientation or window size. Made with Eclipse and Android SDK. This demo also works on Chrome browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Map</title>
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" />
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.1.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/cordova-1.5.0.js"></script>
<script type="text/javascript">
var map;
var marker;
var infowindow;
var watchID;
$(document).ready(function(){
document.addEventListener("deviceready", onDeviceReady, false);
//for testing in Chrome browser uncomment
//onDeviceReady();
});
//PhoneGap is ready function
function onDeviceReady() {
$(window).unbind();
$(window).bind('pageshow resize orientationchange', function(e){
max_height();
});
max_height();
google.load("maps", "3.8", {"callback": map, other_params: "sensor=true&language=en"});
}
function max_height(){
var h = $('div[data-role="header"]').outerHeight(true);
var f = $('div[data-role="footer"]').outerHeight(true);
var w = $(window).height();
var c = $('div[data-role="content"]');
var c_h = c.height();
var c_oh = c.outerHeight(true);
var c_new = w - h - f - c_oh + c_h;
var total = h + f + c_oh;
if(c_h<c.get(0).scrollHeight){
c.height(c.get(0).scrollHeight);
}else{
c.height(c_new);
}
}
function map(){
var latlng = new google.maps.LatLng(55.17, 23.76);
var myOptions = {
zoom: 6,
center: latlng,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
//get geoposition once
//navigator.geolocation.getCurrentPosition(geo_success, geo_error, { maximumAge: 5000, timeout: 5000, enableHighAccuracy: true });
//watch for geoposition change
watchID = navigator.geolocation.watchPosition(geo_success, geo_error, { maximumAge: 5000, timeout: 5000, enableHighAccuracy: true });
});
}
function geo_error(error){
//comment
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
function geo_success(position) {
map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
map.setZoom(15);
var info =
('Latitude: ' + position.coords.latitude + '<br>' +
'Longitude: ' + position.coords.longitude + '<br>' +
'Altitude: ' + position.coords.altitude + '<br>' +
'Accuracy: ' + position.coords.accuracy + '<br>' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br>' +
'Heading: ' + position.coords.heading + '<br>' +
'Speed: ' + position.coords.speed + '<br>' +
'Timestamp: ' + new Date(position.timestamp));
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
if(!marker){
//create marker
marker = new google.maps.Marker({
position: point,
map: map
});
}else{
//move marker to new position
marker.setPosition(point);
}
if(!infowindow){
infowindow = new google.maps.InfoWindow({
content: info
});
}else{
infowindow.setContent(info);
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-theme="b"><h1>Map Header</h1></div>
<div data-role="content" style="padding:0;">
<div id="map" style="width:100%;height:100%;"></div>
</div>
<div data-role="footer" data-theme="b"><h4>Map Footer</h4></div>
</div>
</html>
Download Map android application Eclipse project source map.7z, project source with jquery mobile version 1.4.3 and multipage demo map3.7z.
Build Android Application from project source
First you will need Android SDK download and install from here developer.android.com/sdk/index.html.
If you install not ADT Bundle, the you need Eclipse IDE and ADT Plugin for Eclipse. For ADT Bundle just skip next downloads.
Download and install Eclipse IDE for Java EE Developers www.eclipse.org/downloads/
Download and install ADT Plugin for Eclipse developer.android.com/sdk/eclipse-adt.html.
Now you have powerful integrated environment in which you can build Android applications.
Import project files to Eclipse
Download map.7z file and extract files with 7-Zip archiver www.7-zip.org.
Start Eclipse.
Select File -> Import... -> General -> Existing Projects into Workspace.
Select root directory, browse for folder with extracted map.7z files.
Press Finish.
Fix Android project properties
From Eclipce project pane right-click on Map project and select "Android Tools -> Fix Project Properties". You can skip this step if there is no errors with project.
Create AVD
Start AVD (Android Virtual Device) Manager and create new android virtual device with platform version greater 2.2 and start device (or Eclipce will start it after building project)
Build application
From Eclipse project pane right-click on imported Map project and select Run As -> Android Application. After a few seconds, the project is being built and installed to your android virtual device. Also you can test application in Chrome browser just open map\assets\www\index.html file from localhost or other host because Chrome has a security restriction with disabled navigator for the file protocol.
AVD Geoposition
If you see error message, then you need to set geoposition. Android virtual device don't emulate gps so you need to set manually geoposition via telnet. Open windows command line (for windows start -> run.. -> cmd), connect to your device and fix geo position. The port number can be seen in the title area of android emulator.
telnet localhost 5554 geo fix 25.28 54.68
Installing APK Application on Android virtual device
Of course you can skip building and immediately install Map.apk file from bin folder. Then you will need Android SDK installed and start Android virtual device. Next start command line (for windows start -> run.. -> cmd) and install by command
C:\progra~1\Android\android-sdk\platform-tools\adb.exe install Z:\android\project\map\bin\Map.apk
change path for Map.apk where files are extracted.
More information
jQuery JavaScript library
jQuery Mobile HTML5-based user interface system for all popular mobile device platforms
Phonegap get started guide for Android
Google Maps API
Thanks for this great job but the application run just for the first time when running eclipse (for android) and after when e start it again we have the alert message code 3 Timed out
There is timeout set to 5000 ms in line 53, try to increase. Also you must set geo position for the Android emulator via telnet, because Android emulator don't emulate gps.
Thanks so much! This is the first tutorial of Google Maps that actually worked on my device as soon as trying it out!
Thank you so much for your great work done here...
I got result easily from this example.
Hi , thanks for the gr8 example !
How do you install map.7z ?
map.7z is 7-Zip archiver file, you can download archiver http://www.7-zip.org/ and extract files.
I know but I'm using the AVD , I dont know how to install apps on it .....
Becuase this kind of app using virtual gps\wifi i've got alot of questions :
first is about the installation of map.7z on AVD ,
where to extract the files ?
how to upload APK file to the AVD ?
other q's about AVD :
What are the features on the AVD I must turn on in order to allow it use GPS and location services?
does it effect this app if that features turned off ? ?
Thank you for answers ....
I just updated post with more info about Eclipse project Android application building and apk install.
where to extract the files ?
You can extract map.7z files anywhere, just remember where they are, so you can import project to Eclipse or just install Map.apk file.
how to upload APK file to the AVD ?
Install any apk file with adb.exe from Android SDK.
What are the features on the AVD I must turn on in order to allow it use GPS and location services?
No special features, gps is always on and just virtual. You need to set AVD geo position via telnet in order to get that position from AVD to application or you will not get position. Also application must have location permission settings in AndroidManifest.xml without it you will get error. More info http://developer.android.com/guide/topics/location/obtaining-user-location.html
helped alot !
thanks ,
another question ,
if I want to resend my location ,or update by move , does it possible ?
Yes, set new location again via telnet, use geo fix command with longitude and latitude in decimal degrees, and an optional altitude in meters. For example:
hi ,
I tried , nothing changed , only if I reopen the app its updated . 🙁
Yes, it's because navigator.geolocation.getCurrentPosition function get location only once, so to update the location continually I changed to navigator.geolocation.watchPosition function. Source code updated. Now start application and send geo fix command, probably error will be, click ok and location will be set. Location will be set for any gps change with geo fix. Tested with Android AVD 2.2 and 4.0.3. Thanks for idea to update location continually!
Thank you for your explanation and fix.
Last question , I hope 🙂 .
Does it updates every period of time or by moving around it sense changes?
How can you manipulate that?
Again , thanks !
Idan 🙂
Not every period of time but only when the position data changes (either by device movement or if more accurate geo information arrives), then a callback is called with that updated position information. This is done using the watchPosition() function.
Not works for me, open the app in the emulator calculates the height and then nothing, looks like not load the coordinates, i try send the coords via telnet and nothing use the DDMS and nothing, then appears the time out
Open app, send the coords via telnet, then click Ok on alert message, and marker will be placed. Or you can edit code and delete alert message see geo_error function, install and start new app, send the coords and marker should be placed for coords.
Nice Job, but when I am coping the source code into my own html file only header and footer are shown but not the div "content". Where is the problem?
Also you need to include jquery files in project. You can test with chrome browser for javascript errors open javascript console Ctrl+Shift+J. To run in chrome browser uncomment line 25. Here just tested on AVD 4.2 http://polyetilen.lt/en/files/2013/03/map.jpg working fine.
I use the code but it run only on index.html, if I run in other page it doesn't work. Anyone know a solution?
Thanks
Yes this code example for single page. For many pages you can load map api on device ready, and initialize map only when map tag is visible this mean map page shows. Also calculate max height only for visible elements (current visible page). Example code with two pages:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>Map</title> <link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" /> <script type="text/javascript" src="js/jquery-1.6.4.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.0.1.js"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="js/cordova-1.5.0.js"></script> <script type="text/javascript"> var map; var marker; var infowindow; var watchID; $(document).ready(function(){ document.addEventListener("deviceready", load_map, false); //for testing in Chrome browser uncomment //load_map(); }); $(document).bind("pageshow", function(){ if($("#map:visible").length){ show_map(); } }); function load_map(){ google.load("maps", "3.11", {"callback": onDeviceReady, other_params: "sensor=true&language=en"}); } //PhoneGap is ready function function onDeviceReady() { $(window).unbind(); $(window).bind('pageshow resize orientationchange', function(e){ max_height(); }); max_height(); } function max_height(){ var h = $('div:visible[data-role="header"]').outerHeight(true); var f = $('div:visible[data-role="footer"]').outerHeight(true); var w = $(window).height(); var c = $('div:visible[data-role="content"]'); var c_h = c.height(); var c_oh = c.outerHeight(true); var c_new = w - h - f - c_oh + c_h; var total = h + f + c_oh; if(c_oh < c.get(0).scrollHeight){ c.height(c.get(0).scrollHeight); }else{ c.height(c_new); } } function show_map(){ if(!map){ var latlng = new google.maps.LatLng(55.17, 23.76); var myOptions = { zoom: 6, center: latlng, streetViewControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControl: true }; map = new google.maps.Map(document.getElementById("map"), myOptions); google.maps.event.addListenerOnce(map, 'tilesloaded', function(){ //watch for geoposition change watchID = navigator.geolocation.watchPosition(geo_success, geo_error, { maximumAge: 5000, timeout: 5000, enableHighAccuracy: true }); }); $("#map_zoom_in").click(function(){ map.setZoom(map.getZoom() + 1); return false; }); $("#map_zoom_out").click(function(){ map.setZoom(map.getZoom() - 1); return false; }); } } function geo_error(error){ //alert error for debug alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } function geo_success(position) { map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); map.setZoom(15); var info = ('Latitude: ' + position.coords.latitude + '<br>' + 'Longitude: ' + position.coords.longitude + '<br>' + 'Altitude: ' + position.coords.altitude + '<br>' + 'Accuracy: ' + position.coords.accuracy + '<br>' + 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br>' + 'Heading: ' + position.coords.heading + '<br>' + 'Speed: ' + position.coords.speed + '<br>' + 'Timestamp: ' + new Date(position.timestamp)); var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); if(!marker){ //create marker marker = new google.maps.Marker({ position: point, map: map }); }else{ //move marker to new position marker.setPosition(point); } if(!infowindow){ infowindow = new google.maps.InfoWindow({ content: info }); }else{ infowindow.setContent(info); } google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } </script> </head> <body> <div data-role="page" id="index"> <div data-role="header" data-theme="b"><h1>Page Header</h1></div> <div data-role="content"> <a href="#map_page" data-role="button" data-inline="true">Map</a> </div> <div data-role="footer" data-theme="b"><h4>Page Footer</h4></div> </div> <div data-role="page" id="map_page" data-rel="back"> <div data-role="header" data-theme="b"> <a href="#index" data-icon="arrow-l">Back</a> <h1>Map Header</h1> </div> <div data-role="content" style="padding:0;"> <div id="map" style="width:100%;height:100%;"></div> </div> <div data-role="footer" data-theme="b"> <div data-role="controlgroup" data-type="horizontal"> <a id="map_zoom_in" href="#" data-role="button" data-icon="plus" data-iconpos="notext"></a> <a id="map_zoom_out" href="#" data-role="button" data-icon="minus" data-iconpos="notext"></a> </div> </div> </div> </html>well the sample is a great one but I need help in how to add static markers on the map...
Add as usual, just after map created create markers:
map = new google.maps.Map(document.getElementById("map"), myOptions); //create markers markers = new Array(); markers[0] = new google.maps.Marker({ position: new google.maps.LatLng(54.687156, 25.279651), map: map }); markers[1] = new google.maps.Marker({ position: new google.maps.LatLng(54.898496,23.903542), map: map });More info https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
Thanks for this great work
i try to run the App in Chrom, but I always get an error message
code:1 message: user denied geolocation .
has someone an idea ?
Possible you browse by the file protocol, but Chrome has a security restriction for the file protocol. Just host file and browse from a server or localhost (in example http://localhost/index.html)
Thank u sir .. now it works ..
I have another question
when I test the app in chrome browser, it works correctly. but when I test it in the chrome emulator (ripple emulator), after the 10 seconds (timeout) I get automatically the position of the city of waterloo ..
has someone an idea ?
It's because ripple emulator have own gps simulator with default geo location of Waterloo city. To change gps location open Geo location tab from left side and drag map to new location or change latitude and longitude. While change geo location data it's simulate gps and call navigator.geolocation.watchPosition function and update position on app map. Here is screenshot.
Nice Work!!!
Thumbs up bro...
Well done 🙂
Thanks a lot.
I love this post, it is very easy to understand and implement.
much of my logics has been cleared.
thanks again 🙂 🙂
Thanks, but now I use native java development with Android SDK and Google Maps Android API because it is faster then PhoneGap app 🙂
i have 2 questions,
1. After putting static marker on map, those static markers are not showing info window , what do i do to make every marker show info window even it is placed statically?
2. map is refreshing after a particular interval and looses the current focus and loads the coordinates of user's location and i need that on a particular event like a button click.
please help buddy
Add marker after map created, then add infowindow, then add marker click event to open infowindow:
map = new google.maps.Map(document.getElementById("map"), myOptions); //create markers //first marker markers = new Array(); markers[0] = new google.maps.Marker({ position: new google.maps.LatLng(54.6871, 25.2796), map: map }); //first marker infowindow content markers[0].infowindow = new google.maps.InfoWindow({ content: 'marker 1 InfoWindow content' }); //first marker click event open infowindow google.maps.event.addListener(markers[0], 'click', function() { markers[0].infowindow.open(map, markers[0]); }); //second marker markers[1] = new google.maps.Marker({ position: new google.maps.LatLng(54.8984,23.9035), map: map }); //second marker infowindow content markers[1].infowindow = new google.maps.InfoWindow({ content: 'marker 2 InfoWindow content' }); //second marker click event open infowindow google.maps.event.addListener(markers[1], 'click', function() { markers[1].infowindow.open(map, markers[1]); });For button just add navigator.geolocation.getCurrentPosition for click event
$("#show_my_location").click(function(){ watchID = navigator.geolocation.getCurrentPosition(geo_success, geo_error, { maximumAge: 5000, timeout: 5000, enableHighAccuracy: true }); return false; });Here is full code with 2 pages, map on second page with static markers and show location button on footer:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <title>Map</title> <link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" /> <script type="text/javascript" src="js/jquery-1.6.4.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.0.1.js"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="js/cordova-1.5.0.js"></script> <script type="text/javascript"> var map; var marker; var infowindow; var watchID; $(document).ready(function(){ document.addEventListener("deviceready", load_map, false); //for testing in Chrome browser uncomment //load_map(); }); $(document).bind("pageshow", function(){ if($("#map:visible").length){ show_map(); } }); function load_map(){ google.load("maps", "3.11", {"callback": onDeviceReady, other_params: "sensor=true&language=en"}); } //PhoneGap is ready function function onDeviceReady() { $(window).unbind(); $(window).bind('pageshow resize orientationchange', function(e){ max_height(); }); max_height(); } function max_height(){ var h = $('div:visible[data-role="header"]').outerHeight(true); var f = $('div:visible[data-role="footer"]').outerHeight(true); var w = $(window).height(); var c = $('div:visible[data-role="content"]'); var c_h = c.height(); var c_oh = c.outerHeight(true); var c_new = w - h - f - c_oh + c_h; var total = h + f + c_oh; if(c_oh < c.get(0).scrollHeight){ c.height(c.get(0).scrollHeight); }else{ c.height(c_new); } } function show_map(){ if(!map){ var latlng = new google.maps.LatLng(55.17, 23.76); var myOptions = { zoom: 6, center: latlng, streetViewControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControl: true }; map = new google.maps.Map(document.getElementById("map"), myOptions); //create markers //first marker markers = new Array(); markers[0] = new google.maps.Marker({ position: new google.maps.LatLng(54.6871, 25.2796), map: map }); //first marker infowindow content markers[0].infowindow = new google.maps.InfoWindow({ content: 'marker 1 InfoWindow content' }); //first marker click event open infowindow google.maps.event.addListener(markers[0], 'click', function() { markers[0].infowindow.open(map, markers[0]); }); //second marker markers[1] = new google.maps.Marker({ position: new google.maps.LatLng(54.8984,23.9035), map: map }); //second marker infowindow content markers[1].infowindow = new google.maps.InfoWindow({ content: 'marker 2 InfoWindow content' }); //second marker click event open infowindow google.maps.event.addListener(markers[1], 'click', function() { markers[1].infowindow.open(map, markers[1]); }); $("#map_zoom_in").click(function(){ map.setZoom(map.getZoom() + 1); return false; }); $("#map_zoom_out").click(function(){ map.setZoom(map.getZoom() - 1); return false; }); $("#show_my_location").click(function(){ watchID = navigator.geolocation.getCurrentPosition(geo_success, geo_error, { maximumAge: 5000, timeout: 5000, enableHighAccuracy: true }); return false; }); } } function geo_error(error){ //alert error for debug alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } function geo_success(position) { map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); map.setZoom(15); var info = ('Latitude: ' + position.coords.latitude + '<br>' + 'Longitude: ' + position.coords.longitude + '<br>' + 'Altitude: ' + position.coords.altitude + '<br>' + 'Accuracy: ' + position.coords.accuracy + '<br>' + 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br>' + 'Heading: ' + position.coords.heading + '<br>' + 'Speed: ' + position.coords.speed + '<br>' + 'Timestamp: ' + new Date(position.timestamp)); var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); if(!marker){ //create marker marker = new google.maps.Marker({ position: point, map: map }); }else{ //move marker to new position marker.setPosition(point); } if(!infowindow){ infowindow = new google.maps.InfoWindow({ content: info }); }else{ infowindow.setContent(info); } google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } </script> </head> <body> <div data-role="page" id="index"> <div data-role="header" data-theme="b"><h1>Page Header</h1></div> <div data-role="content"> <a href="#map_page" data-role="button" data-inline="true">Map</a> </div> <div data-role="footer" data-theme="b"><h4>Page Footer</h4></div> </div> <div data-role="page" id="map_page" data-rel="back"> <div data-role="header" data-theme="b"> <a href="#index" data-icon="arrow-l">Back</a> <h1>Map Header</h1> </div> <div data-role="content" style="padding:0;"> <div id="map" style="width:100%;height:100%;"></div> </div> <div data-role="footer" data-theme="b"> <div data-role="controlgroup" data-type="horizontal"> <a id="map_zoom_in" href="#" data-role="button" data-icon="plus">Zoom In</a> <a id="map_zoom_out" href="#" data-role="button" data-icon="minus">Zoom Out</a> <a id="show_my_location" href="#" data-role="button" data-icon="minus">Show my location</a> </div> </div> </div> </html>Thanks a lot,
It helped so much.
you are great 🙂
thanks again 😉
hi sir
how to use the current position is automatically located and given a target destination address of the user (marker).
You can create static user markers just after map created:
map = new google.maps.Map(document.getElementById("map"), myOptions); //create user markers markers = new Array(); markers[0] = new google.maps.Marker({ position: new google.maps.LatLng(54.687156, 25.279651), map: map }); markers[1] = new google.maps.Marker({ position: new google.maps.LatLng(54.898496,23.903542), map: map });More info https://developers.google.com/maps/documentation/javascript/examples/marker-simple
So you will have position marker by variable marker and user markers by array markers.
hi sir
i will get the Bounds and i have added this 3 lines
bounds = map.getBounds();
ne = bounds.getNorthEast();
sw = bounds.getSouthWest();
but i get the Error "has no method getBounds".
has someone an idea ?
I found the error, the problem was the position of the 3 lines 😉
hello sir
i have a question about the function max_height()
what is the difference between:
var c_h = c.height(); and
var c_oh = c.outerHeight(true);
and what means this if-Condition
if(c_h<c.get(0).scrollHeight){
c.height(c.get(0).scrollHeight);
}else{
c.height(c_new);
}
has someone an idea ?
Thanks
var c_h = c.height(); it is content height without padding, border, margin.
var c_oh = c.outerHeight(true); it is content height with padding, border, margin
when content scroll view height large then content height,
if(c_h<c.get(0).scrollHeight){then set content height same as scroll view
Else set content height to windows height without footer and header
Simply when no scroll then stretch content to fill window.
thank you sir ..
I have another question about the option enableHighAccuracy and the Event tilesloaded
are they required ? and why they are used ?
thank you very much .
If enableHighAccuracy is true and if the device is able to provide a more accurate position, it will do so. You can try false, may get position faster and not accurate. tilesloaded event is fired when the visible map tiles have finished loading. So till map not loaded, there is nothig to do with map.
Thanks a lot, 🙂
Pingback: Header + map + footer using 100% height | Technology & Programming
Bravo !!Merci pour ce grand travail ! 🙂
how to display the tracking?
You can draw polyline between points. Remember old position with global variable, then after marker move to new position, draw polyline with old and new position. And change old position variable with new position data. Here is more info about polyline
https://developers.google.com/maps/documentation/javascript/shapes#polylines
how to add a marker through sqlite
Here is documentation how to work with SQL Lite on cordova 1.5.0 (used in posted example) http://cordova.apache.org/docs/en/1.5.0/phonegap_storage_storage.md.html#Storage Using api you can open database, make query, get result and show it on map.
Y si en lugar de usar eclipse usas dreamweaver....sabes algun buen tutorial para eclipse, gracias
I downloade the appliction and try to run in my project But its not working. it give the error code: 3 timeout error. i increase the time but not able to get the output. plz help me..
Also must be enabled GPS on device. If using Android Virtual Device coordinates for GPS must be set, look for AVD Geoposition in post.
Thank u.i got the output..
Thanks sir for this great blog post..
i downloaded you map project source code..it works fine..
even i have run the index.html file on my firefox browser, at first it worked nice and it was showing my coordinates but after that whenever i am trying to run that code it is just showing the map, not my point and that pin..
even when i am using this code on my project some time it works well and some time it doesn't.
i have tried this both on actual device and browser..
can you please help me...
Try to check for javascript errors in browser console (press F12 and click on Console tab).
one more thing....i did some changes and now its working fine on firefox browser...but then i build it as a android project and create apk file...i tried to run the apk file on my device..now map is showing but current location point is not showing on the mobile...
Hello Aleksandras !
Its really nice work that you make. It work nice but i have one big problem. If you have multiple pages and if you will turn on automatic back buttons, for example:
The back button will not work not only on that page but even on all pages 🙁
Please check that and answer if you can 🙂
Best regards
Marcin
The code to back button is data-add-back-btn="true"
Hi, yes seems there is problem with bind function. I just rewritten code with latest jquery mobile version 1.4.3 and auto back button working now with new code:
function onDeviceReady() { $(window).on("pagecontainershow", function( event, ui ) { //init map when map page show if($(":mobile-pagecontainer").pagecontainer("getActivePage").attr('id') == 'map_page'){ max_height(); show_map(); } }); $(window).on("orientationchange resize", function( event, ui ) { if($(":mobile-pagecontainer").pagecontainer("getActivePage").attr('id') == 'map_page'){ max_height(); } }); }Here is project source http://polyetilen.lt/en/files/2014/09/map3.7z
I notice that there is some bug. If you have multilevel pages for example if you hit from main menu: Select City (first page) -> New York (second page) -> Hotels (this is the button to map page in New York page). Then the map zoom dont work ... Can you check that ? Is there some completle refresh Google Map on enter to the map page ?
Or just try go to "map" page, zoom in, then go to "test" page and back to "map" page and the map dont work (zoom in, zoom out, refresh map), thats strange ...
I didn't found this bug in project map3.7z, after navigation over map->test->back->map then zoom buttons in page header are working normally. Try test you project in browser with opened console (F12 for chrome or firefox) and watch for javascript errors.
Unfornatelly i have this problem. I think the best solution will be separate the map page to map.html page. This should load the map after each visit on map page ? For now i have index.html and map.html but map not appear after click button from index.html ... 🙁
Please see the YouTube movie what i have on mind. The map just dont refresh after zoom in (project map3.7z). https://www.youtube.com/watch?v=LEY7ynr5e-4&feature=youtu.be
Seems when map hidden it resize to zero, so when show it again need to trigger resize event. I added this in show_map function:
if(!map){ ... }else{ var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); }And updated map3.7z file.
For short while that fix is worked ! But after few minutes again the same. Even "Go back" button stop work 🙁 Can the map be refresh all the time after open map page ? Please see the actual movie:
https://www.youtube.com/watch?v=Z3L7XB1waHM&feature=youtu.be
I tried on actual device working normally. For virtual device it is super slow. Back button is generating automatically by jQuery mobile, so I don't know why it's stop working. You can refresh map every time remove if(!map) in function show_map() and this will generate new map every time page open. Or simply just use for map Google Maps Embed API https://developers.google.com/maps/documentation/embed/guide generate iframe html code and insert to page.
Even if I remove if(!map) the map dont refresh after zoom in in my android device. Go back button dont work properly. I really dont know why that is happen 🙁 Mayby is some way to clear DOM on enter map page ? I really confused and i will try embed solution.
I make it working - just change script to cordova 1.9. API Level 8, Android 2.2.
svp Monsieur pour moi ça marche pas il m'affiche seulement map sans coordonnées de localisation. j'ai essayé d'installet cordova de vouveau et de creer mon projet mais en vain. svp aidez moi c urgent
marker click event open infowindow not working...
infowindow coming but going last one
for(i=0;i<5; i++)
{
var contentString='';
var mark = 'markers';
var inf;
var icon='lightblue'+(i+1)+'.gif';
var lat=safeZoneList[i].zone_lat;
var lng=safeZoneList[i].zone_lng;
contentString =('Safezone Name : ' + safeZoneList[i].zone_name + '' +
'Longitude : ' + lat + '' +
'Altitude : ' + lng + '');
//alert("contentString 2: : "+contentString);
//alert(" count : "+(m+i));
markers = (mark+(i+1)); //for increment
markers = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
icon:'imgs/'+icon,
map: map
});
markers.infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(markers, 'click', function() {
markers.infowindow.open(map, markers);
});
}
Info window coming for last one, not for all
Because you create infowindow on variable markers, so after loop ends variable markers have only last marker:
for(i=0;i<5; i++){ ... //marker creation markers = new google.maps.Marker... ... //infowindow creation markers.infowindow = new google.maps.InfoWindow... }You can create array of markers with own infowindow for each marker:
var markers = new Array(); for(i=0; i<5; i++){ ... //marker creation markers[i] = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), icon:'imgs/'+icon, map: map }); //infowindow creation markers[i].infowindow = new google.maps.InfoWindow({ content: contentString }); google.maps.event.addListener(markers[i], 'click', function() { markers[i].infowindow.open(map, markers[i]); }); }