google maps onclick go to marker on map - google-maps

Question

I'm having issues trying to get my map to go to the marker of a location when a "View on Map" link is clicked. I keep getting the error "TypeError: map.setOptions is not a function".
Here's the code:
var infowindow = null;
function initialize(){
var myOptions = {
zoom:3,
center:new google.maps.LatLng(0,0),
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(
document.getElementById('map'),myOptions);
setMarkers(map,sites);
}
var infowindow = new google.maps.InfoWindow({
content:'Loading...'
});
var sites = [
['GIC Campers Sydney',-33.935477,151.012108,1,'xxx'],
['GIC Campers Brisbane',-27.5445735,153.0139405,1,'yyy'],
['GIC Campers Melbourne',-37.650735,144.940551,1,'zzz']
];
function setMarkers(map,markers){
var bounds = new google.maps.LatLngBounds();
var image = new google.maps.MarkerImage('/templates/home/images/google-pin.png',
new google.maps.Size(60,60),
new google.maps.Point(0,0),
new google.maps.Point(30,60));
for(var i=0;i<markers.length;i++){
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1],sites[2]);
var marker = new google.maps.Marker({
position:siteLatLng,
map:map,
icon:image,
title:sites[0],
zIndex:sites[3],
html:sites[4]
});
google.maps.event.addListener(marker,'click',function(){
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.setContent(this.html);
infowindow.open(map,this);
});
bounds.extend(siteLatLng);
map.fitBounds(bounds);
}
};
function loadcity(which){
initialize();
if(which == 'gic-campers-sydney'){
var newPos = new google.maps.LatLng(-33.935477,151.012108);
map.setOptions({center:newPos,zoom:15});
}
if(which == 'gic-campers-brisbane'){
var newPos = new google.maps.LatLng(-27.5445735,153.0139405);
map.setOptions({center:newPos,zoom:15});
}
if(which == 'gic-campers-melbourne'){
var newPos = new google.maps.LatLng(-37.650735,144.940551);
map.setOptions({center:newPos,zoom:15});
}
}
jQuery(document).ready(function(e) {
initialize();
jQuery('.updatemap').click(function(e){
e.preventDefault();
});
});
and an example link:
<a onclick="loadcity('gic-campers-brisbane');" class="updatemap" href="#gic-campers-brisbane">View on map</a>
Any help on this would be greatly appreciated.

Answer 1

Your map variable is local to the initialize function. It is not available inside the loadcity function.
One fix is to make it global (like your infowindow):
var infowindow = null;
var map = null;
function initialize(){
var myOptions = {
zoom:3,
center:new google.maps.LatLng(0,0),
mapTypeId:google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(
document.getElementById('map'),myOptions);
setMarkers(map,sites);
}
Not sure why you recreate the map (call initialize() every time loadcity runs), you really should only need to do that once.