LiveCode Forums.

Posted: **Fri Aug 08, 2014 7:15 pm**

I am use the google maps to show up the marker and a circle on the mobile (sony xperia z1)
the code from LC is here

local browserID
local theURL

on preOpenCard
      # quit if we are not on a mobile device
      if the environment is not "mobile" then exit preOpenCard
  
  if  mobileCanTrackLocation() is true then
    mobileStartTrackingSensor "location"--,true
          mobileStartTrackingLocation    -- Will fire locationChanged when GPS is found
    wait 3 seconds
    put mobileCurrentLocation() into tLocation
    put tLocation["latitude"] into fld "dlat" 
    put tLocation["longitude"] into fld "dlong" 
    put fld"dlat"& comma & fld"dlong" into fld "latlong"
    
     else
          Answer "This mobile is NOT able to track GPS location"
      end if
  

    #test
    put specialFolderPath("documents") & "/tt1.html" into documentFilePath
       if there is not a file documentFilePath then
              put specialFolderPath("engine") & "/tt1.html" into engineFilePath
              put URL ("binfile:" & engineFilePath) into URL ("binfile:" & documentFilePath)
       end if
  
      put specialFolderPath("documents") & "/tt1.html" into thehtmlFile
          put URL("file:" & thehtmlFile) into theData
  put "center: new google.maps.LatLng("& fld "latlong" & ")," into line 38 of theData
  //answer theData
  
          put theData into URL ("file:" & thehtmlFile)
          put "file://" & specialFolderPath("documents") & "/tt1.html" into theURL
          replace space with "%20" in theURL
  
     # create the browser  
   mobileControlCreate "browser"
       put the result into browserID
        # set up the basic defaults
    mobileControlSet browserID, "rect", the rect of group "mybrowser"
       mobileControlSet browserID, "visible", "true"
       mobileControlSet browserID, "url", theURL
    

  
end preOpenCard
  
  
  # destroy the browser we created 
on closeCard
  if the environment is not "mobile" then 
  exit closeCard
  end if  
         mobileControlDelete browserID
end closeCard

and here is the code i use in the html file.

Code: Select all

  <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Reverse Geocoding</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

    </style>
      <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>


 var geocoder;
 var map;
 var marker;
 var infowindow = new google.maps.InfoWindow();


function initializeMap() {

     if (navigator.geolocation) {
         navigator.geolocation.getCurrentPosition(function (position) {
             revereGeoCode(position.coords.latitude, position.coords.longitude);
         });
     } else {
         console.log("er")
         // make sure to handle the failure
     }

     var mapOptions = {
         zoom: 16,
         center: new google.maps.LatLng(40.730885, -73.997383),
         mapTypeId: 'roadmap'
     }
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 }

 function revereGeoCode(lat, lng) {
     geocoder = new google.maps.Geocoder();
     var latlng = new google.maps.LatLng(lat, lng);
     geocoder.geocode({
         'latLng': latlng
     }, function (results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
             if (results[1]) {
                 // place your marker coding
                 map.setZoom(20);

                // Define circle options
                var circleOptions = {
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    map: map,
                    center: latlng,
                    radius: 20
                };

                // Add the circle to the map.
                var markerCircle = new google.maps.Circle(circleOptions);

                marker = new google.maps.Marker({
                    position: latlng,
                    map: map

                });



                 infowindow.setContent(results[0].formatted_address);
                 infowindow.open(map, marker);
             } else {
                 alert('No results found');
             }
         } else {
             alert('Geocoder failed due to: ' + status);
         }


     });
 }


//initializeMap();

 google.maps.event.addDomListener(window, 'load', initializeMap);
   </script>

  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

The results is:
in the Ipad simulator the marker and circle show up.On the android device No.
i miss something here ?

Posted: **Sat Aug 09, 2014 6:11 am**

Phew! that was a learning experience.

Not sure I'm even close to what you wanted but here is the html that worked for me;

Code: Select all

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 20,
    center: myLatlng
  }

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      
  });
    // Define circle options
                var circleOptions = new google.maps.Circle({
					center: myLatlng,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8, 
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    map: map,
                    radius: 20
                });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Make sure you change your location line in liveCode.

Simon

Posted: **Sat Aug 09, 2014 9:52 am**

thank you Simon..
The simple google maps html working for me to,the problem is that my html if you see it is Reverse Geocoding(Get the address and show up infowindow).
I have test it in the ios simulator ,safari,firefox,chrome,and i check it with console for errors,is clear and NO errors and working nice and smooth.
Only on the android side i get the map with no info window,marker,and circle..

