Skip to content Skip to sidebar Skip to footer
Home / Cannot Upload .kml to Custom Google Maps on Mac

Cannot Upload .kml to Custom Google Maps on Mac

Post a Comment

Overview

This tutorial shows you how to display information of a KML file in a Google map and sidebar. For more than information on using KML files in maps, read the guide to KML Layers. Attempt clicking a marker on the map beneath to see data in the sidebar.

The section below displays the unabridged lawmaking you lot need to create the map and sidebar.

Try it yourself

You can experiment with this code in JSFiddle by clicking the <> icon in the tiptop-correct corner of the code window.

<!DOCTYPE html> <html>   <caput>     <meta name="viewport" content="initial-scale=ane.0, user-scalable=no">     <meta charset="utf-8">     <title>KML Click Capture Sample</championship>     <fashion>       html, trunk {         height: 370px;         padding: 0;         margin: 0;         }       #map {        height: 360px;        width: 300px;        overflow: hidden;        float: left;        border: thin solid #333;        }       #capture {        peak: 360px;        width: 480px;        overflow: subconscious;        float: left;        background-color: #ECECFB;        border: sparse solid #333;        border-left: none;        }     </way>   </head>   <body>     <div id="map"></div>     <div id="capture"></div>     <script>       var map;       var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';        part initMap() {         map = new google.maps.Map(certificate.getElementById('map'), {           centre: new google.maps.LatLng(-nineteen.257753, 146.823688),           zoom: 2,           mapTypeId: 'terrain'         });          var kmlLayer = new google.maps.KmlLayer(src, {           suppressInfoWindows: true,           preserveViewport: imitation,           map: map         });         kmlLayer.addListener('click', function(event) {           var content = outcome.featureData.infoWindowHtml;           var testimonial = certificate.getElementById('capture');           testimonial.innerHTML = content;         });       }     </script>     <script async     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">     </script>   </body> </html>

Getting Started

These are the stages to creating the map and sidebar for this tutorial:

  1. Setting up the KML file
  2. Displaying the KMLlayer
  3. Displaying data in the sidebar

Setting up the KML file for import

Your KML file should accommodate to the KML standard. For details about this standard, refer the Open Geospatial Consortium website. Google's KML documentation also describes the linguistic communication, and offers both a reference and conceptual developer documentation.

If you're just learning and don't have a KML file, you tin:

  • Utilise the following KML file for this tutorial:

                  https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • Find a KML file on the web. You tin use Google's filetype search operator.

    Substitute whatever search term for velodromes, or omit the term birthday to find all KML files.

If you're creating your own file, the code in this case assumes that:

  • You accept publicly hosted the file on the internet. This is a requirement for all applications that load KML into a KMLLayer, so that Google's servers tin can find and think the content to display information technology on the map.
  • The file is not on a countersign-protected page.
  • Your features accept info window content. You lot can contain this content in a clarification element, or include it using an ExtendedData element and entity replacement (read below for more info). Both are accessible equally the feature's infoWindowHtml holding.

ExtendedData elements

The KML file in this tutorial includes characteristic information in an ExtendedData element. In order to bring this data into the characteristic's clarification, apply entity replacement, which is substantially a variable in the BalloonStyle tag.

The table beneath explains the code for this department.

Code and clarification 
<Style id="west_campus_style">   <IconStyle>     <Icon>       <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png       </href>     </Icon>   </IconStyle>   <BalloonStyle>     <text>$[video]</text>   </BalloonStyle> </Style>

The KML file has a single Fashion chemical element that is applied to all the placemarks.
This Style element assigns a value of #[video] to the BalloonStyle's text element.
The $[x] format tells the KML parser to await for a Information element named video, and to utilize it every bit the balloon text.		 
<Placemark>     <name>Google Westward Campus i</name>     <styleUrl>#west_campus_style</styleUrl>     <ExtendedData>       <Information name="video">         <value><![CDATA[<iframe width="640" superlative="360"           src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"           allowfullscreen></iframe><br><br>]]></value>       </Data>     </ExtendedData>     <Point>       <coordinates>-122.0914977709329,37.42390182131783,0</coordinates>     </Indicate> </Placemark>

Each Placemark contains an ExtendedData chemical element, which holds the Data chemical element. Notice that each Placemark has a single Data element with a name attribute of video.
The file for this tutorial uses the embedded YouTube video equally the value of each Placemark's airship text.

You can learn more than most entity replacement in the Calculation Custom Data chapter of the KML documentation.

Displaying the KMLLayer

Initializing the map

This tabular array explains the lawmaking for this section.

Lawmaking and description 
role initMap() {   map = new google.maps.Map(document.getElementById('map'), {     center: new google.maps.LatLng(-nineteen.257753, 146.823688),     zoom: 2,     mapTypeId: 'terrain'   }); }

To display KML on a map, y'all need to commencement create the map.
This code creates a new Google Map object, tells it where to center and zoom, and attaches the map to the div.
To larn more about the nuts of creating a Google Map, read the Adding a Google Map to your website tutorial.

Creating the KMLLayer

This tabular array explains the lawmaking that creates a KMLLayer.

Code and clarification 
var kmlLayer = new google.maps.KmlLayer();

Creates a new KMLLayer object to display your KML.		 
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml'; var kmlLayer = new google.maps.KmlLayer(src, {   suppressInfoWindows: true,   preserveViewport: imitation,   map: map });

The KMLLayer constructor sets the URL of your KML file. It also defines properties for the KMLLayer object that do the post-obit:
  • Tells the layer non to brandish an info window when clicked.
  • Tells the map to center and zoom to the bounding box of the layer'southward contents.
  • Sets the map to the Map object created earlier.
The Maps JavaScript API reference guide lists all available options for this layer.

Load your HTML file to brandish the KML file content every bit a layer on top of the base map. However, clicking any characteristic won't result in any action notwithstanding.

This section explains the settings that displays info window content in the sidebar when you click a characteristic on the map. This is done by:

  • Listening for a click event on any of the KMLLayer'due south features.
  • Grabbing the clicked feature's data.
  • Writing that data to the sidebar.

Adding an event listener

Google Maps provides a function to listen and respond to user events on the map, such equally clicks or keyboard keypresses. It adds a listener for such click events.

The table below explains the lawmaking for this section.

Code and description 
kmlLayer.addListener('click', office(event) {});

The kmlLayer.addListener consequence listener focuses on the following:
  • The type of event to listen for. In this tutorial, it is the click event.
  • A function to call when the event occurs.
Y'all can acquire more about events in the Developer'south Guide.

By this stage of the tutorial, you have captured click events on the layer'due south features. You can now set the awarding to write the characteristic's data and info window content to the sidebar.

The table beneath explains the code for this section.

Code and description 
var content = upshot.featureData.infoWindowHtml;

Writes the info window content to a variable. 
var testimonial = certificate.getElementById('capture'); testimonial.innerHTML = content;

Identifies the div to write to, and replaces the HTML in it with the feature'southward content. 
kmlLayer.addListener('click', function(event) {   var content = issue.featureData.infoWindowHtml;   var testimonial = document.getElementById('capture');   testimonial.innerHTML = content; });

These lines of code go the function within the addListener constructor.

Now each time you click a KML feature on the map, the sidebar updates to brandish its info window content.

More data

Read more nigh using KML files.

teneyckneas1941.blogspot.com

Source: https://developers.google.com/maps/documentation/javascript/kml

Post a Comment for "Cannot Upload .kml to Custom Google Maps on Mac"