-1

I've read through a few posts here on stack exchange and cannot figure out what I am doing wrong.

Here's my metabox callback:

<script type="text/javascript">

        function initMap() {
            var mapOpts = {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                zoom: 14,
                center: { lat: 38.61687, lng: -90.219727 },
            };

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

        }//end initMap

        google.maps.event.addDomListener(window, "load", initMap);

        jQuery(window).load(function() {
            google.maps.event.trigger(map, "resize");
            console.log("Map Resized");
        });

        //38.61687,-90.219727
    </script>   

    <table width="100%" class="widefat">

    <tr>    
        <th scope="row"><label for="_latitude">Latitude:</label></th>
        <td><input type="text" name="_latitude" value="<?php print get_post_meta( $post->ID, '_latitude', true ); ?>" /> 
    </tr>

    <tr>
        <th scope="row"><label for="_longitude">Longitude:</label></th>
        <td><input type="text" name="_longitude" value="<?php print get_post_meta( $post->ID, '_longitude', true ); ?>" /></td>      
    </tr>

    </table>

    <h2>Map Below</h2>

    <div style="height:400px;width:800px;"><div id="map-canvas" width="100%" height="100%"></div></div>

I read somewhere that the map may be loading before the metabox is created. So I added the maps.event.trigger which shows in the console in firebug, map is undefined/not defined. My console.log function doesn't show in the console either.

I know I must be missing something really small. Google API is loading into the the page via an enqueue scripts hook. And I am hooking into 'add_meta_boxes' action to add my metabox.

Any help is greatly appreciated.

EDIT ---------------------------------------------------------

I solved this by adding:

#map-canvas {
    height:100%!important;
}

to my included css file.

1

I had to add

#map-canvas {
    height:100%!;
}

to my stylesheet.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.