If we need to modify the normal info window that is provided by google..ie if we are looking for adding custom infowindow in google maps api We have to utilize the infobox to do so

The first example shows the custom info window

var marker = new google.maps.Marker({
         map: theMap,
         draggable: true,
         position: new google.maps.LatLng(49.47216, -123.76307),
         visible: true
        var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
        boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
        var myOptions = {
                 content: boxText
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(-140, 0)
                ,zIndex: null
                ,boxStyle: { 
                  background: "url('tipbox.gif') no-repeat"
                  ,opacity: 0.75
                  ,width: "280px"
                ,closeBoxMargin: "10px 2px 2px 2px"
                ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "floatPane"
                ,enableEventPropagation: false

        var ib = new InfoBox(myOptions);
        ib.open(theMap, marker);

and another one is to use the infobox to create label in maps

var labelText = "City Hall";

        var myOptions = {
                 content: labelText
                ,boxStyle: {
                   border: "1px solid black"
                  ,textAlign: "center"
                  ,fontSize: "8pt"
                  ,width: "50px"
                ,disableAutoPan: true
                ,pixelOffset: new google.maps.Size(-25, 0)
                ,position: new google.maps.LatLng(49.47216, -123.76307)
                ,closeBoxURL: ""
                ,isHidden: false
                ,pane: "mapPane"
                ,enableEventPropagation: true

        var ibLabel = new InfoBox(myOptions);

Hopping that this articles helps you to know adding custom infowindow in google maps API

Leave a Reply

Your email address will not be published.