Load google map API on click event, the marker doesn't show

Question

I am trying to load different Google map instances based on clicking different addresses. The event listener works as a charm, but the problem is the Marker doesn't load. Here is my code. I would like the Marker loads for each address onclick event.

<div style="float:left;width:100%;">
  <div style="float:left;">
  <h2>Locations</h2>
  <ul class="menu">
   <li onclick="loadMap('43.6581859','-79.3906945');">
     <a href="#">Category 1</a></li>
   <li onclick="loadMap('43.658589','-79.3872499');">
     <a href="#">Category 2</a></li>
   <li onclick="loadMap('43.6533033','-79.4058543');">
     <a href="#">Category 3</a></li>
  </div>
  <div style="float:left; width: 20px;">&nbsp;</div>
  <div style="width:400px;height:450px; overflow:hidden;"><h2>Map</h2>
  <div id="map_canvas" style="height:400px;"></div>
  </div>
</div>
<!--Load Map Script -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
  var map;
  var home;
  var markersArray = [];

  function initialize() {
       home = new google.maps.LatLng('43.659924','-79.38875');   
       var opts = {
            zoom: 15,
            center: home,
            mapTypeId: google.maps.MapTypeId.ROADMAP
       };

       map = new google.maps.Map(document.getElementById('map_canvas'), opts);
       google.maps.event.addListener(map, "click", function(event) {
              showMarker(event.latLng);
           });    

  }

  function loadMap(lat,lng)
       {
           var location= new google.maps.LatLng(lat, lng);
           map.setCenter(location);

       }

    function showMarker(location) {    
           deleteOverlays();               
           var marker = new google.maps.Marker({
               position: location,
               map: map
           });
           markersArray.push(marker);

    }


   function deleteOverlays() {
        if (markersArray) {
            for (i=0; i < markersArray.length; i++) {
                markersArray[i].setMap(map);
            }
        markersArray.length = 0;
        }
    }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Any help is much appreciated!

Answer 1

You're calling the showMarker on click of the google map, instead of on click of the list items.

If you call showMarker(location) in the loadMap function it should work.

function loadMap(lat,lng) {
    var location = new google.maps.LatLng(lat, lng);
    map.setCenter(location);
    showMarker(location);
} 

And you can remove the click event listener on the map (unless you want it for some other reason).

You also seem to have a problem with the deleteOverlays function, if you're trying to delete all the existing markers you should pass null into the setMap function:

function deleteOverlays() {
    if (markersArray) {
        for (i=0; i < markersArray.length; i++) {
            markersArray[i].setMap(null); //pass null in here
        }
    markersArray.length = 0;
    }
}

Answer 2

If you want to show marker after address selection, you should move showMarker(location) in the loadMap.

function loadMap(lat,lng)
       {
           var location= new google.maps.LatLng(lat, lng);
           map.setCenter(location);
           showMarker(location);
       }

Also i suggest to move 'onclick' event from <li> element to inner <a> element. This will avoid accidental clicks.

   <li><a onclick="loadMap('43.6581859','-79.3906945');" href="#">Category 1</a></li>
   <li><a onclick="loadMap('43.658589','-79.3872499');" href="#">Category 2</a></li>
   <li><a onclick="loadMap('43.6533033','-79.4058543');" href="#">Category 3</a></li>

Also I wnat to note, that your deleteOverlays() function not working properly, because in your example you call

markersArray[i].setMap(map);

instead

markersArray[i].setMap(null);

I think it should be better :)

I've created working JSFiddle for you with yor code.