I am currently developing a custom map, but have one issue. I have several

Question

0

Asked: June 7, 20262026-06-07T11:56:46+00:00 2026-06-07T11:56:46+00:00

I am currently developing a custom map, but have one issue. I have several

0

I am currently developing a custom map, but have one issue. I have several InfoWindows, but only one of them is displaying for each marker. How do I get each marker to display it’s own InfoWindow? The InfoWindow that is displaying is the last one listed in the code (Copley Place Shopping). Also, not sure if this is important, but whichever InfoWindow is listed last in the code is the one that displays for each marker.

Link to my map: http://www.searchtransparency.net/custom-google-map-v3/local-attractions-test.html

Link to my working map: http://www.searchtransparency.net/custom-google-map-v3/local-attractions-test-working.html

Thank you for your time!

Complete Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Custom Google Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(42.3435295,-71.0871923);
        var settings = {
            zoom: 15,
            center: latlng,
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
            mapTypeId: google.maps.MapTypeId.ROADMAP};
        var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

<!--START Westland Avenue Garage-->     
        var contentStringwesavegar = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">WESTLAND AVENUE GARAGE</h1>'+
            '<div id="bodyContent">'+
            '<p>Westland Avenue Garage is the cleanest, safest, and most convenient place to park in Back Bay Boston.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringwesavegar
        });

        var wesavegarImage = new google.maps.MarkerImage('images/map-icons/parking.png',
            new google.maps.Size(50,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var wesavegarShadow = new google.maps.MarkerImage('images/map-icons/parking-shadow.png',
            new google.maps.Size(50,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var wesavegarPos = new google.maps.LatLng(42.3435295,-71.0871923);

        var wesavegarMarker = new google.maps.Marker({
            position: wesavegarPos,
            map: map,
            icon: wesavegarImage,
            shadow: wesavegarShadow,
            title:"Westland Avenue Parking Garage",
            zIndex: 3});
<!--STOP Westland Avenue Garage-->

<!--START Fenway Park-->        
        var contentStringfenpar = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">Fenway Park</h1>'+
            '<div id="bodyContent">'+
            '<p>Fenway Park is where you go to see any major league baseball game. Also, home of the Boston Red Sox team.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringfenpar
        });

        var fenparImage = new google.maps.MarkerImage('images/map-icons/fenway-park.png',
            new google.maps.Size(122,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var fenparShadow = new google.maps.MarkerImage('images/map-icons/fenway-park-shadow.png',
            new google.maps.Size(122,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var fenparPos = new google.maps.LatLng(42.3462509,-71.0981704);

        var fenparMarker = new google.maps.Marker({
            position: fenparPos,
            map: map,
            icon: fenparImage,
            shadow: fenparShadow,
            title:"Fenway Park",
            zIndex: 3});
<!--STOP Fenway Park-->

<!--START Northeastern University-->        
        var contentStringnoruni = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
            '<div id="bodyContent">'+
            '<p>DESCRIPTION HERE.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringnoruni
        });

        var noruniImage = new google.maps.MarkerImage('images/map-icons/northeastern-university.png',
            new google.maps.Size(200,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var noruniShadow = new google.maps.MarkerImage('images/map-icons/northeastern-university-shadow.png',
            new google.maps.Size(200,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var noruniPos = new google.maps.LatLng(42.3385917,-71.0909155);

        var noruniMarker = new google.maps.Marker({
            position: noruniPos,
            map: map,
            icon: noruniImage,
            shadow: noruniShadow,
            title:"Northeastern University",
            zIndex: 3});
<!--STOP Northeastern University-->

<!--START Berklee College of Music-->       
        var contentStringbercol = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
            '<div id="bodyContent">'+
            '<p>DESCRIPTION HERE.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringbercol
        });

        var bercolImage = new google.maps.MarkerImage('images/map-icons/berklee-college-of-music.png',
            new google.maps.Size(202,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var bercolShadow = new google.maps.MarkerImage('images/map-icons/berklee-college-of-music-shadow.png',
            new google.maps.Size(202,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var bercolPos = new google.maps.LatLng(42.3475459,-71.0870190);

        var bercolMarker = new google.maps.Marker({
            position: bercolPos,
            map: map,
            icon: bercolImage,
            shadow: bercolShadow,
            title:"Berklee College of Music",
            zIndex: 3});
<!--STOP Berklee College of Music-->

<!--START Wentworth Institute of Technology-->      
        var contentStringwentec = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
            '<div id="bodyContent">'+
            '<p>DESCRIPTION HERE.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringwentec
        });

        var wentecImage = new google.maps.MarkerImage('images/map-icons/wentworth-institute-of-technology.png',
            new google.maps.Size(272,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var wentecShadow = new google.maps.MarkerImage('images/map-icons/wentworth-institute-of-technology-shadow.png',
            new google.maps.Size(272,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var wentecPos = new google.maps.LatLng(42.3370475,-71.0970402);

        var wentecMarker = new google.maps.Marker({
            position: wentecPos,
            map: map,
            icon: wentecImage,
            shadow: wentecShadow,
            title:"Wentworth Institute of Technology",
            zIndex: 3});
<!--STOP Wentworth Institute of Technology-->

<!--START Symphony Hall-->      
        var contentStringsymhal = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
            '<div id="bodyContent">'+
            '<p>DESCRIPTION HERE.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringsymhal
        });

        var symhalImage = new google.maps.MarkerImage('images/map-icons/symphony-hall.png',
            new google.maps.Size(136,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var symhalShadow = new google.maps.MarkerImage('images/map-icons/symphony-hall-shadow.png',
            new google.maps.Size(136,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var symhalPos = new google.maps.LatLng(42.3430809,-71.0853963);

        var symhalMarker = new google.maps.Marker({
            position: symhalPos,
            map: map,
            icon: symhalImage,
            shadow: symhalShadow,
            title:"Symphony Hall",
            zIndex: 3});
<!--STOP Symphony Hall-->

<!--START Newbury Street Shopping-->        
        var contentStringnewstr = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
            '<div id="bodyContent">'+
            '<p>DESCRIPTION HERE.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringnewstr
        });

        var newstrImage = new google.maps.MarkerImage('images/map-icons/newbury-street-shopping.png',
            new google.maps.Size(204,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var newstrShadow = new google.maps.MarkerImage('images/map-icons/newbury-street-shopping-shadow.png',
            new google.maps.Size(204,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var newstrPos = new google.maps.LatLng(42.3483867,-71.0884548);

        var newstrMarker = new google.maps.Marker({
            position: newstrPos,
            map: map,
            icon: newstrImage,
            shadow: newstrShadow,
            title:"Newbury Street Shopping",
            zIndex: 3});
<!--STOP Newbury Street Shopping-->

<!--START House of Blues-->     
        var contentStringhoublu = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
            '<div id="bodyContent">'+
            '<p>DESCRIPTION HERE.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringhoublu
        });

        var houbluImage = new google.maps.MarkerImage('images/map-icons/house-of-blues.png',
            new google.maps.Size(134,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var houbluShadow = new google.maps.MarkerImage('images/map-icons/house-of-blues-shadow.png',
            new google.maps.Size(134,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var houbluPos = new google.maps.LatLng(42.3471727,-71.0957007);

        var houbluMarker = new google.maps.Marker({
            position: houbluPos,
            map: map,
            icon: houbluImage,
            shadow: houbluShadow,
            title:"House of Blues",
            zIndex: 3});
<!--STOP House of Blues-->

<!--START Prudential Center Shopping-->     
        var contentStringprucen = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">TITLE HERE</h1>'+
            '<div id="bodyContent">'+
            '<p>DESCRIPTION HERE.</p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringprucen
        });

        var prucenImage = new google.maps.MarkerImage('images/map-icons/prudential-center-shopping.png',
            new google.maps.Size(220,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var prucenShadow = new google.maps.MarkerImage('images/map-icons/prudential-center-shopping-shadow.png',
            new google.maps.Size(220,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var prucenPos = new google.maps.LatLng(42.3486763,-71.0826469);

        var prucenMarker = new google.maps.Marker({
            position: prucenPos,
            map: map,
            icon: prucenImage,
            shadow: prucenShadow,
            title:"Prudential Center Shopping",
            zIndex: 3});
<!--STOP Prudential Center Shopping-->

<!--START Copley Place Shopping-->      
        var contentStringcoppla = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading">Copley Place Shopping <a href="http://www.facebook.com/ShopCopleyPlace">Get Directions</a></h1>'+
            '<div id="bodyContent">'+
            '<p>Copley Place is Boston&#39;s most distinctive shopping destination with 75 fabulous stores including:<br/><ul><li>Neiman Marcus</li><li>Barneys New York</li><li>Tiffany & Co.</li><li>Jimmy Choo</li><li>Intimacy</li><li>Tourneau</li><li>Salvatore Ferragamo</li><li>Porsche Design</li><li>David Yurman</li><li>A|X Armani Exchange</li><li>Louis Vuitton</li><li>Emporio Armani</li><li>Elie Tahari</li><li>Christian Dior</li><li>Burberry</li><li>BCBGMAXAZRIA</li></ul><br/><a href="http://www.facebook.com/ShopCopleyPlace">Get Directions</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://www.facebook.com/ShopCopleyPlace">More information</a></p>'+
            '</div>'+
            '</div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentStringcoppla
        });

        var copplaImage = new google.maps.MarkerImage('images/map-icons/copley-place-shopping.png',
            new google.maps.Size(186,50),
            new google.maps.Point(0,0),
            new google.maps.Point(50,50)
        );

        var copplaShadow = new google.maps.MarkerImage('images/map-icons/copley-place-shopping-shadow.png',
            new google.maps.Size(186,50),
            new google.maps.Point(0,0),
            new google.maps.Point(65, 50));

        var copplaPos = new google.maps.LatLng(42.3473509,-71.0783045);

        var copplaMarker = new google.maps.Marker({
            position: copplaPos,
            map: map,
            icon: copplaImage,
            shadow: copplaShadow,
            title:"Copley Place Shopping",
            zIndex: 3});
<!--STOP Copley Place Shopping-->

        google.maps.event.addListener(wesavegarMarker, 'click', function() {
            infowindow.open(map,wesavegarMarker);
        });
        google.maps.event.addListener(fenparMarker, 'click', function() {
            infowindow.open(map,fenparMarker);
        });
        google.maps.event.addListener(noruniMarker, 'click', function() {
            infowindow.open(map,noruniMarker);
        });
        google.maps.event.addListener(bercolMarker, 'click', function() {
            infowindow.open(map,bercolMarker);
        });
        google.maps.event.addListener(wentecMarker, 'click', function() {
            infowindow.open(map,wentecMarker);
        });
        google.maps.event.addListener(symhalMarker, 'click', function() {
            infowindow.open(map,symhalMarker);
        });
        google.maps.event.addListener(newstrMarker, 'click', function() {
            infowindow.open(map,newstrMarker);
        });
        google.maps.event.addListener(houbluMarker, 'click', function() {
            infowindow.open(map,houbluMarker);
        });
        google.maps.event.addListener(prucenMarker, 'click', function() {
            infowindow.open(map,prucenMarker);
        });
        google.maps.event.addListener(copplaMarker, 'click', function() {
            infowindow.open(map,copplaMarker);
        });

    }
</script>
</head>
<body onLoad="initialize()">

<div style="width:960px; margin-left:auto; margin-right:auto; clear:both;">

    <h1 style="width:500px; float:left;">Google Custom Map</h1>

    <select style="float:right; margin-top:37px; margin-bottom:20px; color:#09F; font-size:18px; margin-left:20px;" name="categories">
        <option>Select Location</option>
        <option>Berklee College of Music</option>
        <option>Copley Place Shopping</option>
        <option>Fenway Park</option>
        <option>House of Blues</option>
        <option>Newbury Street Shopping</option>
        <option>Northeastern University</option>
        <option>Prudential Center Shopping</option>
        <option>Symphony Hall</option>
        <option>Wentworth Institute of Technology</option>
        <option>Westland Avenue Parking Garage</option>
    </select>

    <div id="map_canvas" style="width:960px; height:500px; margin-bottom:40px; float:left;"></div>

</div>

</div>

</body>
</html>

<select onChange="triggerClick" style="float:right; margin-top:37px; color:#09F; font-size:18px; margin-left:20px;" name="categories">
    <option>Select Location</option>
    <option value='bercolMarker'>Berklee College of Music</option>
    <option value='chuapaMarker'>Church Park Apartments</option>
    <option>Copley Place Shopping</option>
    <option>Fenway Park</option>
    <option>House of Blues</option>
    <option>Huntington Theatre</option>
    <option>Museum of Fine Arts</option>
    <option>Newbury Street Shopping</option>
    <option>New England Conservatory</option>
    <option>Northeastern University</option>
    <option>Prudential Center Shopping</option>
    <option>Symphony Hall</option>
    <option>Wentworth Institute of Technology</option>
    <option>Westland Avenue Parking Garage</option>
</select>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-07T11:56:49+00:00

I’ll give an outline of what you could add to your page:

First, you probably want only one InfoWindow open at a time; if you really want multiple infowindows open at the same time then each infowindow needs its own variable name. Notice that they are all named infowindow right now.

What you must do for the single infowindow setup, is to set its content to change when a specific marker is clicked. For example:

google.maps.event.addListener(wesavegarMarker, 'click', function() {
  infowindow.setContent(contentStringwesavegar);
  infowindow.open(map,wesavegarMarker);
});

and repeat for the other markers.

As for the dropdown making the infowindows open, I learned from this page that you can trigger an “artificial” mouse click on a specific marker.

See the Demo

Assign an id to the <select> (I use “selectLocation”) and values to each option:

<select id="selectLocation">
  <option>Select Location</option>
  <option value='bercolChoice'>Berklee College of Music</option>
  <option value='wentecChoice'>wentworth</option>
</select>

The string values assigned to the option values need to be matched with the marker variables, an object works well for this (seen here):

  var selectChoices = {
    bercolChoice: bercolMarker,
    wentecChoice: wentecMarker
  };

Finally the listener:

  google.maps.event.addDomListener(
    document.getElementById("selectLocation"), 'change',
    function() {
      google.maps.event.trigger(selectChoices[this.value], "click");
    });

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I am currently developing a custom map, but have one issue. I have several

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply