var map;
var cityList = [
['Atlanta, GA', 33.840644, -84.238972, 1, "text 0"],
['Austin, TX', 30.402887, -97.721606, 2, "text 1"],
['Boston, MA', 42.364247, -71.078575, 3, "text 2"],
['Chicago, IL', 41.898111, -87.638394, 4, "text 3"]
];
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(46.8, 1.7),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
setMarkers(map, cityList);
}
function setMarkers(map, locations) {
var bounds = new google.maps.LatLngBounds();
var image = 'http://maps.google.com/mapfiles/ms/icons/blue.png';
for (var i = 0; i < locations.length; i++) {
var city = locations[i];
var myLatLng = new google.maps.LatLng(city[1], city[2]);
bounds.extend(myLatLng);
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
document.getElementById('sidebar').innerHTML += '<li><a onclick="map.setCenter(new google.maps.LatLng(' + city[1] + ',' + city[2] + ')); return false">' + city[0] + '</a></li>';
(function(i) {
google.maps.event.addListener(marker, "click", function() {
var galeries = locations[i];
infoWindow.close();
infoWindow.setContent(
"<div id='boxcontent'><a href='" + city[0] + "'><strong style='color:black'>" + galeries[0] + "</strong></a><br />" + city[4] + "</div>");
infoWindow.open(map, this);
});
})(i);
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<table border="1" style="height:100%; width:100%">
<tr style="height:100%; width:100%">
<td style="height:100%; width:80%">
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
</td>
<td style="height:100%; width:20%">
<div id="sidebar"></div>
</td>
</tr>
</table>