LiveCode Forums.

Posted: **Mon Apr 23, 2012 11:53 pm**

Anyone know how to retrieve the center Lat n Lng from google maps?

Been looking at the link below to centre the map on a specific location as my notes state.

I can center the map with a pin but can't retreive the lat n lng.

Anyone know how to retrieve the lat n lng from google maps with an update to the html code listed here
in livecode?
Or perhaps another way to centre and retrieve lat n lng with livecode?

I'd be happy to chase down any leads and post my findings.

tia

Set Centre as home:
google-developers.appspot.com/maps/documentation/javascript/examples/control-custom-state
https://google-developers.appspot.com/m ... stom-state
I want to
Over lay a pointer on android browser to point to center so I can see the centre position of the map
move map behind to place on exact map position (say specific street corner or park or bike path entrance)
then get lat lng
then send to bike riding buddies to meet me here

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Custom Controls</title>
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

/**
 * The HomeControl adds a control to the map that
 * returns the user to the control's defined home.
 */

// Define a property to hold the Home state
HomeControl.prototype.home_ = null;

// Define setters and getters for this property
HomeControl.prototype.getHome = function() {
  return this.home_;
}

HomeControl.prototype.setHome = function(home) {
  this.home_ = home;
}

function HomeControl(controlDiv, map, home) {

  // We set up a variable for this since we're adding
  // event listeners later.
  var control = this;
  
  // Set the home property upon construction
  control.home_ = home;

  // Set CSS styles for the DIV containing the control
  // Setting padding to 5 px will offset the control
  // from the edge of the map
  controlDiv.style.padding = '5px';

  // Set CSS for the control border
  var goHomeUI = document.createElement('div'); 
  goHomeUI.style.backgroundColor = 'white';
  goHomeUI.style.borderStyle = 'solid';
  goHomeUI.style.borderWidth = '2px';
  goHomeUI.style.cursor = 'pointer';
  goHomeUI.style.textAlign = 'center';
  goHomeUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(goHomeUI);

  // Set CSS for the control interior
  var goHomeText = document.createElement('div');
  goHomeText.style.fontFamily = 'Arial,sans-serif';
  goHomeText.style.fontSize = '12px';
  goHomeText.style.paddingLeft = '4px';
  goHomeText.style.paddingRight = '4px';
  goHomeText.innerHTML = '<b>Home</b>';
  goHomeUI.appendChild(goHomeText);
  
  // Set CSS for the setHome control border
  var setHomeUI = document.createElement('div');
  setHomeUI.style.backgroundColor = 'white';
  setHomeUI.style.borderStyle = 'solid';
  setHomeUI.style.borderWidth = '2px';
  setHomeUI.style.cursor = 'pointer';
  setHomeUI.style.textAlign = 'center';
  setHomeUI.title = 'Click to set Home to the current center';
  controlDiv.appendChild(setHomeUI);

  // Set CSS for the control interior
  var setHomeText = document.createElement('div');
  setHomeText.style.fontFamily = 'Arial,sans-serif';
  setHomeText.style.fontSize = '12px';
  setHomeText.style.paddingLeft = '4px';
  setHomeText.style.paddingRight = '4px';
  setHomeText.innerHTML = '<b>Set Home</b>';
  setHomeUI.appendChild(setHomeText);

  // Setup the click event listener for Home:
  // simply set the map to the control's current home property.
  google.maps.event.addDomListener(goHomeUI, 'click', function() {
    var currentHome = control.getHome();
    map.setCenter(currentHome);
  });
  
  // Setup the click event listener for Set Home:
  // Set the control's home to the current Map center.
  google.maps.event.addDomListener(setHomeUI, 'click', function() {
    var newHome = map.getCenter();
    control.setHome(newHome);
  });
}

