Home/ Questions/Q 8748515
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T12:32:15+00:00

how would I go about adding additional markers to this set up? There are

  • 0

how would I go about adding additional markers to this set up? There are currently three and I’ve been messing around with it, but I’m not sure how to continue adding markers to it

I’ve been trying things on this JS Bin as well http://jsbin.com/agemuw/2/edit but haven’t got it working

JS:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var locations = [
[
"850 Boylston Street",
"Chestnut Hill, MA 02467",
"42.326435",
"-71.149499"
],
[
"Subway Brookline Village",
"Green Line, D",
"42.33279",
"-71.11630"
],
[
"Shuttle Brookline Village",
"10 Brookline Place",
"42.33262",
"-71.116439"
]
];

gmarkers = [];

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(42.326435, -71.149499),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();


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

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(html);
    infowindow.open(map, marker);
});
return marker;
}

for (var i = 0; i < locations.length; i++) {
/*    alert("location:"+
      locations[i][0]+":"+locations[i][2]+","+locations[i][3]);
*/
gmarkers[locations[i][0]]=
createMarker(new google.maps.LatLng(locations[i][2], locations[i][3]), locations[i][0]    
+ "<br>" + locations[i][1]);
}

/*                                                    
$(function() {
$('#locations h3 a').each(function() { 
    $(this).on('click', function() { 
        google.maps.event.trigger(marker, 'click');    
    })    
  });    
});

*/
});//]]>

html:

<body>      
    <div id="map" style="width: 500px; height: 400px;"></div>

    <div id="locations">
        <h3><a href="javascript:google.maps.event.trigger(gmarkers['850 Boylston  
Street'],'click');">850 Boylston Street</a></h3>
        <p>Arbitrary content about 1</p>

        <h3><a href="javascript:google.maps.event.trigger(gmarkers['Subway Brookline 
Village'],'click');">Brookline Village T Stop</a></h3>
        <p>Arbitrary content about 2</p>

        <h3><a href="javascript:google.maps.event.trigger(gmarkers['Shuttle Brookline 
Village'],'click');">Shuttle - 10 Brookline Place</a></h3>
        <p>Arbitrary content about 3</p>

    </div>

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you have a Javascript error

    after the 3rd location you are missing a comma , after the square bracket ]

    ///....snip
"10 Brookline Place",
"42.33262",
"-71.116439"
], //right here
[
"Subway Chestnut Hill",
"Green Line, D",
///...snip

    EDIT

    adding custom markers to the map
    Add the icon property like below – easy way is to just put a url in – hard way if you want to define shadows and anchor points is to build one – see the Google Maps API for the in depth stuff

    var marker = new google.maps.Marker({
    icon : "http://urlofmymarker.png", //comma is important
    position: latlng,
    map: map
});
    • 0