Embedded google map responsive

Question

Hi!

I embedded a google map with the following code in my single-contact.php, the template for my contact page in wordpress:

  <div class="container-fluid map"><iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2455.223722924585!2d4.210255300000002!3d52.021021899999894!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c5b222d1fd27e9%3A0x2b7ce6c6d70c21db!2sSlachthuiskade+14C!5e0!3m2!1sen!2sus!4v1393720388420" width="100%" height="500" frameborder="0"></iframe></div>

As you can see I put it in a full-width bootstrap div and it looks great! When I resize the window the map shrinks along, but the google maps pin does not stay in the middle, the map just cuts in from the right. How can I make sure the map stays on the right location when resized e.g. how to make sure the dropped maps pin stays in the middle?

Thanks!!

Answer 1 · 2014-06-12T18:06:50Z

June 12, 2014 6:06pm

I'm not sure you can solve your problem when using an iframe, since you do not have much control over that content. You can however solve this issue if you include your map using the Google Map API. If the lessons are still up, they go over how to do this in the jQuery lessons.

basically, what happens

Set a variable to your lat and longitude coordinates
Set your mapOptions variable's argument center, to the lat/long variable.
Initialize the map, and center the map
Add a resize function to re-center the map when the window size changes.

Here is some example code from a while ago. I'm not sure if the Google Map API has changed or not since this was wrote.

The following code is basically what is taught in that jQuery lesson.

<script type="text/javascript">
    $("#location").prepend('<div id="map"></div>');
    $(".static-map").remove();
    function initialize() {
          var myLatlng = new google.maps.LatLng(46.204927,-119.104116); //This is the lat and lng numbers. Changing these numbers will change the     map marker
           var mapOptions = {
           zoom: 14,
           center: myLatlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
           }
           var map = new google.maps.Map(document.getElementById('map'), mapOptions);

           var marker = new google.maps.Marker({
              position: myLatlng,
              map: map 
          });
       }

       initialize();
      google.maps.event.addDomListener(map, 'idle', function(){
         center = map.getCenter();
      });

      $(window).resize(function(){
          map.setCenter(center);
      });


</script>

Welcome to the Treehouse Community

Looking to learn something new?

Boris Kamp

Boris Kamp

Embedded google map responsive

1 Answer

Kevin Korte

Kevin Korte

Boris Kamp

Boris Kamp