Question

Currently I have JavaScript that displays markers on a Google map using the Google places but I just refactored my code in order to reduce duplicate functions and put these into arrays. After refactoring the code the markers are no longer being displayed.

Here is my code.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?    sensor=true&libraries=places"></script>
 <script type="text/javascript">

var map = [], infoWindow = [];

function initialize(){
    initMap(0, 51.5069999695, -0.142489999533);
    initMap(1, 40.79445,-74.01558);
    initMap(2 , 48.858001709, 2.29460000992);
}

function initMap(ndx, lat, lng){
    var feed = new google.maps.LatLng(lat, lng);

    map[ndx] = new google.maps.Map(document.getElementById('map'+ndx), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: feed,
        zoom: 11
    });

    var request = {
        location: feed,
        radius: 5000
    };

    infoWindow[ndx] = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.search(request, callback);
}
function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
            createMarker(0, results[i]);
            createMarker(1, results[i]);
            createMarker(2, results[i]);
        }
    }
}

function createMarker(ndx, place) {  =
    var marker = new google.maps.Marker({
        animation: google.maps.Animation.DROP,
        map: map[ndx],
        position: place.geometry.location
    });

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

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

</script>

<div id="map0" style="position:absolute; width: 290px; height: 300px;"></div>

<div id="map1" style="position:absolute; left:490px; width: 290px; height: 300px;"></div>

<div id="map2" style="position:absolute; left:790px; width: 290px; height: 300px;"></div>

I have tried to find the problem but I’m not getting anywhere.
Any suggestions?

Answer 1

shouldn’t

var service = new google.maps.places.PlacesService(map);

be

var service = new google.maps.places.PlacesService(map[ndx]);