View previous topic :: View next topic |
Author |
Message |
daiello@rinkatlas.com Smarty Rookie
Joined: 19 Feb 2007 Posts: 7 Location: Newtown, PA
|
Posted: Mon Feb 19, 2007 4:00 pm Post subject: Best way to use CSS to size maps created with GoogleMapAPI? |
|
|
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 |
|
TGKnIght Smarty Junkie
Joined: 07 Sep 2005 Posts: 580 Location: Philadelphia, PA
|
|
Back to top |
|
daiello@rinkatlas.com Smarty Rookie
Joined: 19 Feb 2007 Posts: 7 Location: Newtown, PA
|
Posted: Mon Feb 19, 2007 4:57 pm Post subject: |
|
|
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 |
|
TGKnIght Smarty Junkie
Joined: 07 Sep 2005 Posts: 580 Location: Philadelphia, PA
|
|
Back to top |
|
daiello@rinkatlas.com Smarty Rookie
Joined: 19 Feb 2007 Posts: 7 Location: Newtown, PA
|
Posted: Mon Feb 19, 2007 7:18 pm Post subject: |
|
|
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 |
|
TGKnIght Smarty Junkie
Joined: 07 Sep 2005 Posts: 580 Location: Philadelphia, PA
|
|
Back to top |
|
daiello@rinkatlas.com Smarty Rookie
Joined: 19 Feb 2007 Posts: 7 Location: Newtown, PA
|
Posted: Tue Feb 20, 2007 6:12 pm Post subject: |
|
|
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 |
|
TGKnIght Smarty Junkie
Joined: 07 Sep 2005 Posts: 580 Location: Philadelphia, PA
|
Posted: Tue Feb 20, 2007 6:47 pm Post subject: |
|
|
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 |
|
daiello@rinkatlas.com Smarty Rookie
Joined: 19 Feb 2007 Posts: 7 Location: Newtown, PA
|
Posted: Tue Feb 20, 2007 7:51 pm Post subject: |
|
|
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 |
|
|