I’m having trouble with the bindInfoWindowHtml
feature from the API docs. It appears that it does not replace the standard infoWindow, even if a custom class is specified.
I’ve explored other alternatives like labeledmarker
, but they don’t allow for draggable markers, making them unsuitable for my project.
Below is a code snippet demonstrating the original info window implementation. Is there any method to replace the default window entirely?
<style type='text/css'>
.customInfoWindow {
width: 500px;
height: 500px;
background-color: #CAEE96;
color: #666;
}
</style>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Maps API Sample</title>
<script src='http://maps.google.com/maps?file=api&v=2&sensor=false&key=' type='text/javascript'></script>
<script type='text/javascript'>
function initialize() {
if (GBrowserIsCompatible()) {
var customIcon = new GIcon(G_DEFAULT_ICON);
customIcon.image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(33.968064,-83.377047), 13);
var markerPoint = new GLatLng(33.968064,-83.377047);
var customMarker = new GMarker(markerPoint);
var customDiv = document.getElementById('customInfoWindow');
customMarker.bindInfoWindowHtml(customDiv);
map.addOverlay(customMarker);
}
}
</script>
And here is the corresponding DIV code:
<div id='customInfoWindow' class='customInfoWindow'>
Name: <textarea id='nameInput' rows='2' cols='25'></textarea><br>
Comments: <textarea id='commentsInput' rows='4' cols='25'></textarea><br>
</div>