overlay kml file on google map component

[Hazzaa Misfer ALhazzaa]

Is there any API or way to overlay my KML file URL to appery google map compomemt

[Evgene Karachevtsev]

Hello Hazzaa,

You should contact Google support to find out it there is a possibility to do this with google map api.

[Hazzaa Misfer ALhazzaa]

Thank you for your reply.

• but Google map wrote the below Javascript code and i don't know how to use it with appery google map component

  -Google example link

  https://developers.google.com/maps/do...

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

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

  var ctaLayer = new google.maps.KmlLayer({
  url: 'http://gmaps-samples.googlecode.com/s...'
  });
  ctaLayer.setMap(map);
  }

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

  --------------------------------------------------------------------------------------------

[Giorgio Draghetti]

This worked for me:

Create a new Javascript in Appery.io app and include this code:
code
var map = {};
var ctaLayer = new google.maps.KmlLayer(null);

function initMap() {
map = new google.maps.Map($('div[dsid="atcMap"]').get(0), {
zoom: 9,
center: {lat: 41.876, lng: -87.624}
});

}

function addKml() {
ctaLayer = new google.maps.KmlLayer({
url: 'http://yourdomain.world/kml/yourFile.kml',
preserveViewport: false,
map: map
});
}

/code

then:

• create a screen with a googleMap and a button components

• name the google map component 'atcMap'

• in the screen 'Load' event put this code: codeinitMap();/code

• in a 'click' event of the button component put this code: codeaddKml();/code

  Please note:
  1 - in the codeaddKml()/code function the code http://yourdomain.world/kml/yourFile.kml'/code should point to the kml file you want to load into the map!
  2 - the codeatcMap/code component name can obviously be changed but you must change the corresponding code line in the codeinitMap()/code function declaration.

  I hope this help you.