title: Google Map - Load KML Overlay
body: <p>I am trying to display a map, zoom into a zipcode, and then place Congressional District overlay onto map.  The overlay is here: <a href="https://www.google.com/fusiontables/DataSource?snapid=S506424n-DY" rel="nofollow">https://www.google.com/fusiontables/DataSource?snapid=S506424n-DY</a></p>
  
  <p>I downloaded the KML link file, and saved it onto my local IIS server. However, the overlay never is drawn.</p>
  
  <p>I also added the following mime types to my IIS Server: </p>
  
  <pre><code>.kml application/vnd.google-earth.kml+xml 
  .kmz application/vnd.google-earth.kmz
  </code></pre>
  
  <p>The kml file looks like this:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;kml xmlns="http://www.opengis.net/kml/2.2"&gt;
  &lt;NetworkLink&gt;
  &lt;name&gt;&lt;![CDATA[2012 US Congressional Districts]]&gt;&lt;/name&gt;
  &lt;Link&gt;
  &lt;href&gt;
  https://www.google.com/fusiontables/exporttable?query=select+col5+from+1QlQxBF17RR-89NCYeBmw4kFzOT3mLENp60xXAJM&amp;amp;o=kmllink&amp;amp;g=col5&lt;/href&gt;
  &lt;/Link&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>My HTML/javascript looks like:</p>
  
  <pre><code>&lt;script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script language="javascript"&gt;
  var map;
  var marker;
  function showAddress() {
      $("#divGoogleMap").css('display', '');
      var mapProp = {
          center: new google.maps.LatLng(51.508742, -0.120850),
          zoom: 11,
          mapTypeId: google.maps.MapTypeId.TERRAIN
      };
      map = new google.maps.Map(document.getElementById("divGoogleMap"), mapProp);
  
      myListener = google.maps.event.addListener(map, 'click', function (event) {
          placeMarker(event.latLng);
      });
      google.maps.event.addListener(map, 'drag', function (event) {
          placeMarker(event.latLng);
      });
  
      var zipCode = $("#txtZip").val();
      var geocoder = new google.maps.Geocoder();
      geocoder.geocode({ 'address': zipCode }, function (results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              //Got result, center the map and put it out there
              var pos = results[0].geometry.location;
              saveLocation(pos);
              map.setCenter(pos);
              marker = new google.maps.Marker({
                  map: map,
                  draggable: true,
                  position: pos
              });
          } else {
              alert("Geocode was not successful for the following reason: " + status);
          }
      });
      var kmlUrl = '/DesktopModules/HelloWorld/2012_US_Congressional_Districts.kml';
      var kmlOptions = {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
      };
      var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions);
  
  }
  function placeMarker(location) {
      if (marker) {
          marker.setPosition(location);
      } else {
          marker = new google.maps.Marker({
              position: location,
              map: map,
              draggable: true
          });
          google.maps.event.addListener(marker, "drag", function (mEvent) {
              populateInputs(mEvent.latLng);
          });
      }
      saveLocation(location);
  }
  function saveLocation(pos) {
      $("#hfLatitude").val(pos.lat());
      $("#hfLogitude").val(pos.lng());
  }
  &lt;/script&gt;
  
  &lt;table cellpadding="2" cellspacing="2" border="0"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;asp:TextBox ID="txtZip" ClientIDMode="Static" runat="server"&gt;&lt;/asp:TextBox&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="button" id="btnSearch" value="Search" onclick="showAddress()" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div id="divGoogleMap" style="width: 800px;height: 600px;display: none;"&gt;&lt;/div&gt;
  &lt;asp:HiddenField ID="hfLatitude" ClientIDMode="Static" runat="server" /&gt;
  &lt;asp:HiddenField ID="hfLongitude" ClientIDMode="Static" runat="server" /&gt;
  </code></pre>
  
  <p>What am I doing wrong here?</p>