CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
sandeep
sandeep

Reputation: 3345

Showing additional marker in google map through ajax

I have created a google map using "maps.googleapis.com/maps/api/js?v=3". In that map I am showing markers for different locations, which is working fine. Below is the code which i have used.

google.maps.event.addDomListener(window, 'load', function() {
                var map = new google.maps.Map(document.getElementById('map1'), {
                      zoom: 10,
                      center: new google.maps.LatLng(latitude, longitude),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                var marker = new google.maps.Marker({
                                map: map,
                                position: new google.maps.LatLng(23.42323, -45.47653),

                            });
});

Now I want to add some more location markers in Ajax. For ex: I will add the location name from a dropdown, it will do an ajax call to the server side. Pull out the location latitude and longitude and will show in the map. How can i achieve it.

I have written a separate js function to do the ajax call, but inside that the code is not getting 'map' instance.Here I have used only this code 

    new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(23.42323, -45.47653),
});

Here I am not initializing the map again. So its not getting the map instance and throwing error. How to fix it.

Upvotes: 0

Views: 823

Answers (2)

Xion Dark
Xion Dark

Reputation: 3434

The scope of your map is limited to inside your event handle. Try this:

var map, markerCollection;

google.maps.event.addDomListener(window, 'load', function() {
    map = new google.maps.Map(document.getElementById('map1'), {
        zoom: 10,
        center: new google.maps.LatLng(latitude, longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});

function addMarker(lat, lng){
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
    });
    markerCollection.push(marker);
}

NOTES: 1) Be to fill in the values for "latitude" and "longitude" when defining the center of your map. Otherwise you just would get a map displayed. 2) I know it might not be the best practice to add your markers into an array but I find this makes than easy to access latter.

Upvotes: 1

howderek
howderek

Reputation: 2244

Since map is not a global variable it is getting dereferenced. Make the map object either global or within a container function that stores all of your code.

Global JS example

//now it's global
var map;
google.maps.event.addDomListener(window, 'load', function () {
    map = new google.maps.Map(document.getElementById('map1'), {
        zoom: 10,
        center: new google.maps.LatLng(latitude, longitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(23.42323, -45.47653),
    });
});

Upvotes: 0

Related Questions