Question

have created a map that I’m trying to have function similar to ‘My Maps’. I have two dropdownlists on the right side, based on the selection in those ddl’s, you can add a custom marker / icon. You select a marker type, then click the ‘+’ button in the top right corner of the map, and then click where you want the marker added. My issue is, this works fine in IE, Safari, and Chrome, but not in firefox. The click event doesn’t seem to fire.

Here is the location of the map : https://ait.saultcollege.ca/Michael.Armstrong/Index.html

The button to add the marker in the top right has an onclick event pointing to my ‘placeMarker()’ function. Here is the code for placeMarker(), createMarker() …

function placeMarker() {

    select("placeMarker");

    var infowindow = new google.maps.InfoWindow({}); 
    var catID = document.getElementById('category');
    var typeID = document.getElementById('ddlType');
    var category = catID.options[catID.selectedIndex].value;
    var markerType = typeID.options[typeID.selectedIndex].value;

    if (!markerType) {
        alert("You must select an icon type.");
    } 
    else {
        var moveListener = google.maps.event.addListener(customMap, 'mousemove', function(event) {
            if (mapMarker) {
                mapMarker.setPosition(event.latLng);
            } else {
                mapMarker = createMarker(event.latLng, "test", markerType, "test");
            }
        });

        var clickListener = google.maps.event.addListener(customMap, 'click', function(event) {
            if (mapMarker) {
                select("hand_b");
                google.maps.event.clearListeners(customMap, 'mousemove');
                google.maps.event.removeListener(listener);
                mapMarker = createMarker(event.latLng, "test2", markerType, "test");

                var htmlInfo = "" +
                    "Category:" + category + "" +
                    "Item:" + markerType + "" +
                    "Notes:" +
                    "Location:" + mapMarker.getPosition().toString() + "" +
                    "" +
                    "";

                //infowindow.setContent(htmlInfo);
                //infowindow.open(customMap, mapMarker);
            }
        });
    }
}

function createMarker(latlng, title, icon, html) {
    var mapMarker = new google.maps.Marker({
        position: latlng,
        map: customMap,
        title: title,
        icon: 'Images/' + icon + '.png'
    });
    return mapMarker;
}

function select(buttonId) {
    document.getElementById("hand_b").className = "unselected";
    document.getElementById("placeMarker").className = "unselected";
    document.getElementById(buttonId).className = "selected";
}

Any help or suggestions would be awesome. Could this perhaps be a bug in ff?

Answer 1

I did something very similar for an open-source disaster software package. In this case, lets assume I selected "Fire" in my dropdown menu and this triggers addFire(). The listener on the markers will delete the point on a click or allow you to drag it. The map can only have one listener at a time, but each marker can still have its own listener at the same time.

Here is the code that worked on Chrome, Firefox and IE8:

//This function sets up the map for adding a fire icon
function addFire() {
 //Kill old listener
 if(listening)
  google.maps.event.removeListener(listenerhandle);
 
 //Start new listener
 listenerhandle = google.maps.event.addListener(disasterMap, 'click', addFirePoint);
 listening = true;
}//end addFire

//This function adds new fire points to the map and controls dragging and clicking
function addFirePoint(event) {
 //Create the marker
 var fireMarker = new google.maps.Marker({
  icon: "./mapimgs/fire.png", position: event.latLng, map: disasterMap, draggable: true });
 
 newFireMarkers.push(fireMarker);
 fireMarker.setTitle("Fire");
 
 //Listen for clicks on the new marker
 google.maps.event.addListener(fireMarker, 'click', function() {
      fireMarker.setMap(null);
   //remove the marker from the array
   for(i=0;i<newFireMarkers.length;i++) {
    if(fireMarker.getPosition() == newFireMarkers[i].getPosition()) {
     newFireMarkers.splice(i,1);
     break;
    }
   }
  }
 ); //end click listener
}//end addFirePoint