google maps: open infowindow with custom button

Question

I will try to be more precise. I am trying to open an 'infowindow' that is attached to a marker from a custom button. while it works by clicking the marker directly I am failing to assign it to a button. The page currently looks like this: map_example

Can anyone please check the code below and tell me what I am doing wrong?

function zagrebControl(controlDiv, map) {
controlDiv.style.paddingLeft = '0px';
controlDiv.style.paddingRight = '6px';
controlDiv.style.paddingTop = '0px';
controlDiv.style.paddingBottom = '6px';
controlDiv.style.marginBottom = '0px';
controlDiv.style.width = '80px';

var zagrebUI = document.createElement('DIV');
zagrebUI.style.backgroundColor = 'white';
zagrebUI.style.borderStyle = 'solid';
zagrebUI.style.borderWidth = '1px';
zagrebUI.style.cursor = 'pointer';
zagrebUI.style.textAlign = 'center';
zagrebUI.title = 'click to set the map to zagreb';
controlDiv.appendChild(zagrebUI);

var controlText = document.createElement('DIV');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.style.paddingTop = '1px';
controlText.style.paddingBottom = '0px';
controlText.innerHTML = 'ZAGREB';
zagrebUI.appendChild(controlText);

google.maps.event.addDomListener(zagrebUI, 'click', function() {
map.setCenter(v1); map.setZoom(7)
});
google.maps.event.addListener(zagrebUI, 'click', function() {
infowindow.setContent('<object width="640" height="360">...</object>');
infowindow.open(map, m1)
});

My code for the marker looks like this:

google.maps.event.addListener(m1, 'click', function() {
infowindow.setContent('<object width="640" height="360">...</object>');
infowindow.open(map, m1);

});

Thank you.

Answer 1

m1 is not a global varible so at infowindow.open(map, m1) browser doesn't know m1.

declare m1 globally.

var m1;
function initialize() {
...
m1 = new google.maps.Marker({
  position: new google.maps.LatLng(45.81871335, 15.97911),
  map: map,
  animation: google.maps.Animation.DROP,
  title: "ZAGREB"
});
...