CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-api-3google-maps-markers
Shiva
Shiva

Reputation: 358

getting an error as first child of undefined when using google maps

getting an error when using google maps multiple times with the following code 

var checkForMap = function() {
    $scope.post.showMap = true;
    var myLatlng = new google.maps.LatLng($scope.post.location.x, $scope.post.location.y);
    var myOptions = {
        zoom: 15,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var mapHolder = $('.map_class')[$scope.$index];
    $scope.map = new google.maps.Map(mapHolder, myOptions);
    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
        map: $scope.map,
        position: myLatlng
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent($scope.item.post.post.locationName);
        infowindow.open(map, this);
    });
}
if ($scope.post.locationName != null) {
    checkForMap();
} else {
    $scope.post.showMap = false;
}

using google maps multiple times.By using $scope.$index i can display exact location.

Upvotes: 2

Views: 364

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59358

Google Maps JavaScript API provides a way to register for event notifications, in particular onload event which triggers once an HTML page is fully loaded.

To ensure map is getting initialized once the page is loaded replace

checkForMap();

with 

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

Upvotes: 1

Related Questions