Error opening a KML in an HTML - Google Maps

Navigation
1

I have the following problem, I try to add the KML file from Google Maps to an HTML file, but it gives me the following error:

Code: 

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: {lat: -16.503650029225387 , lng:-68.16271108415094}
    
  });

  var ctaLayer = new google.maps.kmlLayer({
    url: 'archivo.kml',
    map: map
  });
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <title>El Alto</title>
  </head>
  <body>
    <div id="map"></div>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7wqaaeacGuJCt5slAmi6BfhpB9zv8k30&callback=initMap">
    </script>
  </body>
</html>

File.kml 

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <name>mapasimulacion</name>
    <description><![CDATA[ceja-cruceviacha<br>]]></description>
    <Style id="icon-1899-0288D1-nodesc-normal">
      <IconStyle>
        <color>ffd18802</color>
        <scale>1</scale>
        <Icon>
          <href>http://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href>
        </Icon>
      </IconStyle>
      <LabelStyle>
        <scale>0</scale>
      </LabelStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <Style id="icon-1899-0288D1-nodesc-highlight">
      <IconStyle>
        <color>ffd18802</color>
        <scale>1</scale>
        <Icon>
          <href>http://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href>
        </Icon>
      </IconStyle>
      <LabelStyle>
        <scale>1</scale>
      </LabelStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <StyleMap id="icon-1899-0288D1-nodesc">
      <Pair>
        <key>normal</key>
        <styleUrl>#icon-1899-0288D1-nodesc-normal</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#icon-1899-0288D1-nodesc-highlight</styleUrl>
      </Pair>
    </StyleMap>
    <Style id="icon-1899-DB4436-nodesc-normal">
      <IconStyle>
        <color>ff3644db</color>
        <scale>1</scale>
        <Icon>
          <href>http://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href>
        </Icon>
      </IconStyle>
      <LabelStyle>
        <scale>0</scale>
      </LabelStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <Style id="icon-1899-DB4436-nodesc-highlight">
      <IconStyle>
        <color>ff3644db</color>
        <scale>1</scale>
        <Icon>
          <href>http://www.gstatic.com/mapspro/images/stock/503-wht-blank_maps.png</href>
        </Icon>
      </IconStyle>
      <LabelStyle>
        <scale>1</scale>
      </LabelStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <StyleMap id="icon-1899-DB4436-nodesc">
      <Pair>
        <key>normal</key>
        <styleUrl>#icon-1899-DB4436-nodesc-normal</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#icon-1899-DB4436-nodesc-highlight</styleUrl>
      </Pair>
    </StyleMap>
    <Style id="line-1267FF-5-nodesc-normal">
      <LineStyle>
        <color>ffff6712</color>
        <width>5</width>
      </LineStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <Style id="line-1267FF-5-nodesc-highlight">
      <LineStyle>
        <color>ffff6712</color>
        <width>8</width>
      </LineStyle>
      <BalloonStyle>
        <text><![CDATA[<h3>$[name]</h3>]]></text>
      </BalloonStyle>
    </Style>
    <StyleMap id="line-1267FF-5-nodesc">
      <Pair>
        <key>normal</key>
        <styleUrl>#line-1267FF-5-nodesc-normal</styleUrl>
      </Pair>
      <Pair>
        <key>highlight</key>
        <styleUrl>#line-1267FF-5-nodesc-highlight</styleUrl>
      </Pair>
    </StyleMap>
    <Folder>
      <name>Capa sin título</name>
      <Placemark>
        <name>ceja</name>
        <styleUrl>#icon-1899-0288D1-nodesc</styleUrl>
        <Point>
          <coordinates>
            -68.162688,-16.5036711,0
          </coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>Punto 2</name>
        <styleUrl>#icon-1899-0288D1-nodesc</styleUrl>
        <Point>
          <coordinates>
            -68.1669688,-16.5162824,0
          </coordinates>
        </Point>
      </Placemark>
    </Folder>
    <Folder>
      <name>Indicaciones de 1 15, El Alto, Bolivia a BELLA Vista, Av 6 de Marzo, La Paz, Bolivia</name>
      <Placemark>
        <name>Indicaciones de 1 15, El Alto, Bolivia a BELLA Vista, Av 6 de Marzo, La Paz, Bolivia</name>
        <styleUrl>#line-1267FF-5-nodesc</styleUrl>
        <LineString>
          <tessellate>1</tessellate>
          <coordinates>
            -68.16274,-16.50368,0
            -68.16292,-16.50423,0
            -68.16296,-16.50434,0
            -68.16303,-16.50447,0
            -68.16315,-16.50484,0
            -68.16324,-16.5051,0
            -68.16361,-16.50624,0
            -68.16362,-16.50625,0
            -68.16403,-16.50745,0
            -68.16437,-16.50841,0
            -68.16465,-16.50928,0
            -68.16475,-16.50957,0
            -68.16496,-16.51018,0
            -68.16514,-16.51068,0
            -68.16526,-16.51104,0
            -68.16555,-16.51188,0
            -68.16587,-16.51292,0
            -68.16617,-16.51388,0
            -68.16617,-16.51389,0
            -68.16621,-16.51402,0
            -68.167,-16.51629,0
          </coordinates>
        </LineString>
      </Placemark>
      <Placemark>
        <name>1 15, El Alto, Bolivia</name>
        <styleUrl>#icon-1899-DB4436-nodesc</styleUrl>
        <Point>
          <coordinates>
            -68.1627436,-16.5036846,0
          </coordinates>
        </Point>
      </Placemark>
      <Placemark>
        <name>BELLA Vista, Av 6 de Marzo, La Paz, Bolivia</name>
        <styleUrl>#icon-1899-DB4436-nodesc</styleUrl>
        <Point>
          <coordinates>
            -68.1669978,-16.5162884,0
          </coordinates>
        </Point>
      </Placemark>
    </Folder>
  </Document>
</kml>
    
asked by Alan Mendoza Gutierrez 19.03.2017 в 06:13
source

1 answer

1

The error is here: 

 var ctaLayer = new google.maps.kmlLayer({
    url: 'archivo.kml',
    map: map
  });

Either you do not have the KML file stored in a domain and if you have it you are not finding it with the url: archivo.kml , try to put the complete url: http://www.tudominio... etc/archivo.kml

I have put the code-snippet without that part and it does not give an error. And I put another Google with a correct url and it works: 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <title>El Alto</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: {lat: -16.503650029225387 , lng:-68.16271108415094}
    
  });


}

    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7wqaaeacGuJCt5slAmi6BfhpB9zv8k30&callback=initMap">
    </script>
  </body>
</html>

While the official example of Google, with a correct URL, works with that part: 
  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    map: map
  });


<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <title>KML Layers</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 41.876, lng: -87.624}
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    map: map
  });
}

    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7wqaaeacGuJCt5slAmi6BfhpB9zv8k30&callback=initMap">
    </script>
  </body>
</html>
    
answered by 19.03.2017 в 06:47
How can I update data from a multiple input select in mysql TypeError: unsupported operand type (s) for /: 'dict_values' and 'int'