title: dynamically adding markers to google map on click
body: <p>I am trying to create a website that has a google map in one column and in the second is a list of items with location elements. On clicking one of these items, I would like to drop a pin in the google map. I am having trouble updating the markers on the google map. I can add one marker at initialization of the map, but cannot get new markers to be dropped. Here is my code: <a href="https://gist.github.com/aarongirard/32f80f17e19d3e0389da" rel="nofollow">https://gist.github.com/aarongirard/32f80f17e19d3e0389da</a>. The issue occurs in the if else clause within the click function.</p>
  
  <p>Any help is appreciated!! </p>
  
  <pre><code>//global variables //google map
  var map;
  var marker;
  var currentMakerli;
  
  
  
  function initialize() {
    //set latlng of starting window of map
    var mapOptions = {
      center: { lat: 34.073609, lng: -118.562313},
      zoom: 14,
    };
    //set map using above options and attach to given element
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    //construct new marker;  constructor takes an object with position and title properties
  
  //get lat long for first marker
  var latlng = new google.maps.LatLng(34.073514, -118.562348);
   marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: "Home"
  });
  
  
  
  
    //on click of li add new marker or remove if marker already exists
    $(".DataList li").click(function(){
      //if current marker set to this already
      //remove marker
      if ( $(this).attr('id') === 'current') {
        marker.setMap(null);
        $(this).attr('id', '');
      } else {
        $(this).attr('id','current');
        var latlngarr = getLatLngFromString($(this).attr('data-position'));
        var lat = latlngarr[0];
        var lng = latlngarr[1];
  
        thisLatlng = new google.maps.LatLng(lat,lng);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map,
        });
  
        //marker.setMap(map);
      }
    });
  
  }
  
  //set map
  google.maps.event.addDomListener(window, 'load', initialize);
  
  
  
  function getLatLngFromString(string){
  
    var array = string.split(',');
    array[0] = parseFloat(array[0]);
    array[1] = parseFloat(array[1]);
    return array;
  }
  </code></pre>