I have a file named my_app.js.coffee and it includes the following Google Maps setup:
map = undefined
initialize = (map) ->
myOptions =
center: new google.maps.LatLng 39.729001, -94.902342
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
map = new google.maps.Map $('.map')[0], myOptions
$ ->
initialize(map)
return
When I use a DIV with a class of map in a view, the map is displayed. Pretty cool.
However, there are times when I need to change the center of the map. In the corresponding view, I attempted the following:
<script type="text/javascript">
map.setCenter(43.652976, -79.390409);
</script>
Unfortunately, this does not update the center of the map. Instead, an error message appears in the console:
Uncaught ReferenceError: map is not defined
What am I overlooking here?
Thank you in advance.
EDIT:
buildMap = (callback = ->)->
console.log('xxx')
myOptions =
center: new google.maps.LatLng 39.729001, -94.902342
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
console.log('b1')
Gmaps.map = new google.maps.Map $('.map')[0], myOptions
console.log('b2')
#addMarkers(Gmaps.map)
callback()
console.log('ccc')
Gmaps =
buildMap: buildMap
window.Gmaps = Gmaps