Google Maps v3 Infobox Plugin

by Angelo Rogério Rubin

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<h2>Criando e usando um InfoBox</h2>
<hr/>
<div id="map" style="width: 100%; height: 300px"></div>

<hr/>
InfoBox como um substituto facilmente customizável para um InfoWindow. Clique no marcador para ver a caixa de informação gerada com html e css personalizado.

<div class="infobox-wrapper">
    <div id="infobox">
        O conteúdo da sua caixa é muito fácil de criar e personalizar.
    </div>
</div>

CSS

body {
    font-family: Verdana;
}

.infobox-wrapper {
    display:none;
}
#infobox {
    border:1px solid black;
    margin-top: 8px;
    background: salmon;
    color: white;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 1em;
    padding: .6em 1em;
    border: 1px solid black;
    box-shadow: 0 0 8px #000;
}

JavaScript

function initialize() {
    var loc, map, marker, infobox;
    
    loc = new google.maps.LatLng(-33.890542, 151.274856);
    
    map = new google.maps.Map(document.getElementById("map"), {
         zoom: 12,
         center: loc,
         mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    marker = new google.maps.Marker({
        map: map,
        position: loc,
        visible: true
    });

    infobox = new InfoBox({
         content: document.getElementById("infobox"),
         disableAutoPan: false,
         maxWidth: 150,
         pixelOffset: new google.maps.Size(-140, 0),
         zIndex: null,
         boxStyle: {
            background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
            opacity: 0.9,
            width: "250px"
        },
        closeBoxMargin: "12px 4px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1)
    });
    
    google.maps.event.addListener(marker, 'click', function() {
        infobox.open(map, this);
        map.panTo(loc);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);