Converting/Geocoding address into Lat Long coordinates - spiderfier for google maps

Question

I'm trying to implement spiderfier into my code but I'm having some difficulty converting a string address into (lat lon) coordinates.

Demo: http://jawj.github.com/OverlappingMarkerSpiderfier/demo.html

Documentation: https://github.com/jawj/OverlappingMarkerSpiderfier

this is how I get my addresses from my database which I now need to convert to (Lat, Lon) format

<?php 
  $locations = new locations;
  $userid = '1';
  $cityArray = $locations->pastLocations($userid);
  $title = $locations->pastTitles($userid);
  $length = count($cityArray);
?>

//now that I have the cityArray acquired from php, I encode them for javascript
<script>
var cityArray= <?php echo json_encode($cityArray); ?>;
var title = <?php echo json_encode($title); ?>;

Ok, so now I have my addresses in an array. The example for spiderfier generates random locations (close enough to overlap) using the following

var baseJitter = 2.5;
var clusterJitterMax = 0.1;
var rnd = Math.random;
var data = [];
var clusterSizes = [1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2,2, 3, 3, 4, 5, 6, 7, 8, 9, 12, 18, 24];
for (var i = 0; i < clusterSizes.length; i++) {
GClientGeocoder.getLatLng()
var baseLon = -1 - baseJitter / 2 + rnd() * baseJitter;
var baseLat = 52 - baseJitter / 2 + rnd() * baseJitter;
var clusterJitter = clusterJitterMax * rnd();
for (var j = 0; j < clusterSizes[i]; j ++) data.push({
  lon: baseLon - clusterJitter + rnd() * clusterJitter,
  lat: baseLat - clusterJitter + rnd() * clusterJitter,
  h:   new Date(1E12 + rnd() * 1E11).toString(), //this is the title
  d:   Math.round(rnd() * 100) + '% happy'
});
} 
window.mapData = data;

here's the code that spiderfier uses to plots the data array. This is the part I'm having trouble producing the data array it uses

var bounds = new gm.LatLngBounds();

  for (var i = 0; i < window.mapData.length; i ++) {
    var datum = window.mapData[i];
    var loc = new gm.LatLng(datum.lat, datum.lon);
    bounds.extend(loc);
    var marker = new gm.Marker({
      position: loc,
      title: datum.h,
      map: map,
      icon: iconWithColor(usualColor),
      shadow: shadow
    });
    marker.desc = datum.d;
    oms.addMarker(marker);
  }
  map.fitBounds(bounds);

Assuming I have an array that I can feed into a geocode, how can I turn an address (Dallas Texas for example) into a (lat lon) format that I can use with spiderfier? Remember, there is more than one address in this array so I'll have to loop through and push each one into the data array somehow. This is mostly where I'm getting confused.

Thanks!

edit - I tried to make some code that loops through my cityArray and geocodes each one, then inserts it into an array called data, but unfortunately it didn't work

Here's the code. When I use document.write(data) nothing is displayed. I'm not getting any errors either, so I'm not sure what I'm doing wrong.

var data = [];
for (var i = 0; i < cityArray.length; i++) {
    //document.write(cityArray[i]);
    geocoder.geocode( { 'address': cityArray[i] }, function(results, status) { //use latlang to enter city instead of coordinates 
        if (status == google.maps.GeocoderStatus.OK) {
            data.push({
                position:results[0].geometry.location,
                h: 'test',
                d: 'test'
            });
          }
          else {
            alert("Geocode was not successful for the following reason: " + status);
            }   
        });  
}

score 1 · Answer 1 · answered Aug 13 '12 at 23:12

1

Your question is how to convert addresses into geographic coordinates (latitude and lonitude) for use with google maps.

The process of converting addresses into coordinates is called geocoding.

The Google Maps API v3 includes a client side geocoder for use when the user enters an address.

There is also a geocoding web service for use by the server.

Both are subject to quotas and rate limits.

See this article from the documentation for a description their use and a discussion of when each might be appropriate.

If you have a database, the most desirable option is to geocode the addresses as you enter them in the database, then use the coordinates from the database to place the markers rather than geocoding them "on the fly".

answered Aug 13 '12 at 23:12

geocodezip

158,664
13
220
245

I edited my post to show what I changed as far as geocoding goes. Mind taking a look? – user1406951 Aug 14 '12 at 00:14
document.write when used on a rendered page, overwrites the existing page, not a good way to debug. See the answer to [this question](http://stackoverflow.com/questions/11792916/over-query-limit-in-google-maps-api-v3-how-do-i-pause-delay-in-javascript-to-sl) by Andrew Leach for a way to throttle the geocoder to get results if you _have_ to geocode "on the fly" (it will slow down your page load if you have more than ~ 10 markers), as to why your geocode calls don't work, could you provide a link or a jsfiddle that exhibits the problem? – geocodezip Aug 14 '12 at 03:07
I also see problems with the way you have the geocoding function coded, the geocoder returns its results asynchronously, so the input order and output order may be different, looks like you are assuming they are the same. – geocodezip Aug 14 '12 at 03:08
I'm trying to get it to work in jsfiddle but nothing will show. – user1406951 Aug 14 '12 at 03:20

Converting/Geocoding address into Lat Long coordinates - spiderfier for google maps

1 Answers1