Question

This is working fine right now. The infowindow is just too big and ugly. I want to implement infobox as it is more customizable. Can someone guide me on how i use infobox object to create the popup marker window?

var map,geocoder;
var bound = new google.maps.LatLngBounds();
function initializeMap() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(39.88445,-86.11084);
    var myOptions = {
    maxZoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
}
function codeAddress() {
    var infowindow = new google.maps.InfoWindow({}); 
    $('.eachLocation').each(function(index) {
        var counter=index+1;
        var addy = $(this).parent().find('span.LocAddHidden').text();
        geocoder.geocode( { 'address': addy}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map,               
                    title:addy,
                  });   
                //Adding a click event to the marker 
                google.maps.event.addListener(marker, 'click', function() { 
                    infowindow.setContent('<div id=\"infowindow\" style="width:235px; height:105px;>'
                                        +'Hello World'+'</div>'); 
                    infowindow.open(map, this); 
                 });
                bound.extend(marker.getPosition());
                map.fitBounds(bound);
            } 
        });//geocode END
        counter=counter+1;
    });
}

Answer 1

You have to read this example provided by Google :
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

You’ll find the basic source code here : view-source:http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/infobox-basic.html

You need to add this plugin to your page : http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js

Then, you could be able to run some infobox instead of infowindow, with something like that in your case :

function codeAddress() {
    var infoboxOptions = {
             content: ''
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(0, 0)
            ,zIndex: null
            ,boxStyle: { 
              background:''
              ,opacity: 0.75
             }
            ,closeBoxMargin: "2px 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(infoboxOptions); 
    $('.eachLocation').each(function(index) {
        var counter=index+1;
        var addy = $(this).parent().find('span.LocAddHidden').text();
        geocoder.geocode( { 'address': addy}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map,               
                    title:addy,
                    html:  'Your HTML/text...'
                  });   
                //Adding a click event to the marker 
                google.maps.event.addListener(marker, 'click', function() { 
                    ib.setContent(marker.html);
                    ib.open(map,this);  
                 });
                bound.extend(marker.getPosition());
                map.fitBounds(bound);
            } 
        });//geocode END
        counter=counter+1;
    });
}

In my case, to have a nice div with my own css, I use, in the marker :

html:$(this).html()

Which gets the content of each ‘.myClass’ (.eachLocation in your case)