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.

Please post enough code that we can replicate the problem or a jsfiddle or link that exhibits the problem. — geocodezip, Jan 21 '13 at 15:20

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

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

I knew the markers weren't showing as i had a local image url for them but for the example i have used your code and put it back to the basic default for the example. My question though above is on changing the content for each marker/link on the list in the InfoBox... Thanks! — Shimsham84, Jan 22 '13 at 09:40
Thank you for your suggestion, i looked at this and understand how it works. I have also found out this method also works (see link): http://jsfiddle.net/charliebee/363ea/8/ — Shimsham84, Jan 23 '13 at 09:21

Googlemaps API V3: InfoBox Plugin and Sidebar Links

1 Answers1