Solved

Google map not filling modal popup

Posted on 2013-05-13
4
2,349 Views
Last Modified: 2013-05-19
I'm using a modal popup when users click the map on this page here, which brings up a larger map with directions.

The map isn't filling the entire space however and I can't figure out why. When I right click on it to check in an the chrome inspector, it makes the map fill the modal.

Here's the code:

       <div class="map clearfix">
            <div class="bg left-contact">
            <% if len(""&rsAdvert("ContactPostcode"))>0 then %>
                      <a href="#myModal" role="button" data-toggle="modal">
<div class="small-map" style="width:100%;height:130px;background:url(http://maps.google.com/maps/api/staticmap?center=<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>&zoom=14&size=250x250&maptype=roadmap&markers=color:ORANGE|label:A|<%=server.URLEncode(""&rsAdvert("ContactPostcode"))%>&sensor=false) center no-repeat;"></div></a>
                      <div class="expand"></div>
    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
      </div>
      <div class="modal-body">
        <p><div id='map-canvas'></div></p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
      </div>
    </div>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="/js/bootstrap/js/bootstrap.min.js"></script>
               <% end if %> 
            </div>
        </div>

     <script src="http://maps.googleapis.com/maps/api/js?q=London&key=AIzaSyBaPEDyFbbnWjtvT8W3UBOM34Y7g6vK69A&sensor=false"></script>
    <script>
        var map;
        function initialize() {
          var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var geolocate = function(address, callback) {
                $.ajax({
                        url: "http://maps.googleapis.com/maps/api/geocode/json",
                        data: {
                            "sensor": true,
                            "address": address
                        },
                        dataType: "json",
                        success: function(d) {
                            if (d.status == "ZERO_RESULTS") callback(false);
                            if (d.results && d.results[0] && d.results[0].geometry) {
                                callback({
                                    "ne": d.results[0].geometry.bounds.northeast,
                                    "sw": d.results[0].geometry.bounds.southwest,
                                    "center": d.results[0].geometry.location
                                });
                            }
                            else callback(false);
                        }
                    });
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
          geolocate("<%=server.URLEncode(""&rs("ca_postcode"))%>", function(c) {
                map.setCenter(new google.maps.LatLng(c.center.lat, c.center.lng));
         });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Open in new window


Also if anyone knew how to change the modal effect from coming down from the top to just popping up on the screen? I can post the javascript too.
0
Comment
Question by:UName10
  • 2
  • 2
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39163577
replace line 13 by : <div class="modal-body" style="padding:0">

this is line 196 of http://www.inside-guides.co.uk/js/Bootstrap/css/bootstrap.min.css :
.modal-body{position:relative;overflow-y:auto;max-height:400px;padding:20px;}
0
 

Accepted Solution

by:
UName10 earned 0 total points
ID: 39164306
Thanks for the reply, I fixed it by adding the following to the end of the Google map script:

$('#myModal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 39164408
I see no change... still have a border...
0
 

Author Closing Comment

by:UName10
ID: 39178253
Works perfectly
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question