Question

I’d like to have one default marker on the map to indicate an address, while users can drag a user marker to the place they think it is correct. (applied in some map correction situation…)

<script type="text/javascript"><!--
var geocoder;
var map;
var point;
function mapLoad() {
geocoder = new google.maps.Geocoder();
var myOptions = {
  zoom: 16,
  mapTypeControl: false, 
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById("map"), myOptions);
var address = "LS2 2RD"; //default postcode
geocoder.geocode( { 'address':address,region:"UK",language:"en"}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    point=results[0].geometry.location;
    map.setCenter(point);
    var defaultMarker = new google.maps.Marker({map: map, position: point}); //default marker
    var marker = new google.maps.Marker({
        map: map, 
        position: point,
  draggable: true
    }); //The marker for users to drag

    var DefaultContent ='<h4>Default Location</h4><h6>You can drag it to anywhere you think it is right or confirm here is the right place</h6><div class="confirm"><input type="button" value="This location is correct"></div>'
    var DefaultInfo = new google.maps.InfoWindow({content: DefaultContent,maxWidth:200});
    DefaultInfo.open(map,marker); //default infowindow

      var TargetContent='<h4>New Location</h4><h6>Are you sure here is the right place?</h6><div class="confirm"><input type="button" value="Yes, I confirm" />'+
      '<input type="button" value="Cancel" onclick="clsMark()" /></div>'; //here cancel button is not working
      var infobox = new google.maps.InfoWindow({content: TargetContent}); //after drag ended, the new infowindow

google.maps.event.addListener(marker, 'drag', function(){
        DefaultInfo.close();
        });
google.maps.event.addListener(marker, 'dragend', function() {
      infobox.open(map, marker);
    });

function clsMark(){if (infobox != null) {infobox.close();}//if user cancel, clear the infowindow, and put the marker back to default position
        marker.setPosition(point);}

  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});

}

The problem is that I cannot get those button working in the infowindow. I cannot bind the click event to the button using:

google.maps.event.addListener(buttonID, 'click', function(){...}

I get function not defined errors if I add onclick to a button, just as the above codes, in which case it says “clsMark not defined”.

So I totally have no idea how to have buttons working in the infowindow. Please help me out…

Answer 1

you are declaring the clsMark() function inside an anonymous function passed to geocoder.geocode(), that’s why it’s not available in the global scope (where the onclick handler is looking for it).

try moving function clsMark() before the geocoder.geocode call to make it visible for the onclick handler.

as for your try using ‘addListener(buttonID,..’, note that addListener doesn’t work with IDs, you have to provide ‘object’ as the first parameter, so this only works using google maps objects.