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
    516
    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,087
    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,366
    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...
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  8. #8
    Join Date
    Oct 2013
    Posts
    516
    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,087
    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