function initialize() {
  var mapDiv = document.getElementById('map_canvas');
  var myOptions = {
    zoom: 12,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(mapDiv, myOptions);

	var marker=new google.maps.Marker({position:myOptions.center, map:map});
	google.maps.event.addListener(map, 'center_changed', function(){
		marker.setPosition(map.getCenter());
	});

  // Create the DIV to hold the control and
  // call the HomeControl() constructor passing
  // in this DIV.
  var homeControlDiv = document.createElement('div');
  var homeControl = new HomeControl(homeControlDiv, map, chicago);

  homeControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}

</script>
</head>
<body onLoad="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

Posted: **Tue Apr 24, 2012 3:51 am**

Here we have a location.
Anyone know java well enough to perhaps write the center lat lng to a file?

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0 auto;
            padding: 0px 250px;
            text-align:center;
        }
    </style>
    <title>Ankit Kedia - Google Maps JavaScript API v3 Example</title>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
        var geocoder;
        var map;
        var markersArray = [];
        var marker;
        var infowindow = new google.maps.InfoWindow();

        function initialize() {
            geocoder = new google.maps.Geocoder();
            var myOptions = {
            zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            codeAddress();

            google.maps.event.addListener(map, 'click', function(event) {
                
                placeMarker(event.latLng);
            });
            
        }

        function codeAddress() {
            var address = document.getElementById("address").value;
            geocoder.geocode({ 'address': address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    clearOverlays();

                    document.getElementById("address").value = results[0]['formatted_address'];
                    document.getElementById("latlong").innerText = results[0].geometry.location;
                    map.setCenter(results[0].geometry.location);
                    marker = new google.maps.Marker({
                        map: map,
                        title: results[0]['formatted_address'],
                        position: results[0].geometry.location,
                        animation: google.maps.Animation.DROP
                    });

                    infowindow.setContent(results[1].formatted_address);
                    infowindow.open(map, marker);

                    markersArray.push(marker);

                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }

        function placeMarker(location) {

            geocoder.geocode({ 'latLng': location }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                        clearOverlays();

                        document.getElementById("address").value = results[1].formatted_address;
                        document.getElementById("latlong").innerText = results[0].geometry.location;
                        marker = new google.maps.Marker({
                            position: location,
                            title: results[1].formatted_address,
                            map: map,
                            animation: google.maps.Animation.DROP
                        });
                        infowindow.setContent(results[1].formatted_address);
                        infowindow.open(map, marker);

                        markersArray.push(marker);

                        google.maps.event.addListener(marker, 'click', toggleBounce);

                        map.setCenter(location);

                    }
                } else {
                    alert("Geocoder failed due to: " + status);
                }
            });
        
        
            
           
           
        }


        function clearOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
            }
        }

        function toggleBounce() {

            if (marker.getAnimation() != null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }
        
    </script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-20626488-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>
<body onload="initialize()" >
    <table width="800px" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td colspan="2" align="center">
                <h2>Map My Address</h2>
            </td>
        </tr>
        <tr>
            <td valign="top" style="width:200px;" >
                <table width="100%" cellpadding="0" cellspacing="0" border="0" >
                    <tr>
                        <td align='left'>
                            If you have address please enter it below and click "Show" button.<br />
                            Otherwise use the map to find the address you want. Just click at any point on the map to find its address.
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Address
                        </td>
                    </tr>
                    <tr>
                        <td>
                             <textarea id="address" rows="5" >Taj mahal Agra, Tajganj, Agra, Uttar Pradesh 282001, India</textarea>
                            <input type="button" value="Show" onclick="codeAddress()">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Latitude/Longitude
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span id="latlong"></span>
                        </td>
                    </tr>
                </table>
                
            </td>
            <td>
                <div id="map_canvas" style="height:500px; width:500px;" >
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Posted: **Tue Apr 24, 2012 4:04 am**

Never mind.

Found something I think I can work with here:
gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html
http://gmaps-samples-v3.googlecode.com/ ... rkers.html

displays ON SCREEN:
Current position:
-37.850904314073965, 145.05744141960145
Closest matching address:
55 Iris Rd, Glen Iris VIC 3146, Australia

Now is there a LC screen scraper technique we can use on the LC for android browser?

anything like:

Code: Select all

put field myBrowser.HTMLtext into myHtml ?

Code: Select all

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}

function initialize() {
  var latLng = new google.maps.LatLng(-34.397, 150.644);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 8,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Point A',
    map: map,
    draggable: true
  });
  
  // Update current position info.
  updateMarkerPosition(latLng);
  geocodePosition(latLng);
  
  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('Dragging...');
  });
  
  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('Dragging...');
    updateMarkerPosition(marker.getPosition());
  });
  
  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('Drag ended');
    geocodePosition(marker.getPosition());
  });
}

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <style>
  #mapCanvas {
    width: 500px;
    height: 400px;
    float: left;
  }
  #infoPanel {
    float: left;
    margin-left: 10px;
  }
  #infoPanel div {
    margin-bottom: 5px;
  }
  </style>
  
  <div id="mapCanvas"></div>
  <div id="infoPanel">
    <b>Marker status:</b>
    <div id="markerStatus"><i>Click and drag the marker.</i></div>
    <b>Current position:</b>
    <div id="info"></div>
    <b>Closest matching address:</b>
    <div id="address"></div>
  </div>
</body>
</html>

LiveCode Forums.

Anyone know how to retrieve the center Lat n Lng from google

Anyone know how to retrieve the center Lat n Lng from google

know java wll enough to write the center lat lng to a file?

Re: Anyone know how to retrieve the center Lat n Lng from go