Question

I am having issues getting setCenter to work. My JS console tells me:

myMap is not defined

myMap.setCenter(newLatLng);

It is clearly defined in the historyMap() function

My JavaScript

44     function historyMap() {
45         var travelCoords = new Array();
46         var allCoords = new Array();
47         var myOptions = {
48                 center: new google.maps.LatLng(<?php echo $places[$lastPlace]['lat']; ?>, <?php echo $places[$lastPlace]['long']; ?>),
49                 zoom: 8,
50                 mapTypeId: google.maps.MapTypeId.HYBRID
51         };
52         var myMap = new google.maps.Map(document.getElementById("map"), myOptions);
53         allCoords = [
54         <?php for($i = 0; $i < $numPlaces; $i++) { ?>
55                 new google.maps.LatLng(<?php echo $places[$i]['lat']; ?>, <?php echo $places[$i]['long'];?>),
56         <?php } ?>
57         ];
58         var travelPath = new google.maps.Polyline({
59                 path: allCoords,
60                 strokeColor: "#FF0000",
61                 strokeOpacity: 1.0,
62                 strokeWeight: 4
63         });
64         lastLatLng = new google.maps.LatLng(<?php echo $places[$lastPlace]   ['lat'];?>, <?php echo $places[$lastPlace]['long'];?>);
65         var marker = new google.maps.Marker({
66                 icon: 'img/<?php echo $icon; ?>',
67                 position: lastLatLng,
68                 map: myMap,
69                 title: '<?php echo $places[$numPlaces-1]['title'];?>'
70         });
71         travelPath.setMap(myMap);
72     }
73
74     function setMapCenter(lat,lng) {
75
76         var newLatLng = new google.maps.LatLng(lat,lng);
77         myMap.setCenter(newLatLng);
78
79     }
80
81     $(function() {
82         historyMap();
83     });

The HTML calling the setMapCenter function:

<td><a href="javascript:void(0);" onClick="setMapCenter('49.261226','-123.113927')">Vancouver</a></td>

I really appreciate any insight anybody can provide.

Answer 1

It’s because your variable myMap is a local variable : it is only defined for your function historyMap().

Initialize it, out your functions :

var myMap = {};
function historyMap() { ... }
// other functions