Question

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?

Answer 1

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.