CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-geocoding-api
nickast
nickast

Reputation: 61

Google Maps Geocoding and ploting several locations

I am trying to implement a script that will geocode and plot all the locations of an array into a map. I am stack because I cannot get the map to fit all the markers added in the screen. I lost many hours trying several methods and this what I came up to:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title>
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
  <script>

    var geocoder;
    var map;
    var markersArray = [];
    var bounds;

    //plot initial point using geocode instead of coordinates (works just fine)
    function initialize() {
        geocoder = new google.maps.Geocoder();
        bounds = new google.maps.LatLngBounds ();
        latlang = geocoder.geocode( { 'address': '5th Avenus New Yort'}, function(results, status) { 
            if (status == google.maps.GeocoderStatus.OK) {

                //map.setCenter(results[0].geometry.location);
                marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                markersArray.push(marker);
            }
            else{
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
        var myOptions = {
            center: latlang, 
            zoom: 2, 
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            }
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


        plotMarkers();
      }


        var locationsArray = [
            ['Google Official','1600 Amphitheatre Parkway, Mountain View, USA'],
            ['Google 1','112 S. Main St., Ann Arbor, USA'], 
            ['Google 2','10 10th Street NE, Suite 600 USA']
        ];

        function plotMarkers(){
            for(var i = 0; i < locationsArray.length; i++){
                console.log(locationsArray[i][1]);
                //codeAddresses(locationsArray[i]);
            }

            //map.fitBounds (bounds);
        }

        function codeAddresses(address){
            geocoder.geocode( { 'address': address}, function(results, status) { 
                if (status == google.maps.GeocoderStatus.OK) {

                        //map.setCenter(results[0].geometry.location);
                        marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location
                        });


                        bounds.extend (new google.maps.LatLng (results[0].geometry.location.ib,results[0].geometry.location.hb));
                        //console.log(bounds);

                    markersArray.push(marker); 
                }
                else{
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
  </script>
</head> 
<body>
  <div id="map_canvas" style="width: 100%; height: 700px;"></div>
</body>
</html>

Can somebody give me a hand on this because it seems that I am going to stick with this version forever.

I have the following to goals: 1. Bound the displayed map so that all markers placed in the map will be displayed. 2. Add infoWindow with the name of the location.

I would appreaciate any help!

Regards to all of you, Nick

Upvotes: 0

Views: 5009

Answers (1)

duncan
duncan

Reputation: 31922

What you need to do is extend your bounds object as you add each marker. Then after adding them all, call fitBounds to redraw the map to the appropriate zoom level for that bounds object.

Add an InfoWindow within the loop as you create your markers, bound to each marker. This worked for me:

var geocoder;
var map;
var markersArray = [];
var bounds;
var infowindow =  new google.maps.InfoWindow({
    content: ''
});

//plot initial point using geocode instead of coordinates (works just fine)
function initialize() {
    geocoder = new google.maps.Geocoder();
    bounds = new google.maps.LatLngBounds ();

    var myOptions = {
        zoom: 2, 
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    geocoder.geocode( { 'address': '5th Avenus New Yort'}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);

            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

            bounds.extend(results[0].geometry.location);

            markersArray.push(marker);
        }
        else{
            alert("Geocode was not successful for the following reason: " + status);
        }
    });

    plotMarkers();
}

var locationsArray = [
    ['Google Official','1600 Amphitheatre Parkway, Mountain View, USA'],
    ['Google 1','112 S. Main St., Ann Arbor, USA'], 
    ['Google 2','10 10th Street NE, Suite 600 USA']
];

function plotMarkers(){
    var i;
    for(i = 0; i < locationsArray.length; i++){
        codeAddresses(locationsArray[i]);
    }
}

function codeAddresses(address){
    geocoder.geocode( { 'address': address[1]}, function(results, status) { 
        if (status == google.maps.GeocoderStatus.OK) {
            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(address[0]);
                infowindow.open(map, this);
            });

            bounds.extend(results[0].geometry.location);

            markersArray.push(marker); 
        }
        else{
            alert("Geocode was not successful for the following reason: " + status);
        }

        map.fitBounds(bounds);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 4

Related Questions