Solved

Google map not filling modal popup

Posted on 2013-05-13
4
2,363 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ebay messages api 6 17
Obsolete font tag need to convert to CSS 3 33
Wordpress and Wufoo 1 37
javascript works in Chrome, but none of the other browsers 14 29
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to dynamically set the form action using jQuery.

735 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