Am trying to display a map for a location with google maps in a modal using fancybox, but it makes all the request to google maps web service but does not render the map. Heres my code
function show_map(options) {
var html = '<div id="map-canvas" style="width:100%; height=100%"></div>';
$.fancybox({
'width':550,
'height':450,
'content':html,
'modal' : false,
'transitionIn' : 'none',
'transitionOut': 'none',
'speedIn' : 300,
'speedOut' : 300,
'autoScale' : false,
'scrolling' : 'no',
'centerOnScroll':true,
'onComplete':function()
{
var myOptions = {
center: new google.maps.LatLng(options.lat,options.lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
}
})
}
When i inspect the modal using chrome's dom inspector i see the generated html but the map does not show. What could be wrong?
You don't seem to add the map-canvas
element to the dom. So the GoogleMap API cannot find it. Try the following:
var mapCanvas = document.createElement('div');
mapCanvas.setAttribute('id','map-canvas');
mapCanvas.setAttribute('style','width:100%; height=100%');
document.getElementById('divParentContainer').appendChild(mapCanvas);
Replace the divParentContainer
with the id of the container that acts as parent for your div.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.