Ich verwende Google Place ID als eine Möglichkeit, Standorte und andere Inhalte in meiner Datenbank zu verknüpfen. Im Grunde habe ich eine Admin-Seite erstellt, die es mir ermöglicht, einfach neue Orte und Inhalte einzugeben.Google Maps Place ID Finder - Informationen können nicht auf InfoWindow hervorgehoben werden
Auf meiner Admin-Seite habe ich eine Karte mit dem Google Places-ID-Finder hinzugefügt, sodass ich nach einem Ort suchen und in der InfoWindow-Hervorhebung die Orts-ID-Informationen kopieren und dann diese Informationen einfügen kann. Aus irgendeinem Grund lässt das Infofenster das Highlight nicht zu.
Ich dachte, es sein könnte, weil der zusätzliche Code von meiner Admin-Seite aber when I viewed the demo on Google developer documentation the demo also does not allow highlighting. Wenn auf der Demo oder meine Admin-Seite, die ich auf einem anderen Ort auf der Karte klicken kann, a new InfoWindow pops up and that information is highlightable.
Kann jemand helfen, den Code von der Dokumentation mit auf der Google-Website (unten), um zu ermöglichen, dass das gesuchte Informationsfenster hervorgehoben werden kann?
<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;
}
.controls {
background-color: #fff;
border-radius: 2px;
border: 1px solid transparent;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
height: 29px;
margin-left: 17px;
margin-top: 10px;
outline: none;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
.controls:focus {
border-color: #4d90fe;
}
.title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span><br>
Place ID <span id="place-id"></span><br>
<span id="place-address"></span>
</div>
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
// Set the position of the marker using the place ID and location.
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location
});
marker.setVisible(true);
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-id'].textContent = place.place_id;
infowindowContent.children['place-address'].textContent =
place.formatted_address;
infowindow.open(map, marker);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>
</body>
</html>
Link zum Beispiel in der Dokumentation (die das Problem demonstriert): Place ID Finder - Google Maps Javascript API
Ich habe das Snippet ausgeführt und auch auf meiner Website versucht, aber der Inhalt ist immer noch nicht wählbar. Ich dachte, vielleicht fehlte im Code ein Semikolon **; ** aber das half auch nicht. Irgendwelche anderen Vorschläge? '# infowindow-content { user-select: text! Wichtig; } ' –
Ich benutze Safari .... Ich öffnete Google Chrome und es funktioniert wie beschrieben! –
Nur um hinzuzufügen, ich google 'user-select' und festgestellt, dass für Safari sie benötigen -webkit-user-select: text;' als 'user-select' funktioniert nicht mit ihrem bowser. Also mein Code liest und es funktioniert perfekt! Danke @geocodezip '# infowindow-content { user-select: text! Wichtig; -webkit-user-select: text! Wichtig; } ' –