Google Map Js API KML

load kml/kmz file

by allen Yu

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div>
  <button type="button" onclick="loadKmz()">kmz Load</button>
  <button type="button" onclick="loadKml()">kml Load</button>
  <button type="button" onclick="clearMap()">clear Map</button>
</div>
<div id="map"></div>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map {
  height: 100%;
}

JavaScript

var map = null;
var kmzLayer, kmlLayer;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    //mapTypeId: google.maps.MapTypeId.TERRAIN,
    zoom: 11,
    center: new google.maps.LatLng(24.985991, 121.292137)
  });
}

var loadKmz = function loadKmz() {
  kmzLayer = new google.maps.KmlLayer({
    url: 'https://shunnien.github.io/Victoria/sample.kmz',
    map: map
  });
};

var loadKml = function() {
  kmlLayer = new google.maps.KmlLayer({
    url: 'https://shunnien.github.io/Victoria/ty_bike_lane.kml',
    //clickable: false,
    //preserveViewport: true,
    //screenOverlays: false,
    //suppressInfoWindows: false,
    //map: map
  });
  kmzLayer.setMap(map);
};

var loadKml = function() {
  kmlLayer = new google.maps.KmlLayer({
    url: 'https://shunnien.github.io/Victoria/ty_bike_lane.kml',
    //clickable: false,
    //preserveViewport: true,
    //screenOverlays: false,
    //suppressInfoWindows: false,
    //map: map
  });
  kmlLayer.setMap(map);
};

var clearMap = function() {
  if (kmzLayer) {
    kmzLayer.setMap(null);
  }
  if (kmlLayer) {
    kmlLayer.setMap(null);
  }
};

initMap();