I have developed this plunker sample:
Click on "View Canada Map with Message" to see the infowindow.
I want the infowindow to be positioned near the top of the map boundary or in the middle of the upper part. Also, I want to style the infowindow to appear as error message with error indicator icon.
See sample code below:
<!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>
How to calculate the position (lat, lng) which will be close to the upper side, and how I can style the infowindow to look like an error message?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
