javascript - dynamically adding markers to google map on click -

i trying create website has google map in 1 column , in second list of items location elements. on clicking 1 of these items, drop pin in google map. having trouble updating markers on google map. can add 1 marker @ initialization of map, cannot new markers dropped. here code: https://gist.github.com/aarongirard/32f80f17e19d3e0389da. issue occurs in if else clause within click function.

any appreciated!!

//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 , attach given element   map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);   //construct new marker;  constructor takes object position , title properties  //get lat long 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 exists   $(".datalist li").click(function(){     //if current marker set     //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; } 

you must store marker in way in able relation between <li> , marker, e.g. via $.data

simple example:

function initialize() {    //set latlng of starting window of map    var map = new google.maps.map($('#map-canvas')[0], {                center: { lat: 34.073609, lng: -118.562313},                zoom: 14,                disabledefaultui:true              }),        home = new google.maps.marker({    position: { lat: 34.073514, lng: -118.562348},    map: map,    title: "home",    icon:'http://maps.google.com/mapfiles/arrow.png'  });      map.controls[google.maps.controlposition.top_left].push($(".datalist")[0]);        //on click of li add new marker or remove if marker exists    $(".datalist li").click(function(){      var that=$(this);      //when there no marker associated li create new      if(!that.data('marker')){          that.data('marker',new google.maps.marker({position:(function(ll){            return new google.maps.latlng(ll[0],ll[1]);          }(that.data('position').split(/,/)))}));            }            var marker=that.data('marker');      //simply check markers map-property decide       //if marker has added or removed      if(marker.getmap()){        that.removeclass('current');        marker.setmap(null);      }      else{        that.addclass('current');        marker.setmap(map);      }    });    }    google.maps.event.adddomlistener(window, 'load', initialize);

       html,body,#map-canvas{height:100%;margin:0;padding:0}         .current{background:#f1f1f1;}         .datalist{background:#fff;padding:0;}         .datalist li{cursor:pointer;padding:4px;list-style-position:inside;}

<script src="https://code.jquery.com/jquery-latest.js"></script>  <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>  <ul class="datalist">    <li data-position="34.0717825, -118.567396">santa ynez canyon park</li>    <li data-position="34.0787989, -118.572502">palisades country estates</li>    <li data-position="34.078375, -118.56098">highland recreation center</li>  </ul>  <div id="map-canvas"></div>

---

related comments:

you didn't mess variable-names, examples uses less variables, may use more variables when want to.

i prefer avoid variables when need access object once.

---

the marker created here(and stored property of <li/>):

//when there no marker associated li create new if(!that.data('marker')){    that.data('marker',new google.maps.marker({position:(function(ll){       return new google.maps.latlng(ll[0],ll[1]);     }(that.data('position').split(/,/)))}));  } 

the part splits data-position-attribute this:

(function(ll){       return new google.maps.latlng(ll[0],ll[1]); }(that.data('position').split(/,/))) 

it's so-called "self-executing anonymous function", returns desired value(a latlng) used position of marker. splitted data-position-attribute used argument function

that.data('position').split(/,/) 

---

getmap() returns whatever map-property has been set to, either google.maps.map-instance or null (when want remove marker or when property not set). although it's not boolean value evaluates either true(when it's map) or false(when it's null), may used condition.

---

the that-variable new variable, that's correct, reference same object, clicked <li/>. marker has been stored property of object.