Home  ›  Draw Circle on Map Kml

Draw Circle on Map Kml

Written By Sunday, 10 April 2022 Add Comment Edit

Overview

This tutorial shows you lot how to display data 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 below to see information in the sidebar.

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

Attempt it yourself

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

<!DOCTYPE html> <html>   <caput>     <meta name="viewport" content="initial-scale=i.0, user-scalable=no">     <meta charset="utf-eight">     <title>KML Click Capture Sample</title>     <fashion>       html, trunk {         height: 370px;         padding: 0;         margin: 0;         }       #map {        tiptop: 360px;        width: 300px;        overflow: subconscious;        bladder: left;        edge: sparse solid #333;        }       #capture {        peak: 360px;        width: 480px;        overflow: hidden;        float: left;        background-color: #ECECFB;        border: sparse solid #333;        edge-left: none;        }     </mode>   </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';        function initMap() {         map = new google.maps.Map(document.getElementById('map'), {           center: new google.maps.LatLng(-19.257753, 146.823688),           zoom: ii,           mapTypeId: 'terrain'         });          var kmlLayer = new google.maps.KmlLayer(src, {           suppressInfoWindows: true,           preserveViewport: false,           map: map         });         kmlLayer.addListener('click', role(event) {           var content = effect.featureData.infoWindowHtml;           var testimonial = document.getElementById('capture');           testimonial.innerHTML = content;         });       }     </script>     <script async     src="https://maps.googleapis.com/maps/api/js?central=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 upward the KML file
  2. Displaying the KMLlayer
  3. Displaying data in the sidebar

Setting up the KML file for import

Your KML file should conform to the KML standard. For details well-nigh this standard, refer the Open up Geospatial Consortium website. Google'south KML documentation also describes the language, and offers both a reference and conceptual developer documentation.

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

  • Use 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. Yous can utilize Google's filetype search operator.

    Substitute any search term for velodromes, or omit the term birthday to detect all KML files.

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

  • You have 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 can observe and call back the content to display it on the map.
  • The file is non on a password-protected folio.
  • Your features have info window content. You can comprise this content in a description element, or include it using an ExtendedData element and entity replacement (read below for more info). Both are attainable as the characteristic's infoWindowHtml holding.

ExtendedData elements

The KML file in this tutorial includes feature information in an ExtendedData element. In order to bring this information into the feature's description, utilise entity replacement, which is essentially a variable in the BalloonStyle tag.

The table below explains the code for this section.

Lawmaking and description 
<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> </Fashion>

The KML file has a single Style 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 look for a Data chemical element named video, and to use it equally the airship text.		 
<Placemark>     <name>Google Westward Campus 1</proper name>     <styleUrl>#west_campus_style</styleUrl>     <ExtendedData>       <Data proper noun="video">         <value><![CDATA[<iframe width="640" height="360"           src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"           allowfullscreen></iframe><br><br>]]></value>       </Information>     </ExtendedData>     <Point>       <coordinates>-122.0914977709329,37.42390182131783,0</coordinates>     </Point> </Placemark>

Each Placemark contains an ExtendedData element, which holds the Data chemical element. Notice that each Placemark has a single Data element with a name aspect of video.
The file for this tutorial uses the embedded YouTube video every bit the value of each Placemark'southward balloon text.

Yous tin acquire more most entity replacement in the Calculation Custom Information chapter of the KML documentation.

Displaying the KMLLayer

Initializing the map

This tabular array explains the lawmaking for this department.

Code and description 
office initMap() {   map = new google.maps.Map(document.getElementById('map'), {     centre: new google.maps.LatLng(-19.257753, 146.823688),     zoom: 2,     mapTypeId: 'terrain'   }); }

To display KML on a map, you demand to first create the map.
This lawmaking creates a new Google Map object, tells information technology where to centre and zoom, and attaches the map to the div.
To learn more about the basics of creating a Google Map, read the Adding a Google Map to your website tutorial.

Creating the KMLLayer

This table explains the code that creates a KMLLayer.

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

Creates a new KMLLayer object to brandish 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: false,   map: map });

The KMLLayer constructor sets the URL of your KML file. It besides defines properties for the KMLLayer object that do the post-obit:
  • Tells the layer non to display an info window when clicked.
  • Tells the map to middle and zoom to the bounding box of the layer'south 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 display the KML file content equally a layer on acme of the base map. However, clicking any feature won't upshot in any action yet.

This department explains the settings that displays info window content in the sidebar when you click a feature on the map. This is done past:

  • Listening for a click result on whatever of the KMLLayer's features.
  • Grabbing the clicked characteristic's information.
  • Writing that information to the sidebar.

Adding an event listener

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

The table below explains the code for this section.

Code and clarification 
kmlLayer.addListener('click', part(event) {});

The kmlLayer.addListener issue listener focuses on the post-obit:
  • The type of event to listen for. In this tutorial, it is the click upshot.
  • A function to phone call when the outcome occurs.
You lot can larn more than about events in the Developer's Guide.

Past this stage of the tutorial, you take captured click events on the layer's features. You lot can at present gear up the application to write the feature's data and info window content to the sidebar.

The table below explains the lawmaking for this section.

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

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

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

These lines of lawmaking go the part within the addListener constructor.

Now each fourth dimension you click a KML feature on the map, the sidebar updates to display its info window content.

More information

Read more than about using KML files.

bassneart1989.blogspot.com

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

0 Response to "Draw Circle on Map Kml"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel