Comment contrôler le contenu d'une fenêtre d'informations Google Maps sur un KmlLayer?

Question

J'ai une couche KML sur une carte google qui contient un certain nombre de polygones. Lorsque vous cliquez sur chaque polygone, les données de la table des attributs sont affichées à l'aide d'une fenêtre d'informations google maps par défaut. Voici le code:

google.maps.event.addListener(kmlLayer, 'click', function(event) { 
var content = event.featureData.infoWindowHtml; 
var testimonial = document.getElementById('capture'); 
testimonial.innerHTML = content; 

Est-il possible de ne montrer que quelques-unes des données d'attribut et non chaque colonne dans la fenêtre d'information? Il montre actuellement toutes les données derrière le polygone. Voici une image de la fenêtre d'information ainsi, donc, par exemple, je voudrais montrer que le « Nom » « arrondissement » et « données KM2 » dans la fenêtre info:

Answer 1

Une option serait pour utiliser le suppressInfoWindows:true kmlOption, puis créez votre propre infowindow avec le contenu que vous voulez. Le KmlLayer click event contient le KmlFeatureData du fichier KML, que vous pouvez analyser pour personnaliser les informations affichées.

objet KmlFeatureData spécification

données pour une seule KML au format JSON, retourné lorsqu'une fonction KML est cliqué. Les données contenues dans cet objet reflètent celles associées à l'entité dans le balisage KML ou GeoRSS dans lequel elle est déclarée.

Propriétés

• auteur Type: KmlAuthor

<atom:author> de la fonction, extraite de la couche de marquage (si spécifié).

• Description Type: chaîne

<description> de la fonction, extraite de la couche de marquage.

• Type id: string

<id> de la fonction, extraite de la couche de marquage. Si aucun n'a été spécifié, un identifiant unique sera généré pour cette fonctionnalité.

• infoWindowHtml Type: chaîne

le texte de style ballon de la fonction, si elle est définie.

Type de nom
• : string

<name> de la fonction, extraite de la couche de marquage.

• Type d'extrait: string

<Snippet> de la fonction, extraite de la couche de marquage.

extrait de code:

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var kmllayer = new google.maps.KmlLayer({ 
 
    map: map, 
 
    url: "http://www.geocodezip.com/geoxml3_test/us_states.xml", 
 
    suppressInfoWindows: true 
 
    }); 
 
    var infowindow = new google.maps.InfoWindow(); 
 
    google.maps.event.addListener(kmllayer, 'click', function(evt) { 
 
    infowindow.setContent(evt.featureData.name); 
 
    infowindow.setPosition(evt.latLng); 
 
    infowindow.open(map); 
 
    }) 
 

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

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>