adding an InfoBox google map

Question

I'm trying to incorporate an info box to my google map: I have the following code

function initializeSwansea() {

  var latlng = new google.maps.LatLng(51.656591, -3.902619);

    var styles = [
                    {
                        featureType: 'landscape.natural',
                        elementType: 'all',
                        stylers: [
                            { hue: '#ffffff' },
                            { saturation: -100 },
                            { lightness: 100 },
                            { visibility: 'on' }
                        ]
                    },{
                        featureType: 'water',
                        elementType: 'geometry',
                        stylers: [
                            { hue: '#93ddf6' },
                            { saturation: 72 },
                            { lightness: 4 },
                            { visibility: 'simplified' }
                        ]
                    },{
                        featureType: 'landscape.man_made',
                        elementType: 'all',
                        stylers: [
                            { hue: '#ffffff' },
                            { saturation: -100 },
                            { lightness: 100 },
                            { visibility: 'simplified' }
                        ]
                    },{
                        featureType: 'road',
                        elementType: 'all',
                        stylers: [
                            { hue: '#999999' },
                            { saturation: -100 },
                            { lightness: -6 },
                            { visibility: 'simplified' }
                        ]
                    },{
                        featureType: 'poi',
                        elementType: 'labels',
                        stylers: [
                            { hue: '#a7a9ac' },
                            { saturation: -93 },
                            { lightness: -15 },
                            { visibility: 'simplified' }
                        ]
                    },{
                        featureType: 'poi',
                        elementType: 'geometry',
                        stylers: [
                            { hue: '#80c342' },
                            { saturation: 15 },
                            { lightness: -34 },
                            { visibility: 'on' }
                        ]
                    },{
                        featureType: 'administrative.country',
                        elementType: 'labels',
                        stylers: [
                            { hue: '#0054a6' },
                            { saturation: 100 },
                            { lightness: -36 },
                            { visibility: 'on' }
                        ]
                    },{
                        featureType: 'road.highway',
                        elementType: 'labels',
                        stylers: [
                            { hue: '#999999' },
                            { saturation: -100 },
                            { lightness: -6 },
                            { visibility: 'on' }
                        ]
                    }
                ];

    var mapOptions = {
        zoom: 15,
        center: latlng,
        mapTypeId: 'Styled',
        mapTypeControl: false,
        streetViewControl: false,
        zoomControl: true,
        scaleControl: true,
        mapTypeControlOptions: {
            mapTypeIds: [ 'Styled']
          }
    };

    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);

    var map = new google.maps.Map(document.getElementById("map-swansea"), mapOptions);


    var swansea = new google.maps.Marker({
        position: new google.maps.LatLng(51.651532, -3.913906),
        map: map,
        title: "Swansea"
    });


    var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);

    $(window).resize( function() { map.setCenter(latlng) });
}

$(function() {
    initializeSwansea();
});

I basically want a label with content, address details etc to appear when the map loads. I have read this link but still unsure as how to incorporate this into my code? Can anyone help?

Answer 1

The code is OK. You basically just need to show the infobox :

google.maps.event.addListener(swansea, 'click', function() {
   ib.open(map, swansea);
});

see your code in this fiddle -> http://jsfiddle.net/esCeX/ (with some other minor changes)