Currently, I am using a template that includes a Google map with coordinates set in JavaScript. The code for the marker on the map is as follows:
//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),
new google.maps.Point(0,0),
new google.maps.Point(35,20)
);
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 am now looking to add more markers to this existing map to represent multiple locations. Can someone provide guidance on how to achieve this?