title: Converting/Geocoding address into Lat Long coordinates - spiderfier for google maps
body: <p>I'm trying to implement spiderfier into my code but I'm having some difficulty converting a string address into (lat lon) coordinates.  </p>
  
  <p>Demo: <a href="http://jawj.github.com/OverlappingMarkerSpiderfier/demo.html" rel="nofollow">http://jawj.github.com/OverlappingMarkerSpiderfier/demo.html</a></p>
  
  <p>Documentation: <a href="https://github.com/jawj/OverlappingMarkerSpiderfier" rel="nofollow">https://github.com/jawj/OverlappingMarkerSpiderfier</a></p>
  
  <p><strong>this is how I get my addresses from my database which I now need to convert to (Lat, Lon) format</strong></p>
  
  <pre><code>&lt;?php 
    $locations = new locations;
    $userid = '1';
    $cityArray = $locations-&gt;pastLocations($userid);
    $title = $locations-&gt;pastTitles($userid);
    $length = count($cityArray);
  ?&gt;
  
  //now that I have the cityArray acquired from php, I encode them for javascript
  &lt;script&gt;
  var cityArray= &lt;?php echo json_encode($cityArray); ?&gt;;
  var title = &lt;?php echo json_encode($title); ?&gt;;
  </code></pre>
  
  <p>Ok, so now I have my addresses in an array. The example for spiderfier generates random locations (close enough to overlap) using the following</p>
  
  <pre><code>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 &lt; 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 &lt; 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; 
  </code></pre>
  
  <p><strong>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</strong></p>
  
  <pre><code>var bounds = new gm.LatLngBounds();
  
    for (var i = 0; i &lt; 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);
  </code></pre>
  
  <p>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. </p>
  
  <p>Thanks!</p>
  
  <p><strong>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</strong></p>
  
  <p>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.</p>
  
  <pre><code>var data = [];
  for (var i = 0; i &lt; 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);
              }   
          });  
  }  
  </code></pre>