How to show a users location on a Map

Get Started | Login

Discussion Forums > Uncategorized

Replies: 2 Views: 446

trailman Aspiring developer Posts: 280 Reg: Dec 10, 2010 Sedona, az 6,550	confirm \| cancel 08/25/11 04:05 PM (14 years ago) How to show a users location on a Map Below is the code to type into a Custom HTML menu. This will be used instead of a Multiple Location Map. On the iPhone the end user must have the latest update to IOS. After a refresh for the app on your phone and clicking on your map (that you have saved to google maps) You will see a pop up asking permission to use the current location of your phone. Click OK. The map will pop up on the phone and you will see a bouncing push pin (or whatever you call that thing) showing your location. You will have to go in and out of the map each time you want to check your location. In other words, it doesn't work like the GPS while you're driving. For my purposes this should work great because in a hiking app you don't want to run your battery down while out on a trail. I'm recommending to the end user not to leave their GPS on during their hike. Feel free to use the code for your own app. All you will have to change is the URL for the map (var hikingTrailUrl). I have not got this to work on Android. I think it has something to do with the handsets not all being the same. Using this method you don't have to change your buzztouch back end at all. Some of the other ideas I got for this function required gutting the buzz touch code. (at least that's what the coders told me). Anyway, I hope this helps some of you. <!DOCTYPE html> <html> <head> <meta name=viewport content=initial-scale=1.0, user-scalable=no /> <style type=text/css> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type=text/javascript src=http://maps.googleapis.com/maps/api/js?sensor=true> </script> <script type=text/javascript> var map; var marker; var hikingTrailUrl = 'http://maps.google.com/maps/ms?ie=UTF8&hl=en&authuser=0&msa=0&output=kml&msid=215103748627704014967.0004993573a86ab3bae2d'; function initialize() { var myOptions = { zoom: 16, panControl: false, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DEFAULT }, scaleControl: true, streetViewControl: false, overviewMapControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); var trailLayer = new google.maps.KmlLayer(hikingTrailUrl); trailLayer.setMap(map); if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); map.setCenter(pos); marker = new google.maps.Marker({ map:map, draggable: false, animation: google.maps.Animation.BOUNCE, position: pos }); }, function() { handleNoGeolocation(true); }); }else{ // Browser doesn't support Geolocation handleNoGeolocation(false); } } function handleNoGeolocation(errorFlag) { if (errorFlag) { var content = 'Error: The Geolocation service failed.'; } else { var content = 'Error: Your browser does not support geolocation.'; } var options = { map: map, position: new google.maps.LatLng(60, 105), content: content }; var infowindow = new google.maps.InfoWindow(options); map.setCenter(options.position); } </script> </head> <body onload=initialize()> <div id=map_canvas style=width:100%; height:100%></div> </body> </html> Title Comments Below is the code to type into a Custom HTML menu. This will be used instead of a Multiple Location Map. On the iPhone the end user must have the latest update to IOS. After a refresh for the app on your phone and clicking on your map (that you have saved to google maps) You will see a pop up asking permission to use the current location of your phone. Click OK. The map will pop up on the phone and you will see a bouncing push pin (or whatever you call that thing) showing your location. You will have to go in and out of the map each time you want to check your location. In other words, it doesn't work like the GPS while you're driving. For my purposes this should work great because in a hiking app you don't want to run your battery down while out on a trail. I'm recommending to the end user not to leave their GPS on during their hike. Feel free to use the code for your own app. All you will have to change is the URL for the map (var hikingTrailUrl). I have not got this to work on Android. I think it has something to do with the handsets not all being the same. Using this method you don't have to change your buzztouch back end at all. Some of the other ideas I got for this function required gutting the buzz touch code. (at least that's what the coders told me). Anyway, I hope this helps some of you. <!DOCTYPE html> <html> <head> <meta name=viewport content=initial-scale=1.0, user-scalable=no /> <style type=text/css> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type=text/javascript src=http://maps.googleapis.com/maps/api/js?sensor=true> </script> <script type=text/javascript> var map; var marker; var hikingTrailUrl = 'http://maps.google.com/maps/ms?ie=UTF8&hl=en&authuser=0&msa=0&output=kml&msid=215103748627704014967.0004993573a86ab3bae2d'; function initialize() { var myOptions = { zoom: 16, panControl: false, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE }, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DEFAULT }, scaleControl: true, streetViewControl: false, overviewMapControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); var trailLayer = new google.maps.KmlLayer(hikingTrailUrl); trailLayer.setMap(map); if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); map.setCenter(pos); marker = new google.maps.Marker({ map:map, draggable: false, animation: google.maps.Animation.BOUNCE, position: pos }); }, function() { handleNoGeolocation(true); }); }else{ // Browser doesn't support Geolocation handleNoGeolocation(false); } } function handleNoGeolocation(errorFlag) { if (errorFlag) { var content = 'Error: The Geolocation service failed.'; } else { var content = 'Error: Your browser does not support geolocation.'; } var options = { map: map, position: new google.maps.LatLng(60, 105), content: content }; var infowindow = new google.maps.InfoWindow(options); map.setCenter(options.position); } </script> </head> <body onload=initialize()> <div id=map_canvas style=width:100%; height:100%></div> </body> </html>

ianJamesPiano Code is Art Posts: 2661 Reg: Feb 13, 2011 Palm Springs, C... 37,010	08/25/11 07:48 PM (14 years ago) Thanks Trailman...that's very cool! Comments Thanks Trailman...that's very cool!

trailman Aspiring developer Posts: 280 Reg: Dec 10, 2010 Sedona, az 6,550	09/24/11 11:51 AM (14 years ago) Looks like this only works with BT version 1.4. Any idea why? b Comments Looks like this only works with BT version 1.4. Any idea why? b

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.