Smarty Forum Index Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon.

Best way to use CSS to size maps created with GoogleMapAPI?

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> Add-ons
View previous topic :: View next topic  
Author Message
daiello@rinkatlas.com
Smarty Rookie


Joined: 19 Feb 2007
Posts: 7
Location: Newtown, PA

PostPosted: Mon Feb 19, 2007 4:00 pm    Post subject: Best way to use CSS to size maps created with GoogleMapAPI? Reply with quote

I developed an application called RinkAtlas using GoogleMapAPI. This site uses a slightly modified version of the technique specified in Hack #51 of Google Maps Hacks (Make a Fullscreen Map the Right Way) to create a map that automatically recenters and stretches properly.

What I mean by this is that I use CSS to control the size and position of the map and the left side panel in the window as follows:

Quote:

#map {
position: relative;
margin-left: 327px;
margin-top: 5px;
height: 85%;
z-index: 2;
}


#leftpanel {
position: absolute;
left: 0px;
top: 15%;
width: 310px;
height: 85%;
overflow: auto;
border-right: 2px solid black;
margin-top: 5px;
padding: 10px 10px 0px 5px;
z-index: 1;
}


The problem I ran into with GoogleMapAPI is that the map defaults to a 500 x 500px size because those are the initial values set in class variables. I got around this by modifying the class to make the height and width default to empty strings.

I would prefer not to have to maintain my own private patch of the GoogleMapAPI class just for this issue.

I see that there are setHeight and setWidth functions in the class, but what I'm looking for is a way to get GoogleMapAPI to just forget about handling map sizing. Is there a way to do this without modifying the class myself? If not, would this be a welcomed addition to the code and how would it best be accomplished?

Thanks,

Dave Aiello
RinkAtlas
Back to top
View user's profile Send private message Visit poster's website
TGKnIght
Smarty Junkie


Joined: 07 Sep 2005
Posts: 580
Location: Philadelphia, PA

PostPosted: Mon Feb 19, 2007 4:04 pm    Post subject: Reply with quote

Can you just do

Code:

$map->setWidth('100%');
$map->setHeight('100%');

_________________
Smarty site with one index.php controller file
Working with MySQL and Smarty
SmartyColumnSort
Custom Smarty Javascript Debug Template
Back to top
View user's profile Send private message Visit poster's website
daiello@rinkatlas.com
Smarty Rookie


Joined: 19 Feb 2007
Posts: 7
Location: Newtown, PA

PostPosted: Mon Feb 19, 2007 4:57 pm    Post subject: Reply with quote

When I reverted GoogleMapAPI.class.php to the distribution and included:

Code:

$this->map->setWidth('100%');
$this->map->setHeight('100%');


... the result was a 500 x 500 map.
_________________
Dave Aiello
RinkAtlas.com
Back to top
View user's profile Send private message Visit poster's website
TGKnIght
Smarty Junkie


Joined: 07 Sep 2005
Posts: 580
Location: Philadelphia, PA

PostPosted: Mon Feb 19, 2007 7:03 pm    Post subject: Reply with quote

Are you sure you have the newest version? I remember specifically requesting %'s to be respected as height and width and IIRC has been included in the last couple versions..

Make sure you have at least version 2.3?
_________________
Smarty site with one index.php controller file
Working with MySQL and Smarty
SmartyColumnSort
Custom Smarty Javascript Debug Template
Back to top
View user's profile Send private message Visit poster's website
daiello@rinkatlas.com
Smarty Rookie


Joined: 19 Feb 2007
Posts: 7
Location: Newtown, PA

PostPosted: Mon Feb 19, 2007 7:18 pm    Post subject: Reply with quote

Yes, I have version 2.3. I see the code in setHeight and setWidth to deal with percentage values. I don't know exactly why your suggestion didn't work.

I guess I could try removing the previously-referenced blocks from the stylesheet in addition to the php code changes you suggested and test again.

