tonyM Posted June 13, 2016 Share Posted June 13, 2016 I am trying to use a modal to display directions that include a Google map, but the map does not display. This must be a common requirement for many websites and so an example of how to do it would be useful on http://www.w3schools.com/bootstrap/bootstrap_modal.asp I am using a WordPress plugin Responsive Google Maps | by imbaa but the problem probably exists for all plugins. I have no problems displaying the map on pages and posts so there is something stopping the display on the modal popup. Any help much appreciated. ThanksTony Link to comment Share on other sites More sharing options...
Ingolme Posted June 13, 2016 Share Posted June 13, 2016 Can you show the code you're using? Link to comment Share on other sites More sharing options...
justsomeguy Posted June 13, 2016 Share Posted June 13, 2016 Also check your browser's developer console for error messages. Link to comment Share on other sites More sharing options...
tonyM Posted June 14, 2016 Author Share Posted June 14, 2016 There is a web page under construction at :http://www.teesdalelocal.co.uk/Directions to Peveril House button.The code is: <!-- Trigger the modal with a button --><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#DIRECTIONS">Directions to Peveril House</button> <!-- Modal --><div id="DIRECTIONS" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title"> Directions to Peveril House </h4> </div> <div class="modal-body"><div class="row"><div class="col-sm-6"><p><strong>From the A31</strong>, turn north towards Blandford Forum at the A350 crossroads (approximately 4 miles west of Wimborne Minster).</p><p>After approximately one mile, take the 2nd turning on the left, just before the Ginger Fox pub and sign posted towards Almer.</p><p>Peveril House is the 3rd entrance on the right (this is immediately adjacent to the 2nd entrance). There is a brown five bar gate and a gravel driveway. If you see white fencing you have gone too far.</p></div><div class="col-sm-6">[responsive_map lat=50.797084" lng="-2.0895617" show_marker="true" title="Peveril House Bed and Breakfast, Sturminster Marshall, nr Wimborne, Dorset BH21 4AN" height="280px" zoom="10" pan_control="false" scale_control="false" zoom_control="true" map_type_control="true" overview_map_control="false" draggable="true" scrollwheel="false" map_type="road" street_view_control="false] <br /></div></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div></div> Link to comment Share on other sites More sharing options...
tonyM Posted June 14, 2016 Author Share Posted June 14, 2016 An observation. When the modal is displayed the map is just a grey area. If I right click the popup and Inspect Element, the map appears. It then seems to be cached. If I reload the page the map reverts to the grey rectangle. Thank you for taking the time to look at this. Much appreciated. Tony Link to comment Share on other sites More sharing options...
justsomeguy Posted June 14, 2016 Share Posted June 14, 2016 The first thing I see is a message saying you don't have an API key for maps. Maybe you're supposed to add that to the responsive_map part. Link to comment Share on other sites More sharing options...
tonyM Posted June 14, 2016 Author Share Posted June 14, 2016 As far as I am aware a key is not needed. The responsive Google map on the home page is almost identical and displays fine. I have also used this pluging on lots of other websites with no problem. I think it is a problem linked to initialisation of something. I checked Google for problems concerning the display og Google maps in modal popups but I am afraid my technical skills are not sufficient to understand how to resolve the problem. But thanks for looking. Tony Link to comment Share on other sites More sharing options...
justsomeguy Posted June 14, 2016 Share Posted June 14, 2016 It sounds like there are issues initializing a map inside a hidden element. It sounds like the options are to either trigger a resize event on the map once the element is shown, or wait until after the element is visible to initialize the map. http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture Link to comment Share on other sites More sharing options...
tonyM Posted June 15, 2016 Author Share Posted June 15, 2016 (edited) Yes - that is what is happening. I will sort out a solution from the post. Thanks again. Tony Edited June 15, 2016 by tonyM Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now