tonyM

Yes - that is what is happening. I will sort out a solution from the post. Thanks again. Tony

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

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

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>

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. Thanks Tony