Google maps API : V2 : Custom infowindow with bindInfoWindowHtml

Posted by PlanetUnknown on Stack Overflow See other posts from Stack Overflow or by PlanetUnknown
Published on 2010-03-29T22:15:24Z Indexed on 2010/03/29 22:23 UTC
Read the original article Hit count: 408

Filed under:
|

The API documentation gave me hopes last night with "bindInfoWindowHtml".
But it doesn't seem to replace the default infoWindow, even when you provide your own class etc.

I have tried using other ideas like the labeledmarker. But it doesn't support draggable markers. Hence can't use it in my application.

Here is the sample code which shows the info. window inside, the original bubble. Isn't there a way to override that window as well !

`

<style type="text/css">
    .infoWindowCustomClass
    {
        width: 500px;
        height: 500px;
        background-color: #CAEE96;
        color: #666;
    }
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</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 load() {
  if (GBrowserIsCompatible())
  {
        // Create our "tiny" marker icon
        var blueIcon = new GIcon(G_DEFAULT_ICON);
        blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";

        // Set up our GMarkerOptions object
        markerOptions = { icon:blueIcon };

        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(33.968064,-83.377047), 13);

        markerOptions.title = "fart";
        var point = new GLatLng(33.968064,-83.377047);
        var marker = new GMarker(point);
        var tempName = document.getElementById("infoWindowCustom");
        marker.bindInfoWindowHtml(tempName);
        map.addOverlay(marker);
    }
}

</script>`

And here is the DIV -

<DIV id="infoWindowCustom" name="infoWindowCustom" class="infoWindowCustomClass">
Name : <TEXTAREA NAME="nameID" ID="nameID" ROWS="2" COLS="25"></TEXTAREA>
Comments : <TEXTAREA NAME="commentsID" ID="commentsID" ROWS="4" COLS="25"></TEXTAREA>
</DIV>

© Stack Overflow or respective owner

Related posts about google

Related posts about google-maps-api