dcsimg
www.webdeveloper.com
Results 1 to 9 of 9

Thread: center a GMAP on window resize

  1. #1
    Join Date
    Jul 2014
    Posts
    13

    center a GMAP on window resize

    can someone please help me, I am having trouble implementing this, i just want the map to center when the window is resized. But it wont eve load the map

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style>
    #map {
    
        position:absolute; top:0; left:0; width:100%; height:100%;
    }
    </style>
    <script
    src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script>
    var myOptions = {
        center: new google.maps.LatLng(35.02, 111.02),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    
    $(window).on('resize', function(){var currCenter = map.getCenter();google.maps.event.trigger(map, 'resize');map.setCenter(currCenter);
    });
    
    </script>
    </head>
    
    <body>
    <div id="map"></div>
    </body>
    </html>

  2. #2
    Join Date
    Jul 2014
    Posts
    13
    I manage to get this to work, but its kind of choppy on resize.. i still dont get why the first one didnt work.. maybe because i didnt position the div with a style like this one.. hmm..

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    
    </head>
    
    <body>
    <div id="map" style="position:absolute; top:0; left:0; width:100%; height:100%;"></div>
    
    
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
    function initialize() {
       var mapOptions = {
               zoom: 14,
               center: new google.maps.LatLng(44.051478, -79.480212),  
               mapTypeId: google.maps.MapTypeId.ROADMAP,
    		   
           };
       var map = new google.maps.Map(document.getElementById('map'),mapOptions); 
    }
    google.maps.event.addDomListener(window, 'resize', initialize);
    google.maps.event.addDomListener(window, 'load', initialize);
    
    </script>
    
    </body>
    </html>

  3. #3
    Join Date
    Jul 2014
    Posts
    13
    actually no what am I saying I did position the div

  4. #4
    Join Date
    Oct 2013
    Posts
    894
    Your script is running before the DOM is built. Putting the scripts just before </body> fixes that and displays the map. You are using a line that indicates jQuery or other library should be uses [$(window).on...]. No library is being called so I commented it to eliminate that error. You are using <script> and <style> as they would be used in HTML5, but you have a XHTML1 DOCTYPE. That will throw validation errors. I changed the DOCTYPE to HTML5.

    It still won't resize but at least it displays with no errors. You can figure it out from here.

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    
    <style>
    #map {position:absolute; top:0; left:0; width:100%; height:100%;}
    </style>
    </head>
    
    <body>
    <div id="map"></div>
    <script
    src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script>
    var myOptions = {
        center: new google.maps.LatLng(35.02, 111.02),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    
    //$(window).on('resize', function(){var currCenter = map.getCenter();google.maps.event.trigger(map, 'resize');map.setCenter(currCenter);
    //});
    
    </script>
    
    </body>
    </html>

  5. #5
    Join Date
    Nov 2010
    Posts
    1,123
    simple enough to change that line to make it work without jQuery...

    Code:
    window.onresize = function(){var currCenter = map.getCenter();google.maps.event.trigger(map, 'resize');map.setCenter(currCenter);
    };

  6. #6
    Join Date
    Jul 2014
    Posts
    13
    Amazing!, thanks guys! I'm a javascript noob. mostly work work with C, Java and VHDL.

    But you go to love JavaScript!

  7. #7
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,964
    More properly is ti use the window.onload function to run your code in the head which runs when the whole page has loaded.

    Then your listener is set after the document is loaded because the element you are listening to is available to attach the event...
    STOP using $ prefix on JavaScript variable names...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  8. #8
    Join Date
    Oct 2013
    Posts
    894
    Quote Originally Posted by \\.\ View Post
    More properly is ti use the window.onload function to run your code in the head which runs when the whole page has loaded. [...]
    Ya, but I was lazy...

  9. #9
    Join Date
    Nov 2010
    Posts
    1,123
    Quote Originally Posted by \\.\ View Post
    More properly is ti use the window.onload function to run your code in the head which runs when the whole page has loaded.

    Then your listener is set after the document is loaded because the element you are listening to is available to attach the event...
    I'm struggling to see the advantage in putting this code in the head as opposed to before the closing </body> tag - all that does is make the html load slower, no?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles