google map in form help pulling city and state

ya

yaksushi 13 Dec, 2010

I have a form that has a Google map with a drag-able marker. The marker grabs the lat and long cords and I use these values to create a marker on phoca maps. Question is how can I also grab the city and state? Any help would be much appreciated. :mrgreen:

Here is my code:

From HTML

<p class="cf_text">Latitude: <input class="required" type="text" name="latitude" id="latitude" value="38.41055825094609" />
    Longitude: <input class="required" type="text" name="longitude" id="longitude" value="-96.416015625"/>
    <br /><br />
    <div id="map" style="width: 670px; height: 430px"></div><?php
    if ( !$mainframe->isSite() ) {return;}
    $doc =& JFactory::getDocument();
    $doc->addScript('http://maps.google.com/maps?file=api&v=2&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX');
    ?>

Form JavaScript:

   window.addEvent('domready', function() {
      if (GBrowserIsCompatible())
      {
       // create map and add controls
	   var map = new GMap2(document.getElementById("map"));
	   map.setMapType(G_HYBRID_MAP);
	   map.addControl(new GLargeMapControl());        
	   map.addControl(new GMapTypeControl());
       
       // set centre point of map
       var centrePoint = new GLatLng('38.41055825094609', '-96.416015625');
       map.setCenter(centrePoint, 14); map.setZoom(4);  
       
       // add a draggable marker
       var marker = new GMarker(centrePoint, {draggable: true});
       map.addOverlay(marker);
       
       // add a drag listener to the map
       GEvent.addListener(marker, "dragend", function() {
          var point = marker.getPoint();
          map.panTo(point);
          document.getElementById("latitude").value = point.lat();
          document.getElementById("longitude").value = point.lng();
        });
      }
    });

Gr

GreyHead 13 Dec, 2010

Hi yaksushi,

I think that the code you need is here.

Bob

ya

yaksushi 13 Dec, 2010

Thanks Bob, I was messing with that last night. Problem is I'm uncertain how to integrate reverse geocoding into my current code... 😟

Gr

GreyHead 13 Dec, 2010

Hi yaksushi,

I can only guess that once you've got point.lat & point.long you could call this api. Don't know much more about it, sorry.

Bob

ya

yaksushi 14 Dec, 2010

Ok for anyone needing help with this here is my map code

<Begin Google Map Code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API Sample</title>
    <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" type="text/javascript"></script>
    <script type="text/javascript">

    var map;
    var geocoder;
    var address;
    
    function initialize() {
      map = new GMap2(document.getElementById("map_canvas"));
      map.setMapType(G_HYBRID_MAP);
      var centrePoint = new GLatLng('38.41055825094609', '-96.416015625');
      map.setCenter(centrePoint, 14); map.setZoom(4);
      map.addControl(new GLargeMapControl);
      GEvent.addListener(map, "click", getAddress);
      geocoder = new GClientGeocoder();
     
    }
      
    function getAddress(overlay, latlng) {
      if (latlng != null) {
        address = latlng;
        geocoder.getLocations(latlng, showAddress);
      }
    }
    
        function showAddress(response) {
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("Status Code:" + response.Status.code);
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        document.getElementById("latitude").value = point.lat();
        document.getElementById("longitude").value = point.lng();
        document.getElementById("city").value = place.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.Locality.LocalityName;
        document.getElementById("state").value = place.AddressDetails.Country.AdministrativeArea.AdministrativeAreaName;
        document.getElementById("country").value = place.AddressDetails.Country.CountryNameCode;
        marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(
        '<b>Latitude: </b>' + place.Point.coordinates[1] + '<br>' +
		'<b>Longitude: </b>' + place.Point.coordinates[0] + '<br>' +
        '<b>Address: </b>' + place.address + '<br>' +
        '<b>Accuracy: </b>' + place.AddressDetails.Accuracy + '<br>' +
        '<b>Country code: </b> ' + place.AddressDetails.Country.CountryNameCode + '<br>' +
        '<b>State: </b> ' + place.AddressDetails.Country.AdministrativeArea.AdministrativeAreaName + '<br>' +
        '<b>City: </b> ' + place.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.Locality.LocalityName);
      }
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
    <div id="map_canvas" style="width: 670px; height: 430px"></div>
  </body>
