CODEWITHSUNDEEP
javascriptjquerygoogle-maps
David
David

Reputation: 1963

Google map display none jQuery

I have two js files. First one defines a google map like: lat, lon, mapOptions, marker, etc. Here it is:

function initialize() {

var myLatlng = new google.maps.LatLng(settings.custom_contact.lat, settings.custom_contact.lng);

var mapOptions = {
  zoom: 13,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var contentString = '';

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: ''
}); 
}
google.maps.event.addDomListener(window, 'load', initialize);

The second one contains some manipulations of displaying #map-canvas container. The default state of map-canvas is display: none. It shows up after a click on specific element. Now, I've read that it's common problem with displaying hidden map and I should put this line of code:

google.maps.event.trigger(map, 'resize');

when I click on element that makes container with map visible. But when I put this code firebug tells me: "ReferenceError: map is not defined". And it's right, because it's in different file. I can't merge those two files. How can I manage this?

Upvotes: 0

Views: 1051

Answers (1)

geocodezip
geocodezip

Reputation: 161334

Put the map variable in the global scope:

var map = null;
function initialize() {

var myLatlng = new google.maps.LatLng(settings.custom_contact.lat, settings.custom_contact.lng);

var mapOptions = {
  zoom: 13,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var contentString = '';

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: ''
}); 
}
google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 1

Related Questions