Reloading google maps places API on checkbox change

Question

Introduction

I'm using the google maps Places API for a website. It lets a visitor see certain places near the location that he/she has chosen such as a bakery, cinema, school, busstation etc.

The problem is that the google maps places API only gets about 20 results at most, which causes a lot of places to be missing from the map even though they're within the specified radius (700 in this case).

What I came up with was using checkboxes to let the user select which places he/she wants to see.

The concept is very simple. The user clicks a checkbox and (by using jquery) populates an array. This array is used to call the API and load in the markers.

The Problem

The map seems to reload (it "flickers") but it only shows me the grocery_or_supermarket places (which are by default enabled and in the array so the user doesn't see an empty map). I'm calling the initialize() function after changing a checkbox. It's not changing the markers on the map or adding new ones which is what I want.

The Code

<script>
var q = jQuery.noConflict();
var selected = ["grocery_or_supermarket"];

q( document ).ready(function( q ) {
    q('.map-legenda').change(function() {
        var selected = [];
        q.each(q('.map-legenda input:checked'), function(a,b) {
            selected.push(q(b).val());
        });
        console.log(selected);
        initialize();
    });
});
</script>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
<script>
var map;
var infowindow;

function initialize() {
  var _lat = "<?php print($lat); ?>";
  var _long = "<?php print($long); ?>";

  var home = new google.maps.LatLng(_lat, _long);

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: home,
    zoom: 15
  });

  var request = {
    location: home,
    radius: 750,
    types: selected
  };

  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);

  var marker_home = new google.maps.Marker({
    map: map,
    position: home,
    icon: 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/covers.png'
  });
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

var grocery_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/grocerystore.png';
var school_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/school.png';
var gym_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/gym.png';
var treinstation_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/treinstation.png';
var bakery_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/bakery.png';
var bus_station_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/busstation.png';
var convenience_store_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/conv_store.png';
var movie_theater_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/bios.png';
var park_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/park.png';
var parking_icon = 'http://www.mywebsite.com/wp-content/themes/CH/lib/images/maps_icons/parking.png';

function createMarker(place) {
  var custom_icon;
  if(place.types.indexOf('grocery_or_supermarket') != -1) {
    custom_icon = grocery_icon;
  } else if(place.types.indexOf('gym') != -1) {
    custom_icon = gym_icon;
  } else if(place.types.indexOf('train_station') != -1) {
    custom_icon = treinstation_icon;
  } else if(place.types.indexOf('school') != -1) {
    custom_icon = school_icon;
  } else if(place.types.indexOf('bakery') != -1) {
    custom_icon = bakery_icon;
  } else if(place.types.indexOf('bus_station') != -1) {
    custom_icon = bus_station_icon;
  } else if(place.types.indexOf('convenience_store') != -1) {
    custom_icon = convenience_store_icon;
  } else if(place.types.indexOf('movie_theater') != -1) {
    custom_icon = movie_theater_icon;
  } else if(place.types.indexOf('park') != -1) {
    custom_icon = park_icon;
  } else if(place.types.indexOf('parking') != -1) {
    custom_icon = parking_icon;
  }

  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    title: place.name,
    icon: custom_icon
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
<div id="map_canvas"></div>
<br/>
<ul class="map-legenda">
  <li class="woning">
    <img width="32" height="32" alt="Woning" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/covers.png">
    <?php echo icl_t('custom','Woning','Woning');?>
  </li>
  <li class="supermarkt">
    <img width="32" height="32" alt="Supermarkt" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/grocerystore.png">
    <?php echo icl_t('custom','Supermarkt','Supermarkt');?><input type="checkbox" name="supermarkt" value="grocery_or_supermarket" checked>
  </li>
  <li class="parkeerplaats">
    <img width="32" height="32" alt="<?php echo icl_t('custom','Parking','Parking');?>" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/parking.png">
    <?php echo icl_t('custom','Parking','Parking');?><input type="checkbox" name="parkeerplaats" value="parking">
  </li>  
  <li class="fitness">
    <img width="32" height="32" alt="Fitness" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/gym.png">
    <?php echo icl_t('custom','Fitness','Fitness');?><input type="checkbox" name="fitness" value="gym">
      </li> 
    <li class="school">
    <img width="32" height="32" alt="School" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/school.png">
    <?php echo icl_t('custom','School','School');?><input type="checkbox" name="school" value="school">
      </li>  
      <li class="bakkerij">
        <img width="32" height="32" alt="<?php echo icl_t('custom','Bakery','Bakery');?>" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/bakery.png">
        <?php echo icl_t('custom','Bakery','Bakery');?><input type="checkbox" name="bakkerij" value="bakery">
      </li>
      <li class="busstation">
        <img width="32" height="32" alt="<?php echo icl_t('custom','Bus station','Bus station');?>" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/busstation.png">
        <?php echo icl_t('custom','Bus station','Bus station');?><input type="checkbox" name="busstation" value="bus_station">
      </li>
      <li class="park">
        <img width="32" height="32" alt="<?php echo icl_t('custom','Park','Park');?>" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/park.png">
        <?php echo icl_t('custom','Park','Park');?><input type="checkbox" name="park" value="park">
      </li>
      <li class="bios">
        <img width="32" height="32" alt="<?php echo icl_t('custom','Movie theater','Movie theater');?>" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/bios.png">
    <?php echo icl_t('custom','Movie theater','Movie theater');?><input type="checkbox" name="bios" value="movie_theater">
      </li>
      <li class="buurtwinkel">
        <img width="32" height="32" alt="<?php echo icl_t('custom','Convenience store','Convenience store');?>" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/conv_store.png">
        <?php echo icl_t('custom','Convenience store','Convenience store');?><input type="checkbox" name="buurtwinkel" value="convenience_store">
      </li>
      <li class="treinstation">
        <img width="32" height="32" alt="Trein" src="<?php bloginfo("template_url"); ?>/lib/images/maps_icons/treinstation.png">
        <?php echo icl_t('custom','Trein','Trein');?><input type="checkbox" name="treinstation" value="train_station">
  </li>
</ul>

Answer 1

In Javascript, var declares a new variable inside a certain scope. By declaring var selected = [] inside your change handler, you created a new variable that was inaccessible to your initialize function. Removing the var in your change handler causes it to modify the global selected array.

As @duncan pointed out in a comment, perhaps a better way to achieve the same result would be to take selected out of global scope and pass it as a parameter to initialize .

<script>
    q( document ).ready(function( q ) {
        q('.map-legenda').change(function() {
            var selected = [];
            q.each(q('.map-legenda input:checked'), function(a,b) {
                selected.push(q(b).val());
            });
            console.log(selected);
            initialize(selected);
        });
    });
</script>

<script>
    var map;
    var infowindow;

    function initialize(selected) {
        ...