README.md

⚠️ This document is aim for older versions (from 2.0.0 to 2.2.9). Document for new version is https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md

---

KmlOverlay class

This class extends BaseClass.

Contents

• Overview
  • Add KML overlay
  • Click event
  • Update the polyline
  • Assign your data
• API Reference

---

Overview

KML is a xml file format that is used for geographic. Most common geographic softwares support this KML format file.

KML has complex structure. This plugin supports only following tags.

kml	folder	placemark	document	multigeometry
photooverlay	point	polygon	linestring	groundoverlay
networklink (<region> is also supported)	lookat	extendeddata	schema	styles
balloonstyle (<description> only)	iconstyle	styleurl	stylemap (normal mode only)	coordinates

Unfortunately, KMZ file is not supported yet.

Regarding of <ExtendedData> tag, if the KML file contains <BaloonStyle> tag as template, the maps plugin displays just like defined. Otherwise, draw a table like below.

---

Add KML Overlay

The map.addKmlOverlay() method reads a KML file from local or Internet.

• This method works after the MAP_READY event.

var mapDiv = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap(mapDiv, {
  'mapTypeId': plugin.google.maps.MapTypeId.SATELLITE
});

map.addEventListener(plugin.google.maps.event.MAP_READY, function() {

  map.addKmlOverlay({
    'url': "./marker.kml"
  }, function(kmlOverlay) {

    // Fit the camera viewport to show all markers.
    map.moveCamera(kmlOverlay.camera);

  });

});

marker.kml

<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <Style id="rf">
      <ListStyle>
        <listItemType>radioFolder</listItemType>
      </ListStyle>
    </Style>
    <Folder>
      <name>One at a time</name>
      <styleUrl>#rf</styleUrl>
      <Placemark>
        <name>Radio A</name>
        <Point>
          <coordinates>-121.9921875,37.44140625</coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Radio B</name>
        <Point>
          <coordinates>-121.9921875,37.265625</coordinates>
        </Point>
      </Placemark>
    </Folder>
    <Folder>
      <name>Both visible</name>
      <Placemark>
        <name>C</name>
        <Point>
          <coordinates>-121.16796875,37.44140625</coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>D</name>
        <Point>
          <coordinates>-121.16796875,37.265625</coordinates>
        </Point>
      </Placemark>
    </Folder>
  </Document>
</kml>

---

Click event

The KML_CLICK event is fired when you tap on the overlays that are generated with addKmlOverlay() method.

map.addKmlOverlay({
  'url': "./marker.kml"
}, function(kmlOverlay) {

  // Fit the camera viewport to show all markers.
  map.moveCamera(kmlOverlay.camera);

  // You can get additional information
  kmlOverlay.on(plugin.google.maps.event.KML_CLICK, function(overlay, latLng) {
    // overlay is vary, such as Marker, Polyline
    console.log(overlay);
  });

});

Create

map.addKmlOverlay()	Add a kml overlay.

Methods

setClickable()	Change click-ability of the kml overlay.
setVisible()	Change visibility of the kml overlay.
remove()	Remove the ground overlay.

Events

GROUND_OVERLAY_CLICK	Arguments: LatLng This event is fired when you click on a circle.