I'm starting to think that in order to get to the bottom of this I'll need to do some debugging at the Zend Studio or Firebug level. That would be a lot of trouble to go to, IMHO.
_________________
Dave Aiello
RinkAtlas.com
Back to top
View user's profile Send private message Visit poster's website
TGKnIght
Smarty Junkie


Joined: 07 Sep 2005
Posts: 580
Location: Philadelphia, PA

PostPosted: Tue Feb 20, 2007 2:15 pm    Post subject: Reply with quote

Heres a post from a while back with some JS to resize the maps height... It doesn't recenter the map though, so that's why I would like to see what solution you come up with..

http://www.phpinsider.com/smarty-forum/viewtopic.php?t=6762&highlight=
_________________
Smarty site with one index.php controller file
Working with MySQL and Smarty
SmartyColumnSort
Custom Smarty Javascript Debug Template
Back to top
View user's profile Send private message Visit poster's website
daiello@rinkatlas.com
Smarty Rookie


Joined: 19 Feb 2007
Posts: 7
Location: Newtown, PA

PostPosted: Tue Feb 20, 2007 6:12 pm    Post subject: Reply with quote

The reference you gave to your previous post was very helpful. With it I was able to search through GoogleMapAPI.class.php and find the following block of code:

Code:

    function getMap() {
        $_output = '<script type="text/javascript" charset="utf-8">' . "\n" . '//<![CDATA[' . "\n";
        $_output .= 'if (GBrowserIsCompatible()) {' . "\n";
        if(strlen($this->width) > 0 && strlen($this->height) > 0) {
            $_output .= sprintf('document.write(\'<div id="%s" style="width: %s; height: %s"></div>\');',$this->map_id,$this->width,$this->height) . "\n";
        } else {
            $_output .= sprintf('document.write(\'<div id="%s"></div>\');',$this->map_id) . "\n";     
        }
        $_output .= '}';


The reason that my hack of blanking out the default values for the width and height class variables works is that the getMap() function tests for the strlen of the width and height. If the strlen of both is zero, it omits them from the div declaration that it generates as a container for the map. Otherwise it declares the width and height as ad-hoc styles for the div.

I guess I could just write a method called something like useCSSsizing() that blanks out the width and height class variables, and makes the solution a lot cleaner / better documented for future users of the class.

Is this a good way to proceed?
_________________
Dave Aiello
RinkAtlas.com
Back to top
View user's profile Send private message Visit poster's website
TGKnIght
Smarty Junkie


Joined: 07 Sep 2005
Posts: 580
Location: Philadelphia, PA

PostPosted: Tue Feb 20, 2007 6:47 pm    Post subject: Reply with quote

Ahh yeah I see what you're talking about now... And the way setWidth() and setHeight() are written they don't allow you to clear out the variable.

If you don't want to maintain a separate version of the GoogleMapAPI.class.php you can extend the base class with your own customization..

Here's a simple way to do what you need :

Code:

<?php
require_once("GoogleMapAPI.class.php");

class rinkAtlas extends GoogleMapAPI {

   //Construct the child class
   function __construct () {
      //Call constructor for the parent class
      parent::__construct();

      //Setup defaults
      $this->width = "";
      $this->height = "";
   }
}

$map = new rinkAtlas;

//Now do the rest of your map calls as usual
?>


Hopefully this will take away any need to modify the base class and you can just overwrite the original class with new versions as they come out
_________________
Smarty site with one index.php controller file
Working with MySQL and Smarty
SmartyColumnSort
Custom Smarty Javascript Debug Template
Back to top
View user's profile Send private message Visit poster's website
daiello@rinkatlas.com
Smarty Rookie


Joined: 19 Feb 2007
Posts: 7
Location: Newtown, PA

PostPosted: Tue Feb 20, 2007 7:51 pm    Post subject: Reply with quote

This makes sense for my situation at the moment and I appreciate it. However, I think that the base class should be able to handle this because books like Google Maps Hacks state that the best practice is to size the map using CSS.
_________________
Dave Aiello
RinkAtlas.com
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> Add-ons All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP