I'm attempting to use the Google Maps API to get a location provided by the user. To do this I'm setting a marker that moves based on 'click' events. The code is as such:

function initialize_google_map(div_id) {
    var map = new GMap2(document.getElementById(div_id));

    map.setCenter(new GLatLng(45, -105), 2);

    map.setUIToDefault();

    return map;
}

$(document).ready(function() {
    // configure the google maps api
    var map = initialize_google_map("map_canvas");
    var marker = google.maps.Marker({map: map, title:"Location"});
    google.maps.event.addListener(map, "click", function(evt) {
        alert("got click event");
        marker.setPosition(evt.latLng);
    });

    $(document).unload(function() {
    // unload the google map
    GUnload();
    }); 

});

The "got click event" alert is never firing, and my Javascript console (Google Chrome) says this:

Uncaught TypeError: Cannot call method 'addListener' of undefined

The API is included like this:

<script src=";v=3&sensor=true" type="text/javascript"></script>

I'm attempting to use the Google Maps API to get a location provided by the user. To do this I'm setting a marker that moves based on 'click' events. The code is as such:

function initialize_google_map(div_id) {
    var map = new GMap2(document.getElementById(div_id));

    map.setCenter(new GLatLng(45, -105), 2);

    map.setUIToDefault();

    return map;
}

$(document).ready(function() {
    // configure the google maps api
    var map = initialize_google_map("map_canvas");
    var marker = google.maps.Marker({map: map, title:"Location"});
    google.maps.event.addListener(map, "click", function(evt) {
        alert("got click event");
        marker.setPosition(evt.latLng);
    });

    $(document).unload(function() {
    // unload the google map
    GUnload();
    }); 

});

The "got click event" alert is never firing, and my Javascript console (Google Chrome) says this:

Uncaught TypeError: Cannot call method 'addListener' of undefined

The API is included like this:

<script src="http://maps.google./maps?file=api&v=3&sensor=true" type="text/javascript"></script>

• javascript
• google-maps
• dom-events

2 Answers 2

The problem here is that you are mixing Google Maps version two objects with Version 3. In your initialize_google_map function you are creating and returning a GMap2 object (a version 2 object). You are then passing this object into a google.maps.Marker object constructor (a version 3 object).

You just need to modify your initialize_google_map function to instantiate a google.maps.Map object.

The event is generated before function and it does not recognize, you change this code:

$(document).ready(function() {      
     google.maps.event.addListener(map, "click", function(evt) {
            alert("got click event");
            marker.setPosition(evt.latLng);
        });
});

for this code:

$(window).load(function(){   
    google.maps.event.addListener(map, "click", function(evt) {
            alert("got click event");
            marker.setPosition(evt.latLng);
        });
});