</html>
<End Google Map Code>

Gr

GreyHead 14 Dec, 2010

Hi yaksushi,

Well done and thanks for posting the code!

Bob

ya

yaksushi 14 Dec, 2010

It was trial and error.... feel free to look it over and give tips on cleaning it up. 😀

Gr

GreyHead 01 Jan, 2011

Hi yaksushi,

Here's a slightly modified version using the MooTools syntax and set up for ChronoForms. Warning: not tested and may need debugging!
Form HTML

<?php 
$doc =& JFactory::getDocument();
$doc->addScript"http://maps.google.com/maps?file=api&v=2&sensor=false&key=xxx . . . xxx");
?>
<div id="map_canvas" style="width: 670px; height: 430px"></div>

Form JavaScript

window.addEvent('load', initialize());
window.addEvent('unload', GUnload()); 
var map;
var geocoder;
var address;

function initialize() {
  map = new GMap2($("map_canvas"));
  map.setMapType(G_HYBRID_MAP);
  var centrePoint = new GLatLng('38.41055825094609', '-96.416015625');
  map.setCenter(centrePoint, 14); map.setZoom(4);
  map.addControl(new GLargeMapControl);
  GEvent.addListener(map, "click", getAddress);
  geocoder = new GClientGeocoder();
 
};
 
function getAddress(overlay, latlng) {
  if (latlng != null) {
	address = latlng;
	geocoder.getLocations(latlng, showAddress);
  }
};

function showAddress(response) {
  map.clearOverlays();
  if (!response || response.Status.code != 200) {
	alert("Status Code:" + response.Status.code);
  } else {
	place = response.Placemark[0];
	point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
	$("latitude").value = point.lat();
	$("longitude").value = point.lng();
	$("city").value = place.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.Locality.LocalityName;
	$("state").value = place.AddressDetails.Country.AdministrativeArea.AdministrativeAreaName;
	$("country").value = place.AddressDetails.Country.CountryNameCode;
	marker = new GMarker(point);
	map.addOverlay(marker);
	marker.openInfoWindowHtml(
	  '<b>Latitude: </b>' + place.Point.coordinates[1] + '<br />' +
	  '<b>Longitude: </b>' + place.Point.coordinates[0] + '<br />' +
	  '<b>Address: </b>' + place.address + '<br />' +
	  '<b>Accuracy: </b>' + place.AddressDetails.Accuracy + '<br />' +
	  '<b>Country code: </b> ' + place.AddressDetails.Country.CountryNameCode + '<br />' +
	  '<b>State: </b> ' + place.AddressDetails.Country.AdministrativeArea.AdministrativeAreaName + '<br />' +
	  '<b>City: </b> ' + place.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.Locality.LocalityName);
  }
};

Bob

ya

yaksushi 07 Jan, 2011

I'll add this to my test forum and let you know

Gr

GreyHead 10 Jan, 2011

Note: there's now an updated version here.

Bob

ya

yaksushi 19 Jan, 2011

Grey is there anyway to convert this over to mootools?

http://tech.cibul.org/tag/geolocation/

Gr

GreyHead 19 Jan, 2011

Hi yaksushi,

From a very quick look it will probably work as it is. Follow the instructions and see what happens.

Bob

le

leclaire05 28 Jan, 2011

HI guys...

Thanks for posting your links...I'll try to figure it out🙂...Hoping for it!

ya

yaksushi 14 Mar, 2011

From a very quick look it will probably work as it is. Follow the instructions and see what happens.

I followed the instructions at http://tech.cibul.org/geocode-with-google-maps-api-v3/ but the map doesn't show... Not sure if there could be a conflict or not... Anyone else tried this? I only pulled jquery-1.4.4.min.js and jquery-ui-1.8.10.custom.min.js from the jquery site and uploaded it to my site could that have had an issue?

To follow up the newest MooTools example you posted works! My users are saying it's hard to navigate the map and asked for a search. The above example offers all that but I just can't get it to work. 😟

Check the new Joomla Extension Builder

google map in form help pulling city and state