Google Map KML doesn't display details and custom markers on website -


i created map , got kml file.

in google maps, custom icons , details show up, on webpage icons white , when clicked, not details pop up.

here code.

anyone have experience this?

function initmap() {     var map = new google.maps.map(document.getelementbyid('map'),      {         zoom: 4,         center: {lat: 37.09024, lng: -95.712891},     });      //create marker position     var myloc = new google.maps.marker({         clickable: false,         icon: new google.maps.markerimage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',             new google.maps.size(22,22),             new google.maps.point(0,18),             new google.maps.point(11,11)),         shadow: null,         zindex: 999,         map:map // google.maps.map object     });      //add spots layer     var kmlfile = 'https://storage.googleapis.com/spots_map/spots.kml?'+(new date()).gettime();     var kmllayer = new google.maps.kmllayer(kmlfile,     {         suppressinfowindows: true,         map: map,         preserveviewport: true     });      var infowindow = new google.maps.infowindow({map: map});      // geolocation enabled????     if (navigator.geolocation) {           //get current position         navigator.geolocation.getcurrentposition(function(position) {             var pos = {                 lat: position.coords.latitude,                 lng: position.coords.longitude         };                         infowindow.close();          //zoom map location         map.setcenter(pos);         map.setzoom(11);          //set location         // var me = new google.maps.latlng(pos.coords.latitude, pos.coords.longitude);         myloc.setposition(pos);       }, function() {       handlelocationerror(true, infowindow, map.getcenter());     });     } else {          // browser doesn't support geolocation         handlelocationerror(false, infowindow, map.getcenter());     } }  function handlelocationerror(browserhasgeolocation, infowindow, pos)  {      infowindow.setposition(pos);     infowindow.setcontent(browserhasgeolocation ?                     'please enable geolocation browser' :                     'your browser doesn\'t support geolocation.');  } 

kml file:

<?xml version='1.0' encoding='utf-8'?> <kml xmlns='http://www.opengis.net/kml/2.2'>     <document>         <name>spots</name>         <networklink>             <name>spots</name>             <link>                 <href>http://www.google.com/maps/...</href>             </link>         </networklink>     </document> </kml> 

answering here don't have sufficient points comment.

option 1: setting suppressinfowindows false

the reason why details doesn't pop when click marker because have set suppressinfowindows true. set false. here's working fiddle displays info window when click on kml marker - http://jsfiddle.net/nkp2fhxb/50/. changed here kml file , set suppressinfowindows true.

i've used kml http://kml-samples.googlecode.com/svn/trunk/kml/liststyle/item-icon-hotspot.kml. kml have <style> tag has href points right custom icon? may that's reason why icons white. sample kml has icon - http://maps.google.com/mapfiles/kml/paddle/go-lv.png, can see on fiddle.

option 2: custom info window

if want modify gets displayed on info window, keep suppressinfowindows true, , add click event handler displays properties need. here's fiddle displays position in addition default name , description of marker on info window - http://jsfiddle.net/nkp2fhxb/54/

google.maps.event.addlistener(kmllayer, 'click', function(kmlevent) {      var text = kmlevent.featuredata.name;      showincontentwindow(kmlevent.latlng,      kmlevent.featuredata.name,      kmlevent.featuredata.description); });  function showincontentwindow(position, name, description) {       var infowindow = new google.maps.infowindow({           content: "<p><strong>" + name + "</strong></p>" +           "<p>" + description + "</p>" +           "<p>" + position.lat() + "</p>" +           "<p>" + position.lng() + "</p>",           position: position,           pixeloffset: new google.maps.size(0,-20),        })       infowindow.open(map); } 

hope helps.


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -