javascript does not display current location of user over a google map using KML layer?

Question

I am trying to load KML file using javascript and along with that i am trying to place a marker on the map with users current location. However the code works fine if i do insert the check geolocation (current position) code ? How do i add current location on top of a KML layer map.

   function initialize() {
      var chicago = new google.maps.LatLng(49.051078,-122.314221);
      var mapOptions = {
        zoom: 11,
        center: chicago
      }

      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


      if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var pos = new google.maps.LatLng(position.coords.latitude,
                                           position.coords.longitude);

          var infowindow = new google.maps.InfoWindow({
            map: map,
            position: pos,
            content: 'Location found using HTML5.'
          });

          map.setCenter(pos);
        }, function() {
          handleNoGeolocation(true);
        });
      } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
      }
    }

    function handleNoGeolocation(errorFlag) {
      if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
      } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
      }

      var options = {
        map: map,
        position: new google.maps.LatLng(60, 105),
        content: content
      };

      var infowindow = new google.maps.InfoWindow(options);
      map.setCenter(options.position);
    }


      var ctaLayer = new google.maps.KmlLayer({
        url: 'https://dl.dropboxusercontent.com/u/143598220/38EndsleighCrescent.kml'


      });
      ctaLayer.setMap(map);
    }



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

Answer 1

This works for me. Fixed your javascript errors, made the map global, used preserveViewport on the KmlLayer to prevent the map from centering on the layer.

// Declaring the map as a global variable
var map;
function initialize() {
  var chicago = new google.maps.LatLng(49.051078,-122.314221);
  var mapOptions = {
    zoom: 11,
    center: chicago
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var ctaLayer = new google.maps.KmlLayer({
    url: 'https://dl.dropboxusercontent.com/u/143598220/38EndsleighCrescent.kml',
    preserveViewport: true


  });
  ctaLayer.setMap(map);

  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}


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