使用ajax调用drop down时，Google地图显示标记无法正常工作

Question

I have a contact page where they have multiple branches in countries. So trying to filter the location and on city select it should show the marker with info window. My problem is if I select the city directly it works but when going thru the filer dropdown it doesnt work. Please advice on what am I doing wrong.

This is my link http://www.safarikidindia.com/demo_map.html

here is my code

On country drop down I call onchange='generatestate(this)'> & generate city on state drop down. here is the ajax function code

function generatestate(o)
 {

set_current_date_time()
http.abort();
document.getElementById('locationstate').innerHTML = '';
document.getElementById('locationcity').innerHTML = '';
var url = "common_ajax.php?action=showstate&countryid="+o.options[o.selectedIndex].value;
    //alert(url);
  http.open("GET", url, true);
  http.onreadystatechange=function() {
    if(http.readyState == 4) {
            //alert(http.responseText);
            //var response = http.responseText;

              document.getElementById('locationstate').innerHTML = http.responseText;
        //    alert(http.responseText);

    }
  }
  http.send(null);


 }



  function geneeratecity(o)
 {

set_current_date_time()
http.abort();
document.getElementById('locationcity').innerHTML = '';

var url = "common_ajax.php?action=geneeratecuty&stateid="+o.options[o.selectedIndex].value;
    //alert(url);
  http.open("GET", url, true);
  http.onreadystatechange=function() {
    if(http.readyState == 4) {
            //alert(http.responseText);
            //var response = http.responseText;

              document.getElementById('locationcity').innerHTML = http.responseText;
            //alert(http.responseText);

    }
  }
  http.send(null);


 }



 ////////////////////////////////

In common_ajax we have following php function

      if($action=="showstate")
 {
$countryid = trim(filter_var($_REQUEST['countryid'], FILTER_SANITIZE_STRING));
$state = $safari->country_state_location($countryid);

?>
<select name="city" id="city" class="drpdown" onchange="geneeratecity(this);">
          <option value="">Select State</option>
          <?php 

          for($i=0;$i<count($state);$i++)
          {

          $statename = $safari->get_singlestate($state[$i]['state'])
          ?>
                 <option value="<?php echo $statename[0]['statesrno'];?>"><?php echo     $statename[0]['statename'];?></option>
          <?php
          }
          ?>


        </select>
<?php 

 }

 if($action=="geneeratecuty")
 {
$stateid = trim(filter_var($_REQUEST['stateid'], FILTER_SANITIZE_STRING));
$locations = $safari->country_city_location($stateid);

?>

        <select name="city" class="city" id="city">
          <option value="" selected>--- Select ---</option>

                       <?php 

        for($l=0;$l<count($locations);$l++)
        { ?>
        <option value="marker<?php echo $locations[$l]['srno'];?>"><?php echo $locations[$l]['city'];?></option>





        <?php } ?>
        </select>




     <?php 

 }

  ?>

Answer 1

The change-listener is bound to the #city-element that exists when you call initialize. When you filter the lists, this element will be overwritten, the newly created select will not listen to the listener.

There may be different ways to fix it, but you already use jQuery, so I would suggest to use jQuery's on() instead of google.maps.event.addDomListener :

jQuery(document).on('change','#city',
  function(){
    //your code
  }
);