Jump to content

Bootstrap Modal that includes a Google Map


tonyM

Recommended Posts

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

Link to comment
Share on other sites

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...