Modifying Google canvas script to have multiple markers

Question

I'm working with a template that has a nice embeded Google map with coordinate set in javascript. This is the code for that one marker;

//Google Map                    
var latlng = new google.maps.LatLng(44.761128,21.227395);
var settings = {
    zoom: 5,
    center: new google.maps.LatLng(44.761128,21.227395), mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    scrollwheel: false,
    draggable: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: false,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP};


var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
});

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h3 id="firstHeading" class="firstHeading">TITLE</h3>'+
    '<div id="bodyContent">'+
    '<p>Here we are.</p>'+
    '</div>'+
    '</div>';
var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var companyImage = new google.maps.MarkerImage('images/marker.png',
    new google.maps.Size(58,63),<!-- Width and height of the marker -->
    new google.maps.Point(0,0),
    new google.maps.Point(35,20)<!-- Position of the marker -->
);



var companyPos = new google.maps.LatLng(44.761128,21.227395);

var companyMarker = new google.maps.Marker({
    position: companyPos,
    map: map,
    icon: companyImage,               
    title:"Creative News",
    zIndex: 3});



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

});

I wish to add few more markers on this same map because of multiple locations. Can anyone tell me how do I go about doing that?

possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Jan 24 '14 at 17:02

score 0 · Answer 1 · edited May 23 '17 at 11:56

Some resources are available to do this at: http://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/,

Google Maps JS API v3 - Simple Multiple Marker Example.

In case you're using an asp back end (you didn't mention how you're generating the points): http://www.aspforums.net/Threads/101953/How-to-add-multiple-markers-to-Google-Map-Example/

And in case you add a lot and are in need of marker management: https://developers.google.com/maps/articles/toomanymarkers

Modifying Google canvas script to have multiple markers

1 Answers1