CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3google-maps-markersstreet-address
Hugolpz
Hugolpz

Reputation: 18278

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

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

Upvotes: 0

Views: 1264

Answers (2)

Ankit
Ankit

Reputation: 338

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.

Upvotes: 0

Haje
Haje

Reputation: 421

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.

Upvotes: 2

Related Questions