www.webdeveloper.com
Results 1 to 15 of 15

Thread: Resizing Google Map

  1. #1
    Join Date
    Dec 2005
    Posts
    2,984

    Resizing Google Map

    Ok, so check out http://maps.google.com and collapse the sidebar. See how the map resizes (take a look at the zoom/pan control)?

    Basically, in order for this to happen (I'm assuming), you need to calculate a new map center based on the new map container width and set the center of the map to the newly-calculated center as soon as the width changes.

    I've done this with google maps v2 api here:
    http://adamjenkins.me/gmap/gmap2.php

    Looks pretty good right?

    When I do it with maps api v3 here:
    http://adamjenkins.me/gmap/gmap3.php

    You can see how sometimes it 'jumps' sometimes?

    Does anybody familiar with the google maps api know how they do it on http://maps.google.com so that there's no jumping?
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,049
    Quote Originally Posted by aj_nsc View Post
    Basically, in order for this to happen (I'm assuming), you need to calculate a new map center based on the new map container width and set the center of the map to the newly-calculated center as soon as the width changes.
    kind of. but the API will do the heavy lifting. all you need to do is remember the map center before the resize, resize the container, tell the map it's been resized and then center the map using the stored variable. This is the kind of thing I do, and it doesn't seem to be as jumpy. Let me know if it works for you:

    Code:
    var side="wide";
    
    function reSize() {
    var cent=map.getCenter();
    if (side=="wide"){
    document.getElementById("map_canvas").style.width="90%"
    document.getElementById("side").style.width="10%"
    side="narr";
    	} else {
    document.getElementById("map_canvas").style.width="45%"
    document.getElementById("side").style.width="45%"
    side="wide";
    	} 
    	google.maps.event.trigger(map,"resize");
    	map.setCenter(cent);
    }

  3. #3
    Join Date
    Dec 2005
    Posts
    2,984
    Thanks for your answer, but that's not exactly what I'm trying to accomplish.

    I'm trying to resize the map and actually set a different center (so it looks like the map hasn't actually moved). The calculation and the setting of the center work, but as I said, it's a little jumpy - different than what you observe on http://maps.google.com when you collapse the sidebar.

    For example, on maps.google.com, if you collapse the sidebar, the center of the map has to be left of the center when the sidebar is expanded, I assume they must be resetting the center when you collapse the sidebar, but it doesn't jump like in my examples:

    V2 (works great) http://adamjenkins.me/gmap/gmap2.php
    V3 (jumpy sometimes) http://adamjenkins.me/gmap/gmap3.php
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  4. #4
    Join Date
    Nov 2010
    Posts
    1,049
    ah, I get it. Seems to me that you could do most of it with css then:

    Code:
    <style type="text/css">
          html, body, #map_canvas,#side {
            margin: 0;
            padding: 0;
            height: 100%;
            }
    	#map_canvas {
    	width:100%;
    	position:absolute;
            float:right;
    	}
    	#side {
    	background-color:white;
    	position:absolute;
    	float:left;
    	width:40%;
    	z-index:100;
            }
    </style>
    
    
    <script type="text/javascript">
    var side="wide";
    
    function reSize() {
    if (side=="wide"){
    document.getElementById("side").style.width="10%"
    side="narr";
    	} else {
    document.getElementById("side").style.width="45%"
    side="wide";
    	} 
    }
    </script>

  5. #5
    Join Date
    Dec 2005
    Posts
    2,984
    I could do it all with CSS - and just have the left sidebar cover part of the map...but, if I want to display an info window on the left edge of the map I need to make sure the map knows what size it is (i.e. I need to call google.maps.event.trigger(map,'resize') ) so that opening the info window can pan the map, if necessary. This won't work unless you do it 'legitimately' and not just use CSS to have the sidebar covering part of the map canvas.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  6. #6
    Join Date
    Nov 2010
    Posts
    1,049
    Quote Originally Posted by aj_nsc View Post
    This won't work unless you do it 'legitimately' and not just use CSS to have the sidebar covering part of the map canvas.
    you have noticed that the google maps sidebar covers an infowindow on the left side of the map when it is expanded, right?

    not saying that being more legit than google is a lofty ambition, but it looks to me like google use something very similar to what I suggested above.

    I guess what you could do is calculate the width of your sidebar "overhang", test if an infowindow is open within that distance from the map edge on expanding the sidebar and if it is, pan the map by the distance from the infowindow to the outer edge of the sidebar.

    or you could just live with a little jumpiness

  7. #7
    Join Date
    Dec 2005
    Posts
    2,984
    You are right about one thing, I could pan the map if I need to open an info window too close to the side, but when I try to open an info window (not just view one that's already opened) on the left side of http://maps.google.com - the map pans, because the sidebar is not in fact covering the left side of the map container.

    So, my aspirations are not loftier than google's, they are the same - when they toggle the sidebar, the map canvas div is resized and the map is re-centered (I am assuming again, of course).

    If you open an info window on any map canvas and then drag the map you can always partially or completely hide the info window...
    Last edited by aj_nsc; 03-06-2012 at 06:58 AM.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  8. #8
    Join Date
    Nov 2010
    Posts
    1,049
    Quote Originally Posted by aj_nsc View Post
    So, my aspirations are not loftier than google's, they are the same - when they toggle the sidebar, the map canvas div is resized and the map is re-centered (I am assuming again, of course).

    If you open an info window on any map canvas and then drag the map you can always partially or completely hide the info window...
    I think you're misunderstanding what I was saying... I'm talking about when you open an infowindow on the left side and then expand the sidebar, the sidebar covers the infowindow. Nothing to do with dragging or panning the map - this is what leads me to believe that the map has not been resized, because if it had been, the infowindow would not be hanging off the edge like that.

    What google does do is pan the map if you are opening an infowindow too close to the edge for it to be visible, which is what makes me think that they perform the sort of test I was talking about above before opening an IW. Why they don't do the same when the sidebar is toggled is a mystery to me.

  9. #9
    Join Date
    Dec 2005
    Posts
    2,984
    I see what you're saying now, good point. There's definitely some CSS trickery going on here.

    If you look at the edges of the map when the sidebar is collapsed (only collapsed, not expanded) you can see the edge tiles flickering which means that google.maps.event.trigger(map,'resize') has been fired.

    And you can also check the #map element in the inspector and see that it's width changes depending on the state of the sidebar....man I would kill to know how they do this.

    So perhaps they call the resize event only when the sidebar is collapsed and then they don't when it's expanded? That doesn't make any sense.....

    Thanks for the conversation xelawho, if you come up with anything else please post it here. I'll do the same. Right now, though, I can't replicate what google is doing....
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  10. #10
    Join Date
    Nov 2010
    Posts
    1,049
    oh, der.

    I forgot all about the element inspector

    so, check the structure: it seems to me that they exist independently (ie, not both floated left in the same wrapper or whatever) and while the map div does indeed change width on sidebar toggle, the sidebar does not.

    Which says to me that they're doing basically what we were talking about above but kind of in reverse - when the sidebar is "contracted" it doesn't change at all, just the map expands out over it.

    So I figured that another way to do it would be to check the map bounds before and after resizing the div and move the map the corresponding difference. Which works, but it ends up "jumpy" like your example... so, in the end nothing

    but here's what I was playing around with, in case you're interested...

    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Google Maps JavaScript API v3 Example: Map Simple</title>
        <meta name="viewport"
            content="width=device-width, initial-scale=1.0, user-scalable=no">
        <meta charset="UTF-8">
       <style type="text/css">
          html, body, #map_canvas,#side {
            margin: 0;
            padding: 0;
            height: 100%;
            }
    	#map_canvas {
    	width:60%;
    	position:absolute;
    	float:left;
    	right:0px;
    	z-index:100;
    	}
    	#side {
    	background-color:white;
    	position:absolute;
    	width:40%;
    	float:left; 
    	
        }
    </style>
        <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          var map;
          function initialize() {
            var myOptions = {
              zoom: 8,
              center: new google.maps.LatLng(-34.397, 150.644),
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map_canvas'),
                myOptions);
          
    	  }
    
          google.maps.event.addDomListener(window, 'load', initialize);
    
    var side="wide";
    
    function reSize() {
    var oldside=map.getBounds().getNorthEast().lng()
    if (side=="wide"){
    document.getElementById("map_canvas").style.width="90%"
    side="narr";
    	} else {
    document.getElementById("map_canvas").style.width="45%"
    side="wide";
    	} 
    google.maps.event.trigger(map,'resize');
    var newside=map.getBounds().getNorthEast().lng()
    var topan=oldside-newside;
    map.setCenter(new google.maps.LatLng(map.getCenter().lat(),map.getCenter().lng()+topan));	
    }
    	</script>
      </head>
      <body>
      <div id="side"><a href="javascript:void(0)" onclick ="reSize()">toggle</a></div>
        <div id="map_canvas"></div>
      </body>
    </html>

  11. #11
    Join Date
    Dec 2005
    Posts
    2,984
    Thanks for the very thorough investigation, xelahow, I gotta go and try and find some google api guys on twitter or something to answer this question. I'm dumbfounded as to how they do it.

    I'll post back if I get any reply.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  12. #12
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    I don't have a solution for you -- just wanted to point out that in Chrome on OS X, the map doesn't recenter perfectly. Every time I minimize the sidebar in Google Maps, the map itself moves about 20px to the left.

    So, I'm guessing your ambitions are a touch high -- Google hasn't even gotten it right.


    ADDENDUM: To clarify, if I continually expand and collapse the sidebar, the "center" location on my map will eventually disappear behind the left margin.
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  13. #13
    Join Date
    Dec 2005
    Posts
    2,984
    Thanks for posting that svidgen! While it isn't a solution it is very relevant information. I never actually did a browser test on maps.google.com.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  14. #14
    Join Date
    Jun 2012
    Posts
    1

    maps.google.com (resize)

    Hi
    I was looking for a similar solution and came across this thread. Checked out the maps.google.com url to see what you were trying to achieve. It almost appears that the Map has always stayed the same size , just the side panel is a div that is shown/hidden.

    thanks
    avasal.

  15. #15
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    I do not understand really the problem and do not know Google Map v3, but have made this page (with v2) which allow moves, zooms and probably resizing of the container...

Thread Information

Users Browsing this Thread

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

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