Dropdown Map

Google Map - jQuery way

by Brent Coder

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<div class="container">
  <div class="well">
    <div id="map_canvas"></div>
  </div>
</div>
<select id="form-control" class="form-control" name="form-control">
  <option>Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

CSS

@import url('https://getbootstrap.com/dist/css/bootstrap.css');
body {
  padding-top: 25px;
}

#map_canvas {
  width: 100%;
  height: 400px;
}

JavaScript

var map;
var kmlLayer;
$(document).ready(function() {
  var latlng = new google.maps.LatLng(44.651070, -63.582687);
  var myOptions = {
    zoom: 6,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


  $('.form-control').on('change', function() {
  var x = document.getElementById("form-control").selectedIndex;
  alert(x);
  
    if (kmlLayer && kmlLayer.setMap) kmlLayer.setMap(null);
    switch(x) {
    case 1:
            var kmlUrl = 'https://www.eastlink.ca/Portals/0/Wireless/CoverageMaps/Coverage_PEI_VoLTE_170403_v1.kmz';
        break;
    case 2:
            var kmlUrl = 'https://www.google.ca/url?sa=t&rct=j&q=&esrc=s&source=web&cd=5&cad=rja&uact=8&ved=0ahUKEwji0trf-s3XAhXqyoMKHe2VAjgQFghCMAQ&url=https%3A%2F%2Fwww.google.ca%2Fmaps%2Fms%3Fie%3DUTF8%26t%3Dh%26msa%3D0%26output%3Dkml%26msid%3D210284094756732406884.0004d80d397f553704228&usg=AOvVaw33nw2zFPtKc-LAayl-NJBj';
        break;
 case 3:
            var kmlUrl = 'https://www.google.ca/url?sa=t&rct=j&q=&esrc=s&source=web&cd=7&cad=rja&uact=8&ved=0ahUKEwiY0eTh4c_XAhVHNd8KHcisBAYQFghxMAY&url=http%3A%2F%2Fwww.boatlaunches.ca%2Falbum%2Fmain.php%3Fg2_view%3Dmap.GoogleEarth%26g2_itemId%3D232&usg=AOvVaw0VvgV-Y-iSV_2UnbtSxrOA';
        break;
  case 4:
            var kmlUrl = 'https://www.google.ca/url?sa=t&rct=j&q=&esrc=s&source=web&cd=13&cad=rja&uact=8&ved=0ahUKEwjora2j4s_XAhVEc98KHRuiCRA4ChAWCC8wAg&url=http%3A%2F%2Fgeogratis.gc.ca%2Fapi%2Fen%2Fnrcan-rncan%2Fess-sst%2F31c9720b-e3cc-50ce-9757-321632b03eae.kml&usg=AOvVaw301maKE8oKH7SJaON4etTB';
        break;
    default:
           var kmlUrl = 'https://www.eastlink.ca/Portals/0/Wireless/CoverageMaps/Coverage_1804111350_v2.kmz';
		}

    var kmlOptions = {
      suppressInfoWindows: true,
      preserveViewport: true,
      map: map
    };
    kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);

  });
});