$(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');
});
});
I have implemented code that generates a Google map and a new marker when the user clicks on a button. However, I encountered an issue where the marker is not getting binded properly.
Upon loading the page, an error occurs:
Uncaught ReferenceError: marker is undefinedThis problem arises because the marker is only initialized after the button click event. How can I successfully bind the marker in this scenario? (I prefer to delay the map loading until the button is clicked to avoid display issues)