Google maps, changing the map on click - outside the map - google-maps

Question

I want to change the map (lat and lag) when a div (which is outside the map) is clicked.
I have got it working when the #map div is clicked, however any event outside the map does not get picked up.
This is what I have so far.
var map;
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 52.9722222,
lng: -3.1622222
},
disableDefaultUI: true,
zoom: 17,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map'
]
}
});
google.maps.event.addDomListener(mapDiv, 'click', function() {
window.alert('Map was clicked!');
});
var image = 'img/mapmarker.png';
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
var marker = new google.maps.Marker({
position: {
lat: 52.9722222,
lng: -3.1622222
},
map: map,
icon: image,
});
}

Answer 1

The map variable that is being initialized is local to the initMap function. You need to initialize the global version:
var map;
function initMap() {
var mapDiv = document.getElementById('map');
// remove the var before map in this line:
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 52.9722222, lng: -3.1622222},
proof of concept fiddle
code snippet:
var map;
function initMap() {
var mapDiv = document.getElementById('map');
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 52.9722222,
lng: -3.1622222
},
disableDefaultUI: true,
zoom: 17,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map'
]
}
});
google.maps.event.addDomListener(mapDiv, 'click', function() {
window.alert('Map was clicked!');
});
var marker = new google.maps.Marker({
position: {
lat: 52.9722222,
lng: -3.1622222
},
map: map
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="Click Me!" onclick="map.setCenter({lat:52.97,lng:-3.16});map.setZoom(15);" />
<div id="map"></div>