Öffnen eines InfoWindow von einem anklickbaren Polygon Googlemaps

Bei der Untersuchung der Antwort habe ich die API-Dokumentation und Beispiel, viele ähnliche Abfragen auf Stackflow und einige Youtube Beispiele, aber keine sind genau das, was ich suche zu erstellen und ich kann nicht ergründen, wo ich falsch liege.Öffnen eines InfoWindow von einem anklickbaren Polygon Googlemaps

In diesem Fall möchten wir, dass das Infowindow angezeigt wird, indem Sie innerhalb des definierten Rahmens des Polygons klicken, nicht durch Auswählen eines Markers. Ich verstehe, Googlemaps können Sie dies tun, solange Sie Ihrem Infofenster eine LatLng-Position geben.

Was kann ich nicht verstehen, warum das Infofenster nicht öffnet ...

Bitte könnten Sie Code überprüfen und lassen Sie mich wissen, wenn Sie offensichtlich etwas erkennen kann mir fehlt. (Hoffe, dass es in den Code Notizen klar ist, aber ich bin auf der Suche viele verschiedene Polygone sind über die gleiche Karte erstellen)

<!DOCTYPE html> 
<html> 
<head> 
<title>TBC</title> 
<meta name="viewport" content="initial-scale=1.0"> 
<meta charset="utf-8"> 
<style> 
/* Always set the map height explicitly to define the size of the div 
* element that contains the map. */ 
    #map { 
    height: 100%; 
    } 
/* Optional: Makes the sample page fill the window. */ 
    html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 


#myDIV { 
width: 100%; 
padding: 50px 0; 
text-align: center; 
background-color: lightblue; 
margin-top:20px; 
} 


</style> 
</head> 
<body> 
<div id="map"style="width:800px;height:1200px;"></div> 

<script> 
    var map; 
    function initMap() {{ 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: 17.247253, lng: 79.1}, 
     zoom: 6, 
     mapTypeId: 'satellite' 
    }); 





//BEGINNING AREA CODE 1 
// Define the LatLng coordinates for the polygon. 
    var hyderabadCoords = [ 

{lat:17.3876090549752,lng:78.5106470783611}, 
{lat:17.4637690550461,lng:78.5161870783663}, 
{lat:17.4391290550232,lng:78.4386270782939}, 
{lat:17.3876090549752,lng:78.5106470783611}, 


     ]; 

// Construct the polygon.    
    var hyderabadBorder = new google.maps.Polygon({ 
     paths: hyderabadCoords, 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.8, 
     strokeWeight: 3, 
     fillColor: '#FF0000', 
     fillOpacity: 0.0 
    }); 
    hyderabadBorder.setMap(map); 

//Content of infobox 

var hyderLatLng = {lat: 17.39, lng: 78.50};  
var contentString = "TBC" 
var hyderinfowindow = new google.maps.InfoWindow({ 
     content: contentString, 
    position:hyderLatLng 
    }); 

// Add a listener for the click event. 
    hyderabadBorder.addListener('click', showArrays); 

hyderinfowindow = new google.maps.InfoWindow; 
} 
//END AREA CODE 1 
//BEGINNING AREA CODE 2...(Repeat 1 with new area details) 
//END ALL AREA CODES 


/** @this {google.maps.Polygon} */ 
function showArrays(event) { 
var vertices = this.getPath(); 
} 


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

Quelle

2016-12-06 ElaineE

Sie haben 2 Ausgaben:

Sie die InfoBox überschreiben, die die hat Inhalt in es mit einem, der leer ist:

hyderinfowindow = new google.maps.InfoWindow;

Sie sind neve r Aufruf hyderinfowindow.open(map);

function showArrays(event) { 
    hyderinfowindow.open(map); 
}

proof of concept fiddle

Code-Schnipsel:

var map; 
 

 
function initMap() { 
 
    { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
     center: { 
 
     lat: 17.247253, 
 
     lng: 79.1 
 
     }, 
 
     zoom: 9, 
 
     mapTypeId: 'satellite' 
 
    }); 
 

 
    // Construct the polygon.    
 
    var hyderabadBorder = new google.maps.Polygon({ 
 
     paths: hyderabadCoords, 
 
     strokeColor: '#FF0000', 
 
     strokeOpacity: 0.8, 
 
     strokeWeight: 3, 
 
     fillColor: '#FF0000', 
 
     fillOpacity: 0.0 
 
    }); 
 
    hyderabadBorder.setMap(map); 
 

 
    //Content of infobox 
 
    var hyderLatLng = { 
 
     lat: 17.39, 
 
     lng: 78.50 
 
    }; 
 
    var contentString = "TBC" 
 
    var hyderinfowindow = new google.maps.InfoWindow({ 
 
     content: contentString, 
 
     position: hyderLatLng 
 
    }); 
 

 
    // Add a listener for the click event. 
 
    hyderabadBorder.addListener('click', showArrays); 
 
    } 
 
    //END AREA CODE 1 
 
    //BEGINNING AREA CODE 2...(Repeat 1 with new area details) 
 
    //END ALL AREA CODES 
 

 
    /** @this {google.maps.Polygon} */ 
 
    function showArrays(event) { 
 
    hyderinfowindow.open(map); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap); 
 
//BEGINNING AREA CODE 1 
 
// Define the LatLng coordinates for the polygon. 
 
var hyderabadCoords = [ 
 

 
    { 
 
    lat: 17.3876090549752, 
 
    lng: 78.5106470783611 
 
    }, { 
 
    lat: 17.4637690550461, 
 
    lng: 78.5161870783663 
 
    }, { 
 
    lat: 17.4391290550232, 
 
    lng: 78.4386270782939 
 
    }, { 
 
    lat: 17.3876090549752, 
 
    lng: 78.5106470783611 
 
    }, 
 
];

/* Always set the map height explicitly to define the size of the div 
 
* element that contains the map. */ 
 

 
#map { 
 
    height: 100%; 
 
} 
 
/* Optional: Makes the sample page fill the window. */ 
 

 
html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#myDIV { 
 
    width: 100%; 
 
    padding: 50px 0; 
 
    text-align: center; 
 
    background-color: lightblue; 
 
    margin-top: 20px; 
 
}

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

Quelle

2016-12-06 07:31:15 geocodezip

Öffnen eines InfoWindow von einem anklickbaren Polygon Googlemaps

Antwort

Verwandte Themen