I’m a total JS noob so bear with me.
I have an adaptive Google map solution where for non-mobile viewports I conditionally load in the full Google map API and mobile viewports get static Google map image, basically similar to this: http://codepen.io/bradfrost/full/tLxAs.
I’m using [B]Enquire[/B] library to handle the different states between viewports (mobile vs. non-mobile). I’m hiding/showing the relevant maps in each state via jQuery’s hide() / show(), there’s a common problem with the Google map API when it’s in a hidden element, see here: http://blog.codebusters.pl/en/entry/google-maps-in-hidden-div and here: http://dougmolineux.com/wp/?p=242. I can’t apply the common fixes as I think it’s because I’m loading the Google map API asynchronously? Everything else works fine it’s just when I go from non-mobile -> mobile -> non-mobile viewport the Google Map API won’t load properly i.e. only loads 1 tile which is because it was in a hidden div element when in mobile viewport.
Here’s my code:
<div class="map">
<div class="map__static">
<img src="http://maps.google.com/maps/api/staticmap?center=-33.867487,151.20699&zoom=15&markers=-33.867487,151.20699&size=640x400&sensor=false" alt="Map of Sydney, NSW">
</div>
<a href="http://maps.google.com.au/maps?q=Sydney,+New+South+Wales&hl=en&sll=-25.335448,135.745076&sspn=65.633852,135.263672&oq=Sydney&hnear=Sydney+New+South+Wales&t=m&z=10">View map</a>
</div>
JS:
$(function() {
var mapContainer = $('.map'),
mapStaticContainer = $('.map__static'),
mapDynamicContainer = $('<div class="map__dynamic"/>');
enquire.register('screen and (min-width: 40em)', {
deferSetup: true,
setup: function() {
mapContainer.prepend(mapDynamicContainer);
mapDynamicContainer.load('/includes/scripts/adaptive-google-map.php', function() {
$.getScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyAywjPmf5WvWh_cIn35NwtIk-gYuwu1I2Q&sensor=false&callback=initialize');
});
},
// Not palm size viewport
match: function() {
mapStaticContainer.hide();
mapDynamicContainer.show();
},
// Palm size viewport
unmatch: function() {
mapStaticContainer.show();
mapDynamicContainer.hide();
}
}, true).listen();
});
Contents of ‘/includes/scripts/adaptive-google-map.php’:
<div id="map_canvas"></div>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-33.867487,151.20699);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
animation: google.maps.Animation.DROP
});
var contentString =
'<div class="infowindow">'+
'<div>'+
'<p class="flush"><strong>SALES OFFICE:</strong><br>1/16 M. 5<br>Tambol Cherngthaley<br>Amphur Thalang<br>Phuket, 83110.<br>See <a href="contact">contact</a> page.</p>'
'</div>'+
'</div>'
;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
// Center Google Maps on browser resize (http://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive)
var center;
function calculateCenter() {
center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
}
</script>
I found that this fixes it:
mapDynamicContainer.show(function () {
setTimeout(function() {
initialize();
}, 300);
});
But it throws a JS error: initialize is not defined.
So I think what’s wrong is I cannot access initialize(); function as it doesn’t exist in the scope of my global JS file?? Any suggestions.