Search code examples
javascriptgoogle-mapsgeolocationkmz

Gmaps search and kmz load javascript


I have a website on which i load and use kmz files. My problem is that GEO location is not working, i mean it's working but it's not showing the street becouse the Javascript loads kmz file and sets focus on KMZ map and not your GEOlocation.

Anyway, here is the code so you can look what is wrong:

 <script type="text/javascript">
    var map, infoWindow;
    $(document).ready(function(){
      infoWindow = new google.maps.InfoWindow({});
      map = new GMaps({
        el: '#map',
        zoom: 20,
        lat: 46.044414,
        lng: 14.508105,
      });
      map.loadFromKML({
        url: 'http://blabla.com/blabla.kmz',
        url: 'http://blabla.com/blabla2.kmz',
        suppressInfoWindows: true,
        events: {
          click: function(point){
            infoWindow.setContent(point.featureData.infoWindowHtml);
            infoWindow.setPosition(point.latLng);
            infoWindow.open(map.map);
          }
        }
      });
    });
  </script>
<script type="text/javascript">
GMaps.geolocate({
  success: function(position) {
    map.setCenter(position.coords.latitude, position.coords.longitude);
  },
  error: function(error) {
    alert('Geolocation failed: '+error.message);
  },
  not_supported: function() {
    alert("Your browser does not support geolocation");
  },
  always: function() {
    alert("Success!");
  }
});
</script>

Oh i almost forgot, i am using Gmaps.js


Solution

  • From the GMaps documentation

    Also, loadFromKML accepts any option defined in google.maps.KmlLayerOptions.

    Use {preserveViewport: true} option.

    preserveViewport boolean By default, the input map is centered and zoomed to the bounding box of the contents of the layer. If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.

    map.loadFromKML({
        url: 'http://blabla.com/blabla.kmz',
        url: 'http://blabla.com/blabla2.kmz',
        preserveViewport: true,
        suppressInfoWindows: true,
        events: {
          click: function(point){
            infoWindow.setContent(point.featureData.infoWindowHtml);
            infoWindow.setPosition(point.latLng);
            infoWindow.open(map.map);
          }
        }