GoogleMaps / JS: How with a list of street address can we populate a Google Map?

Question

Given JSON data such as a list of real, unique, valid addresses:

var data = [
    { "address": "48 rue des Grands Moulins, 75013, Paris"},
    { "address": "12_rue_des_Grands_Moulins,_75013,_Paris"},
    { "address": "65_rue_des_Grands_Moulins,_75013,_Paris"},
    { "...": "..."},
    ];

Each of these few hundred addresses being detailed enough to be unique on Earth.

and given html such as:

<div id="map" style="height:40%;"></div>

How can I create and automatically populate a Google Map with this data ? JSfiddle appreciated.

EDIT: Current advancement of my fiddle here. I will migrate data into JSON and add a loop to iterate each object tomorrow.

Note: using the street-adress we can get the geoloc info in JSON format using: this query

Interesting talk [here](http://stackoverflow.com/questions/7499862/how-to-geocode-an-address-into-lat-long-with-google-maps#7500182), and [How can I automatically plot markers for addresses on a Google or OpenStreetMap?](http://stackoverflow.com/questions/3782776/how-can-i-automatically-plot-markers-for-addresses-on-a-google-or-openstreetmap). Lack a JSfiddle. — Hugolpz, Feb 25 '13 at 11:27
[The Google Geocoding API](https://developers.google.com/maps/documentation/geocoding/?hl=fr) offers nice definition (but no working sample): Geocoding is the process of converting addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers or position the map. — Hugolpz, Feb 25 '13 at 20:19
[Geocoding Service> Geocoding Response > Status Codes](https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingStatusCodes) : at the end of this section, there is a code sample and a link for a single marker push onto a map. — Hugolpz, Feb 25 '13 at 20:32
I made a [JSfiddle of it](http://jsfiddle.net/xp5vb/1/), but it crash. — Hugolpz, Feb 25 '13 at 20:48
Actually, all codes and associated js/css libs I found online —working— crash when migrated to JSfiddle... — Hugolpz, Feb 25 '13 at 21:17
Your jsfiddle (link in your post) doesn't exist. I don't see a crash, it just doesn't display a map, [this one works](http://jsfiddle.net/xp5vb/11/). You really don't want to geocode known addresses on page load, it takes too long and is wasteful of server resources. See [this post on addressing the OVER_QUERY_LIMIT issue](http://stackoverflow.com/questions/11792916/over-query-limit-in-google-maps-api-v3-how-do-i-pause-delay-in-javascript-to-sl), which is the next issue you will encounter. — geocodezip, Feb 26 '13 at 03:26
JSfiddle fixed (not 8, was 7), thanks for the feedback. :) Thanks for your code too. — Hugolpz, Feb 26 '13 at 10:32

score 2 · Accepted Answer · answered Feb 25 '13 at 10:18

Something like (not tested);

var location, map, objectID;

objectID  = "dom-id";

// Your gMap
//
map       = new google.maps.Map( document.getElementById( objectID ), {} );

// Put the following lines in your loop
// 
geocoder.geocode({ "address" : the_address_to_map }, function( results, status )
{
    if ( status == google.maps.GeocoderStatus.OK )
    {
        var latitude         = results[ 0 ].geometry.location.lat()
        ,   longitude        = results[ 0 ].geometry.location.lng()
        ;

        location = new google.maps.LatLng( latitude, longitude );

        if( location ) 
        {
            var marker          = new google.maps.Marker(
            {
                position    : location,
                title       : "",
                // other settings
            });

            marker.setMap( map );
        }
    }
});

There is a limit for calling this service.. I thought about 2500 requests a day, but you can look it up in your API console.

Note: I updated my data to JSON format and your syntax. I also +1 your answer, but I will try to make it works on JSfiddle before to accept it. Please add the FOR loop so the code stand by itself. I edited your value into the_street_address_to_map, which is better. — Hugolpz, Feb 25 '13 at 11:18

score 0 · Answer 2 · answered Feb 25 '13 at 16:38

geoCodeLookupLL: function(addressstring, markerTitle, markerListeners) { 

  this.geocoder = new GClientGeocoder(); 
  this.markerStreetAddr = addressstring; 
  var map = this.getMap(); // Existing Map Object

  this.geocoder.getLatLng(addressstring, 

      function(point,markerTitle) { 

      if (!point) { 

      }else{ 
        Ext.applyIf(markerTitle,G_DEFAULT_ICON);         

        var new_icon = new GIcon()  

        new_icon.image = "https://maps.gstatic.com/mapfiles/ms2/micons/green-dot.png"  
        new_icon.size = new GSize(16,16)  
        new_icon.iconAnchor = new GPoint(9,34)
        new_icon.infoWindowAnchor = new GPoint(9,2)
        new_icon.title = markerTitle

        var mark = new GMarker(point,new_icon); 

        map.addOverlay(mark); 

      }
    })

I am using address as new marker on existing map so new icon object. You may find some V2 api methods too.

GoogleMaps / JS: How with a list of street address can we populate a Google Map?

2 Answers2