Posted: **Sat Aug 09, 2014 10:36 am**

Hi vedus,

The results is:
in the Ipad simulator the marker and circle show up.On the android device No.

My apologies, but that is what you asked for,is that not all you want?
Because I think that is what I've shown.

Could you ask the question again detailing what you'd like?

Simon

Posted: **Sat Aug 09, 2014 11:08 am**

Simon wrote:Hi vedus,
The results is:
in the Ipad simulator the marker and circle show up.On the android device No.
My apologies, but that is what you asked for,is that not all you want?
Because I think that is what I've shown.

Could you ask the question again detailing what you'd like?

Simon

My apologies Simon you have right.
On my Html i use the Reverse Geolocation to convert lang,long to address and show up with the info window and a circle.
here is the link https://developers.google.com/maps/docu ... eolocation
the original page of the Reverse Geolocation is here and is the base of my html code in the first post. here is the link https://developers.google.com/maps/docu ... ng-reverse
on this code here,user put the lang,long in the textbox and the map show up the marker,infowindow.
the <div id="panel">is the user panel
My Question is,it is possible to remove or hide the panel and pass the data automatic? (no user input) ?
the code

Code: Select all

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Reverse Geocoding</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(40.730885,-73.997383);
  var mapOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: 'roadmap'
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeLatLng() {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var lat = parseFloat(latlngStr[0]);
  var lng = parseFloat(latlngStr[1]);
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({'latLng': latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        map.setZoom(11);
        marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        alert('No results found');
      }
    } else {
      alert('Geocoder failed due to: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
    <style>
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        width: 350px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
      #latlng {
        width: 225px;
      }
    </style>
  </head>
  <body>
    <div id="panel">
      <input id="latlng" type="text" value="40.714224,-73.961452">
      <input type="button" value="Reverse Geocode" onclick="codeLatLng()">
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

Posted: **Sat Aug 09, 2014 9:46 pm**

OK how about this;

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Reverse Geocoding</title>
<style>
html, body, #map-canvas {
	height: 100%;
	margin: 0px;
	padding: 0px
}
#panel {
	position: absolute;
	top: 5px;
	left: 50%;
	margin-left: -180px;
	z-index: 5;
	background-color: #fff;
	padding: 5px;
	border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(40.730885,-73.997383);
  var mapOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: 'roadmap'
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeLatLng() {
  var input = "40.714224,-73.961452";
  var latlngStr = input.split(',', 2);
  var lat = parseFloat(latlngStr[0]);
  var lng = parseFloat(latlngStr[1]);
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({'latLng': latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        map.setZoom(11);
        marker = new google.maps.Marker({
            position: latlng,
            map: map
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        alert('No results found');
      }
    } else {
      alert('Geocoder failed due to: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body  onload="codeLatLng();">
<div id="map-canvas"></div>
</body>
</html>

and this

Code: Select all

   put "var latlng = new google.maps.LatLng(" & fld "latlong" & ");" into line 32 of theData
   put "var input = "& quote& fld "latlong" & quote & ";" into line 42 of theData

How does that work for you? I'll let you add the circleOption.

Simon

Posted: **Sun Aug 10, 2014 11:51 am**

Yes,the example is working in the both,android-ios.
Thank you
Btw i like your signature

used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

Posted: **Tue Nov 25, 2014 10:31 am**

Dear Simon,

i'm testing the tt1.html on my device : Android kitkat 4.4.4
from file manager, open using HTMLViewer but got a blank page, any suggestion ?

regard's
SS

Posted: **Mon Dec 01, 2014 3:17 pm**

Saman Sjr. wrote:Dear Simon,

i'm testing the tt1.html on my device : Android kitkat 4.4.4
from file manager, open using HTMLViewer but got a blank page, any suggestion ?

regard's
SS

i have include a file that show up 2 markers and have the geolocation ready for use if that help you.

navi2.html.zip: 2 markers and geolocation ready; (1.89 KiB) Downloaded 446 times

LiveCode Forums.

google maps (marker) on the android device

google maps (marker) on the android device

Re: google maps (marker) on the android device

Re: google maps (marker) on the android device

Re: google maps (marker) on the android device

Re: google maps (marker) on the android device

Re: google maps (marker) on the android device

Re: google maps (marker) on the android device

Re: google maps (marker) on the android device

Re: google maps (marker) on the android device