Custom InfoWindow Using bindInfoWindowHtml in Google Maps API V2

Other Questions API
1

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&amp;v=2&amp;sensor=false&amp;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>
2

For using customized InfoWindows in Google Maps API V2 and completely replacing the default infoWindow, it seems like you need a more flexible approach as the bindInfoWindowHtml feature doesn't entirely override the default appearance. Unfortunately, given Google Maps API v2 is deprecated, I'd recommend transitioning to Google Maps JavaScript API v3, which has more flexible options.

Here's a method to handle custom InfoWindows in v3:

  1. Use the existing style you're applying to your custom InfoWindow.
  2. Instead of using bindInfoWindowHtml, create a custom overlay, a library like InfoBox, or use native google.maps.InfoWindow and customize your content within.

Here's an example using Google Maps API v3:


function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 33.968064, lng: -83.377047},
    zoom: 13
  });

  var marker = new google.maps.Marker({
    position: {lat: 33.968064, lng: -83.377047},
    map: map
  });

  var customContent = `<div class="customInfoWindow">
  Name: <textarea id='nameInput' rows='2' cols='25'></textarea><br>
  Comments: <textarea id='commentsInput' rows='4' cols='25'></textarea><br>
  </div>`;

  var infoWindow = new google.maps.InfoWindow({
    content: customContent
  });

  marker.addListener('click', function() {
    infoWindow.open(map, marker);
  });
}

Just ensure you have your API key set up and replace initMap as needed in your HTML to initialize the map. Using v3 features will provide better support and more possibilities for customization along with maintaining compatibility and security afterwards.