Changing a Google Map using multiple clicks with jQuery

Question

I have a Google map within a div set for the coordinates of Troy, Michigan. I want users to be able to click on links for Miami or South Haven, MI, and then back to Troy again.

The map for Troy loads as expected and I can click on the link for Miami and the maps changes. But if I uncomment out the function for the South Haven links, like it is now, then all the links go to South Haven.

The map is here: http://www.autoalliancemedia.com/BlancoPC%20Map.html#

I can place the code here or you can view it on the page itself.

Thanks in advance.

Answer 1

here is working example jsfiddle

function map1()
{
var mapTroy = {
  center:new google.maps.LatLng(42.5803,-83.1431),
  zoom:10,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap"), mapTroy);
}

function map2() 
{
  var mapMiami = {
  center:new google.maps.LatLng(25.7877,-80.2241),
  zoom:10,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"), mapMiami);
}


function map3() 
{
  var mapSouthHaven = {
  center:new google.maps.LatLng(42.4031,-86.2736),
  zoom:10,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"), mapSouthHaven);
}

google.maps.event.addDomListener(window, 'load', map2);

$(document).ready(function(){
    $('#miami').click(function() {         
      map2();
    }); 

    $('#shaven').click(function() {
     map3();
    });

    $('#troy').click(function() {
     map1();
    });
});