Zoom function Google maps - google-maps

Question

I've created a button inside my info window that needs to pan to the marker and then zoom in but I can't get it to work. Below is my Zoom function
function Zoom(){
google.maps.event.addListener(marker, 'click', function() {
map.panTo(marker.position);
map.setZoom(18);
});
and this the function that creates the marker and fills the info window with the html below.
function createMarker(latlng, name, woonplaats, prijs, perceelop, woonop, address) {
var html =""+"<b>"+name+"</b> <br/>"
+ woonplaats +"</br>" + woonop + "/ " + perceelop + "</br>" + "€ " + prijs +
"</br><input id='zoombutton' type='button' onclick='Zoom()' value='Zoom in' />"
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
If I remove the panTo function it does Zoom in, but it doesn't pan to the marker so it zooms in in a totally different place. I also tried to make the button invisible if the zoom level is 18 or higher but with no result.
Any help will be highly appreciated!

Answer 1

marker.position is an undocumented parameter (if it exists). Use marker.getPosition() to get the marker's position.
function Zoom(){
google.maps.event.addListener(marker, 'click', function() {
map.panTo(marker.getPosition());
map.setZoom(18);
});
// ??
}
I get a javascript error with your code though: Uncaught ReferenceError: marker is not defined
not sure why you are adding a click listener to marker in the button onclick function
you will need to keep references to all your markers (assuming there is more than one)
// in the global scope:
var markers = [];
function Zoom(markerNum) {
// markerNum is the index of this marker in the markers array
map.panTo(markers[markerNum].getPosition());
map.setZoom(18);
}
working fiddle
code snippet:
var map;
var markers = [];
var infoWindow = new google.maps.InfoWindow();
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
createMarker(map.getCenter(), "Palo Alto");
createMarker({
lat: 37.42410599999999,
lng: -122.1660756
}, "Stanford");
}
function createMarker(latlng, name) {
var html = name + "</br><input id='zoombutton' type='button' onclick='Zoom(" + markers.length + ")' value='Zoom in' />"
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
function Zoom(markerNum) {
map.panTo(markers[markerNum].getPosition());
map.setZoom(18);
}
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>
<div id="map_canvas"></div>