Googlemaps API V3: InfoBox Plugin and Sidebar Links

Question

I have a working map which contains a google map canvas and 2 links at the side of the map that when clicked, it takes the user to the stored latlong location and an info window. my next step was to style the markers (which has been successful) and infoWindows.

To style the infoWindows i used the InfoBox plugin which has styled it however i am unsure of how to use this plugin for two different infoWindows. The style would stay the same however the content changes. At the moment the infoBox is working but when the user clicks ont he second link the content in the infoBox stays the same.

Working Link: http://jsfiddle.net/charliebee/363ea/3/

CODE

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>

var side_bar_html = ""; 
var gmarkers = []; 
var map = null;
var infobox;


function initialize() {
  var myOptions = {
    zoom: 12,
    styles: styles,
    center: new google.maps.LatLng(54.97962549875775,-1.5975022315979004),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP

  }
  map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  google.maps.event.addListener(map, 'click', function() {
});

  var point = new google.maps.LatLng(lat,long);
  var marker = createMarker(point,"City 1")

  var point = new google.maps.LatLng(lat,long);
  var marker = createMarker(point,"City 2")

  document.getElementById("marker_list").innerHTML = side_bar_html;
}

function myclick(i) {
  map.setCenter(gmarkers[i].getPosition());
  google.maps.event.trigger(gmarkers[i], "click");
}

function createMarker(latlng, name, html) {

    var contentString = html;
    var image = 'images/mapIcon.png';

    var marker = new google.maps.Marker({
        position:latlng,
        map: map,
        icon: image
        });

     infobox = new InfoBox({
         content: document.getElementById("infobox","infobox2"),
         disableAutoPan: true,
         maxWidth: 280,
         pixelOffset: new google.maps.Size(0, 0),
         zIndex: null,
         boxStyle: {
         backgroundURL:"images/bg.png",
         opacity: 0.89,
         width: "280px"
        },
        closeBoxMargin: "20px 20px 20px 20px",
        closeBoxURL: "images/close.png",
        infoBoxClearance: new google.maps.Size(1, 1),
    enableEventPropagation: false
    });
    google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
        map.panTo(loc);
        infobox.setContent(contentString); 
        infobox.open(map,marker);
        });

       gmarkers.push(marker);

    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

<div class="infobox-wrapper">
    <div id="infobox">
    Content 1
    </div>
    <div id="infobox2">
    Content 2
    </div>
</div

Is anyone able to give me advice to to achieve this? I've tried amending the content by using two infoBox options or marker names but havent been successful. This is all my code apart from the stylesheet.

Answer 1

The problem is with the icon:

http://jsfiddle.net/z9Apy/1/

If I change this:

var marker = new google.maps.Marker({
    position:latlng,
    map: map,
    icon: image
    });

To:

var marker = new google.maps.Marker({
    position:latlng,
    map: map 
    });

It shows markers.

UPDATE:

the problem with the content is this line:

content: document.getElementById("infobox","infobox2")

That can only return one element at a time. One option is to change your createMarker function to take the id of the element of the id to use.

function createMarker(latlng, name, elId) {
    var image = 'images/mapIcon.png';
    
    var marker = new google.maps.Marker({
        position:latlng,
        map: map /*,
        icon: image */
        });
           
        infobox = new InfoBox({
         content: document.getElementById(elId),
         disableAutoPan: true,
         maxWidth: 280,
         pixelOffset: new google.maps.Size(60, -150),
         zIndex: null,
         boxStyle: {
         opacity: 0.89,
         width: "280px"
        },
        closeBoxMargin: "20px",
        closeBoxURL: "images/cross.png",
        infoBoxClearance: new google.maps.Size(1, 1),
        enableEventPropagation: false
    });
        
    google.maps.event.addListener(marker, 'click', function() {
        infobox.open(map, this);
        map.panTo(latlng);
        infobox.setContent(document.getElementById(elId)); 
        });
    
    gmarkers.push(marker);
    
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

example