-1
zu positionieren habe ich diese plunker sample entwickelt.Wie Google Maps Infowindow-Box in der Nähe der oberen und Stil als Fehler
Ich möchte das Infowindow in der Nähe der oberen Grenze der Karte oder in der Mitte des oberen Teils positioniert werden. Außerdem möchte ich das Infofenster so gestalten, dass es als Fehlermeldung mit Fehlerindikator erscheint.
Siehe folgende Beispielcode:
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</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;
}
</style>
</head>
<body >
<input type="button" value="Init Map" onclick="initMap()">
<input type="button" value="View Canada Map with Message" onclick="viewCanadaWithMessage()">
<div id="map"></div>
<script>
var mapDiv = document.getElementById('map');
var map;
var infoWindow;
var geocoder ;
var map;
var palce;
function initMap() {
map = new google.maps.Map(mapDiv, {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
infoWindow = new google.maps.InfoWindow;
infoWindow.setPosition(map.getCenter());
infoWindow.setContent('This is the center of the map');
infoWindow.open(map);
geocoder = new google.maps.Geocoder();
}
//setTimeout(function(){initMap()}, 100);
function doLoad() {
}
function viewCanadaWithMessage() {
//geocoder.geocode({address:'Canberra, Australia'}, function(result, status){
geocoder.geocode({address:'Canada'}, function(result, status){
if (status == "OK") {
map.setCenter(result[0].geometry.location);
map.setZoom(3);
var infoWindow = new google.maps.InfoWindow;
infoWindow.setContent('<strong>How I can locate this info window to be near the top, approx in the middle between the top point and the middle point? I want this window to display <span style="color:red">error message</span> with error indicator icon.</strong>');
infoWindow.setPosition(map.getCenter());
infoWindow.open(map);
}
});
}
//google.maps.event.addDomListener(window, 'load', initMap);
document.onreadystatechange = function() {
if (document.readyState === 'complete') {
initMap();
google.maps.event.addDomListener(mapDiv, 'click', function() {
alert('clicked');
})
}
};
</script>
<script language="JavaScript" >
<!--
document.writeln("<script async defer src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyAh7w3_pTxbOFG3tT2P8ZDTwxDnp5A2GNw&callback=doLoad\"></script>");
//-->
</script>
</body>
</html>
Wie die Position berechnen (lat, lng), die an der oberen Seite in der Nähe sein, und wie ich das Infofenster wie eine Fehlermeldung sehen Stil kann?