Google Maps in Modal.

Circus33Jul 27, 2016

Hi, Im trying to add google maps in a modal, however the maps window is showing but the map is loaded into the top right corner and I can't move it at all.
Any help please :) ? Here is my code for the map and the modal.

$('#google-map1').gMap({
			address: 'ul. Radetski 2, 3001 Vratsa, Bulgaria',
			maptype: 'ROADMAP',
			zoom: 17,
			markers: [
				{
					address: "ul. Radetski 2, 3001 Vratsa, Bulgaria",
					icon: {
						image: "images/icons/map-icon-red.png",
						iconsize: [32, 39],
						iconanchor: [32,39]
					}
				}
			],
			doubleclickzoom: true,
			scrollwheel: false,
			controls: {
				 panControl: true,
				 zoomControl: true,
				 mapTypeControl: true,
				 scaleControl: true,
				 streetViewControl: true,
				 overviewMapControl: true
			}

		});

<!-- Modal -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title1</h4>
      </div>
      <div class="modal-body">
        <div id="google-map1" class="gmap" style="height: 500px;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

SemiColonWebSTAFFJul 28, 2016

Hello,

Since the Google Maps and Modals both are initiated using jQuery, there can be some conflicts. You will need to Re-Initialize the Google Maps JS in order to be shown inside the Modal Window. Consider using the following HTML Code:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gMapModal">Launch modal</button>

<!-- Modal -->
<div class="modal fade" id="gMapModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-body">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">Google Map</h4>
				</div>
				<div class="modal-body">

					<div class="gmap" id="google-map" style="height: 400px;"></div>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary">Save changes</button>
				</div>
			</div>
		</div>
	</div>
</div>

and then add the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking:

<script>

var gMapShowed = 0,
	showGmap = function() {

		if( gMapShowed == 1 ) { return true; }

		jQuery('#google-map').gMap({

			 address: 'Melbourne, Australia',
			 maptype: 'ROADMAP',
			 zoom: 14,
			 markers: [
				{
					address: "Melbourne, Australia"
				}
			 ],
			 doubleclickzoom: false,
			 controls: {
				 panControl: true,
				 zoomControl: true,
				 mapTypeControl: true,
				 scaleControl: false,
				 streetViewControl: false,
				 overviewMapControl: false
			}
		});

		gMapShowed = 1;

}

jQuery('#gMapModal').on('shown.bs.modal', function () {
	showGmap();
});

</script>

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Circus33Aug 1, 2016

AWESOME!!! Thanks a lot guys! It works like a charm.