CODEWITHSUNDEEP
javascriptgoogle-mapsvariables
Fuego DeBassi
Fuego DeBassi

Reputation: 3017

Saving two variables from google maps input

So this is what I have: http://clients.pixelbleed.net/geocoder/geocoder.html

I'm pretty much over my head on this, but I have the first input box working... meaning that it will take an address, convert that to lat/long and place on the map. All I did for the second input is duplicate the codeAddress() function and rename it.

What I'd really like to do is take both input boxes, let someone punch in an address, geocode it to lat/long and save it in a variable. I can then manipulate that variable to do the equation I ultimately need to do... just not sure how to save them as such. Any thoughts?

This is my JS:

<script type="text/javascript"> 
  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });

  }
function codeAddress2() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });

  }
</script>

And this is how the buttons call it:

<body onload="initialize()"> 
  <div> 
    <input id="address" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress()"> 
  </div>
  <div> 
    <input id="address" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress2()"> 
  </div>  
<div id="map_canvas" style="height:90%;top:80px"></div> 
</body>

Upvotes: 0

Views: 947

Answers (1)

jessegavin
jessegavin

Reputation: 75640

I created a Gist with a complete example here: https://gist.github.com/890998

My explanation follows...

You could create a javascript object that could store the results as an expando property. Then after each geocode request completes, store the result, then call a function to do the calculation.

Add a variable where you can store the results as expando properties

  var geoResults = {};

Rather than having two nearly identical functions that do the geocoding, change it so that it accepts the 'id' of the address input. We can use that id parameter as the property name on our geoResults object too.

  function codeAddress(id) {
    var address = document.getElementById(id).value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });

        // store the results in the geoResults object
        geoResults[id] = results[0].geometry.location;
        doCalculation();

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

Now in our doCalculation() function we can just check to see whether both addresses have been geocoded, if so, then do whatever you want with the results.

  function doCalculation() {
    if (typeof geoResults.address1 === "object" 
        && typeof geoResults.address2 === "object") {

        // Yay.. do something now.
        // geoResults.address1 is a LatLng() object.
        // geoResults.address2 is a LatLng() object.
    }
  }

We just need to change 2 things with your HTML.

  • Make sure that you have unique id attributes. address1 & address2
  • Change the onclick attribute so that you pass the id into the codeAddress function as a parameter.

Here's how that looks

<body onload="initialize()"> 
  <div> 
    <input id="address1" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress('address1')"> 
  </div>
  <div> 
    <input id="address2" type="textbox" value="" style=" width:800px;height:30px;font-size:10px;"> 
    <input type="button" value="Geocode" onclick="codeAddress('address2')"> 
  </div>  
<div id="map_canvas" style="height:90%;top:80px"></div> 
</body>

Upvotes: 1

Related Questions