Question

$(function(){

    //Location was "set". Perform actions.
    $("#geocodesubmit").click(function(){
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            $("#map_canvas").show();
            var myOptions = {
                zoom: 15,
                center: results[0].geometry.location,
                mapTypeControl:false,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel:false,
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
            var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                    draggable:true
            });
         } 
       });

        return false;
    });

    //Marker was dragged. 
    google.maps.event.addListener(marker,"dragend",function(){
            alert('hi');
    });
});

As you can see here, when the user clicks on a button, I generate a new Google map and a new marker. But, the problem is that the marker is not getting binded.

When this page loads, there is an error:

Uncaught ReferenceError: marker is undefined.

I’m guessing it’s because marker is not initiated until the button is clicked. How do I bind the market successfully? (I prefer to load the map after the button is clicked because there are display problems with loading the map on page load and then hiding it)

Answer 1

Move the addListener call into the click handler.