Google Maps Address instead of LatLng GeoCode

Question

I have spent a few hours looking at this and cannot find the solution I am after. I know I am missing something, but could do with a little help.

In essence I have a Classic ASP page with a recordset holding addresses. I want to pull those addresses into the page (with repeat region). Done that bit and have the string Google expects with the correct info.

<script>var map_locations = [{"lat":52.954145,"lng":-4.101083,"title":"Nice House in Wales","street":"Prenteg, Porthmadog, LL49 9SR","price":"55,500"}]</script>

However, I want to replace "lat" etc with the following:

<script>var map_locations = [{"address":"<%=(rsLocations.Fields.Item("locPostCode").Value)%>","title":"Nice house in Wales","street":"Prenteg, Porthmadog, LL49 9SR","price":"55,500"}]</script>

I do not hold the Lat/Lng of the addresses
I have gone through Google's API documentation on GeoCoding. Found something of use, but cannot figure out how to get my "binding" of "postcode" into the address function inside of my JS file. (link: https://developers.google.com/maps/documentation/javascript/geocoding).

Here is what Google suggests I do based on the link above. Google GeoCoding

var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

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);
  }
});
}

<body onload="initialize()">
<div id="map_canvas" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>

Now, Google's documentation uses a input variable of "address" so you can use this with the following:

var address = document.getElementById("address").value;

My question is, how do I get recordset binding to be the address? ASP and JS file's don't mix well and unsure of how to get it into the address for geocoding to work properly.

My JS file (global.js) contains the following that works if I send through Lat/Lngs and it gives nicely styled markers and info boxes for the user to interact with.

JS File that deals with writing Google Map stuff

var map;
function initializePropertiesMap() {
if($('#map_canvas').length == 0)
    return;
var myLatlng = new google.maps.LatLng(52.954145,-4.101083);
var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$.each(map_locations, function(key, value) { 
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(value['lat'], value['lng']),
        map: map,
        icon: 'css/images/marker.png',
        scrollwheel: false,
        streetViewControl:true,
        title: value['title']
    });

    var link = "link";
    google.maps.event.addListener( marker, 'click', function() {
        // Setting the content of the InfoWindow
        var content = '<div id="info" class="span5"><div class="row">' + '<div     class="span2"><img src="css/images/houses/house_'+(key+1)+'.jpg" class="thumbnail" style="width:135px"/></div>' + '<div class="span3"><h3>' + value['title'] + '</h3><h6>' + value['street'] + '</h6>' + '<strong>&pound;' + value['price'] + '</strong>' + '<p><a href="listing-detail.asp">Read More >></a></p>' + '</div></div></div>';
        infowindow.setContent(content );
        infowindow.open(map, marker);
    });

});


}

Having tweaked with this, I cannot get it to work and wondered if anyone has any advice for me?

Thanks Nick

UPDATE

Just thought I'd mention that I have tried this:

var address = <%=rsLocations.Fields.Item("locPostcode").value%>;

That obviously won't work as the JS file errors.

Advice: if you have the latitude and longitude of the points, store it in your database and use that to display your points. While you can use the (asynchronous) geocoder to geocode address when your page loads, if you have more that about 10 addresses you will run into the geocoder quota/rate limit. This [article on geocoding strategies](https://developers.google.com/maps/articles/geocodestrat) may help. — geocodezip, Nov 12 '12 at 19:33
As I said, I currently don't store the long/lats. The site will ask the user to upload their properties and I didn't want to get into asking them to give me those parameters......can foresee issues there as most users will not be capable of figuring out how to get them! lol — Nick Green, Nov 12 '12 at 20:00

score -2 · Accepted Answer · edited Jun 20 '20 at 09:12

This answer to a similar question about geocoding addresses from XML may help.

You have a problem with the asynchronous nature of the geocoder, and if you add many addresses you will have a problem with the geocoder quota/rate limits (particularly since your code doesn't look at the return status of the geocoder).

The simplest solution is to use function closure to associate the call to the geocoder with the returned result

If you have the latitude and longitude of the points, store it in your database and use that to display your points. While you can use the (asynchronous) geocoder to geocode address when your page loads, if you have more that about 10 addresses you will run into the geocoder quota/rate limit. This article on geocoding strategies may help do that.

you have pointed me in the write direction so I will mark this as answered however not directly by making the code above work. It is much easier to grab the lat/long values and then keep them in fields in the database. That way you don't have to geocode on the fly which would mess about/cost you cash with the API. Thanks for the help. — Nick Green, Nov 15 '12 at 16:57

Google Maps Address instead of LatLng GeoCode

1 Answers1