Clever Geek Handbook

Googlemaps API V3: InfoBox plugins and sidebars

I have a working map that contains a google map canvas and 2 links on the side of the map that, when clicked on it, takes the user to the saved location in the lightlon and info window. my next step was to style the markers (which were successful) and infoWindows.

In infoWindows style, I used the InfoBox plugin that styled it, but I'm not sure how to use this plugin for two different info windows. The style would remain the same, but the content has changed. Currently the infobox is working, but when the user clicks on the second link, the content in the infoBox remains 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

Can anyone give me advice to achieve this? I tried to change the content using two infoBox parameters or marker names but havent been successful. This is my non stylesheet code.

+3


source to share


1 answer


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

He shows markers.



UPDATE:

the problem with the content is the line:

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

This can only return one item at a time. One option is to modify the createMarker function to use the id of the element.

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

0


source






More articles:


All Articles