Adding Sliding panel.
4,134 views
Skip to first unread message
GMapHelp
Aug 11, 2011, 3:06:57 AM8/11/11
to Google Maps JavaScript API v3
Hello,
I am using Google Maps API V3. I wanna add sliding panel same as
google maps on my googlemap page. I have added <DIV> on Google map
API . My problem is that i cant place this DIV before pan and zoom
control.? Can any one help me, how can i get this done.
Regards
I am using Google Maps API V3. I wanna add sliding panel same as
google maps on my googlemap page. I have added <DIV> on Google map
API . My problem is that i cant place this DIV before pan and zoom
control.? Can any one help me, how can i get this done.
Regards
geoco...@gmail.com
Aug 11, 2011, 10:13:55 AM8/11/11
to Google Maps JavaScript API v3
http://groups.google.com/group/google-maps-js-api-v3/browse_frm/thread/0d1bb6e972ed63ab#
-- Larry
>
> Regards
Kesuke
Aug 11, 2011, 1:24:11 PM8/11/11
to Google Maps JavaScript API v3
Are you talking about the entire left panel - or the panels within the
map?
The left panel (where the directions are shown) on maps.google.com
could be easily reproduced using CSS and JQuery.
Your page will look something like:
<body>
<div id="left-panel">Stuff you want in the panel</div>
<div id="map-canvas"></div>
</body>
Then, you will give your map-canvas and left-panel divs the CSS
stylings you need to make them look like google maps. E.g. float both
to the left, then either use fixed pixel widths or percentages for
height/width. I use a form of sliding panel and actually get the width
by checking a users screen.width(); then computing the width in pixels
from that. In JQuery there are a couple of options, you will probably
want to use .animate() to get the left/right sliding motion. If you
want to really make it look like google maps you can then add
shadowing onto the map div. Use a css3 shadow property with 'inset' to
make it an inner shadow and add that to the map-canvas css.
map?
The left panel (where the directions are shown) on maps.google.com
could be easily reproduced using CSS and JQuery.
Your page will look something like:
<body>
<div id="left-panel">Stuff you want in the panel</div>
<div id="map-canvas"></div>
</body>
Then, you will give your map-canvas and left-panel divs the CSS
stylings you need to make them look like google maps. E.g. float both
to the left, then either use fixed pixel widths or percentages for
height/width. I use a form of sliding panel and actually get the width
by checking a users screen.width(); then computing the width in pixels
from that. In JQuery there are a couple of options, you will probably
want to use .animate() to get the left/right sliding motion. If you
want to really make it look like google maps you can then add
shadowing onto the map div. Use a css3 shadow property with 'inset' to
make it an inner shadow and add that to the map-canvas css.
Pil
Aug 12, 2011, 1:38:42 PM8/12/11
to Google Maps JavaScript API v3
On Aug 11, 7:24 pm, Kesuke <Nick_dai...@hotmail.com> wrote:
> The left panel (where the directions are shown) on maps.google.com
> could be easily reproduced using CSS and JQuery.
Let's look a bit closer: I agree that it really should be easy
to move the panel from left to right and vice versa. But that remainss
easy anyway, so it wouldn't be necessary to use an additional library
for such easy things.
Now let's take one step ahead: When I look at the contents of the left
panel in Google Maps a bit more accurately, I notice that there are so
many complex features that I only doubt to call them easy to implement
and to make them all work properly. And in this case I believe that an
additional library would be nothing but a hindrance for any well-
considered, serious, short and perfect solution.
So again: There is no reason to use such a library.
Do not use it if don't know Javascript and you want to learn it. And
if you knew Javascript you wouldn't use it voluntarily.
Esa
Aug 12, 2011, 4:24:03 PM8/12/11
to Google Maps JavaScript API v3
I see quite tricky to duplicate the behavior of the map when its size
is changed. Map doesn't move when the side panel is switched. However
its center changes. You can test it by zooming in.
You can either adjust the map size or you can float the side panel on
map and move the control elements. Both ways have many pitfalls.
It would be easier with v2 API. It has some additional options to zoom
focusing and control element positioning.
is changed. Map doesn't move when the side panel is switched. However
its center changes. You can test it by zooming in.
You can either adjust the map size or you can float the side panel on
map and move the control elements. Both ways have many pitfalls.
It would be easier with v2 API. It has some additional options to zoom
focusing and control element positioning.
Kesuke
Aug 12, 2011, 5:08:29 PM8/12/11
to Google Maps JavaScript API v3
If enough people are interested I will do a guide on how to replicate
the maps.google.com side panel witj JQuery. It isn't as complicated as
it seems, but it does have to be done in quite a precise way. Is this
something people want?
the maps.google.com side panel witj JQuery. It isn't as complicated as
it seems, but it does have to be done in quite a precise way. Is this
something people want?
GMapHelp
Aug 16, 2011, 2:24:26 AM8/16/11
to Google Maps JavaScript API v3
Hello Kesuke,
It would be great if you guide me to get this done.
Regards.
On Aug 13, 2:08 am, Kesuke <Nick_dai...@hotmail.com> wrote:
> If enough people are interested I will do a guide on how to replicate
> the maps.google.com sidepanelwitj JQuery. It isn't as complicated as
It would be great if you guide me to get this done.
Regards.
On Aug 13, 2:08 am, Kesuke <Nick_dai...@hotmail.com> wrote:
> If enough people are interested I will do a guide on how to replicate
> it seems, but it does have to be done in quite a precise way. Is this
> something people want?
>
> On Aug 12, 9:24 pm, Esa <esa.ilm...@gmail.com> wrote:
>
>
>
>
>
>
>
> > I see quite tricky to duplicate the behavior of the map when its size
> > is changed. Map doesn't move when the sidepanelis switched. However
> something people want?
>
> On Aug 12, 9:24 pm, Esa <esa.ilm...@gmail.com> wrote:
>
>
>
>
>
>
>
> > I see quite tricky to duplicate the behavior of the map when its size
GMapHelp
Aug 17, 2011, 3:54:58 AM8/17/11
to Google Maps JavaScript API v3
Hello Everyone,
After lots of vexation .Finally i was able to get some wat effect
like Google map. I am posting the code also so that anyone like me
searching for sliding panel with Google maps V3 may find it helpful. I
do still have problem in rendering zoom control and scale control as
the sliding panel expands and collapse. If any help or suggestion
would be appreciated.
Regards
Code /////////////////////////////////////////////////
var map;
var latlng = new google.maps.LatLng(53.409532,-2.990113);
var srcImageL = 'slidebtnL.jpg';
var srcImageR = 'slidebtnR.jpg';
function SPControl(MainContainer, map)
{
MainContainer.style.padding = '0px';
MainContainer.style.height="100%";
///Open panel----------------------------------------------
var MyPanel = document.getElementById("slidingPanel");
MyPanel.style.top="0px";
MyPanel.style.borderStyle = 'solid';
MyPanel.style.borderColor='gray';
MyPanel.style.borderWidth = '1px';
MyPanel.style.zIndex="1";
MainContainer.appendChild(MyPanel);
var controlUI = document.createElement('DIV');
controlUI.style.top="-124px";
controlUI.style.left="379px";
controlUI.style.width="20px";
controlUI.style.height="20px";
controlUI.style.backgroundColor = 'silver';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderColor='gray';
controlUI.style.borderWidth = '1px';
controlUI.style.cursor = 'pointer';
controlUI.style.position = 'relative';
controlUI.title = 'Click to close sliding panel';
MyPanel.appendChild(controlUI);
// Create an IMG element and attach it to the DIV.
var imgclose = document.createElement("img");
imgclose.src = srcImageL;
imgclose.style.width = "20px";
imgclose.style.height = "20px";
controlUI.appendChild(imgclose);
///--------------------------------------------------------
///Close panel---------------------------------------------
var closeControl = document.createElement('DIV');
closeControl.style.top="0px";
closeControl.style.left="0px";
closeControl.style.width="20px";
closeControl.style.height="20px";
closeControl.style.backgroundColor = 'silver';
closeControl.style.borderStyle = 'solid';
closeControl.style.borderWidth = '1px';
closeControl.style.borderColor='gray';
closeControl.style.cursor = 'pointer';
closeControl.style.position = 'relative';
closeControl.title = 'Click to open sliding panel';
MainContainer.appendChild(closeControl);
// Create an IMG element and attach it to the DIV.
var imgopen = document.createElement("img");
imgopen.src = srcImageR;
imgopen.style.width = "20px";
imgopen.style.height = "20px";
closeControl.appendChild(imgopen);
///--------------------------------------------------------
MyPanel.isVisible = true;
function closeEvent(){MyPanel.isVisible=false;
google.maps.event.trigger(MyPanel,'close',false)};
function openEvent(){MyPanel.isVisible=true;
google.maps.event.trigger(MyPanel,'open',true)};
google.maps.event.addDomListener(controlUI, 'click', function()
{
controlUI.onclick = function(){MyPanel.style.display = "none";
closeEvent()};
});
google.maps.event.addDomListener(closeControl, 'click',
function() {
closeControl.onclick = function(){MyPanel.style.display =
"block"; openEvent()};
});
}
function initialize() {
var myOptions = {
zoom: 11,
center: latlng,
// scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
//disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var MapControls = {
mapTypeControl: true,
mapTypeControlOptions : {
mapTypeIds: new
Array(google.maps.MapTypeId.ROADMAP,google.maps.MapTypeId.SATELLITE,google.maps.MapTypeId.HYBRID,google.maps.MapTypeId.TERRAIN),
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl: false,
scrollwheel: true
}
map.setOptions(MapControls);
var holdDiv = document.createElement('DIV');
var spcontrol= new SPControl(holdDiv, map);
holdDiv.index=-1;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(holdDiv);
}
</script>
<div id="map_canvas" style="width:100%; height:538px;"></div>
<div id="slidingPanel" style="width:400px; height:100%;background-
color:#FFFFFF; ">
</div>
code /////////////////////////////////////////////////
After lots of vexation .Finally i was able to get some wat effect
like Google map. I am posting the code also so that anyone like me
searching for sliding panel with Google maps V3 may find it helpful. I
do still have problem in rendering zoom control and scale control as
the sliding panel expands and collapse. If any help or suggestion
would be appreciated.
Regards
Code /////////////////////////////////////////////////
var map;
var latlng = new google.maps.LatLng(53.409532,-2.990113);
var srcImageL = 'slidebtnL.jpg';
var srcImageR = 'slidebtnR.jpg';
function SPControl(MainContainer, map)
{
MainContainer.style.padding = '0px';
MainContainer.style.height="100%";
///Open panel----------------------------------------------
var MyPanel = document.getElementById("slidingPanel");
MyPanel.style.top="0px";
MyPanel.style.borderStyle = 'solid';
MyPanel.style.borderColor='gray';
MyPanel.style.borderWidth = '1px';
MyPanel.style.zIndex="1";
MainContainer.appendChild(MyPanel);
var controlUI = document.createElement('DIV');
controlUI.style.top="-124px";
controlUI.style.left="379px";
controlUI.style.width="20px";
controlUI.style.height="20px";
controlUI.style.backgroundColor = 'silver';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderColor='gray';
controlUI.style.borderWidth = '1px';
controlUI.style.cursor = 'pointer';
controlUI.style.position = 'relative';
controlUI.title = 'Click to close sliding panel';
MyPanel.appendChild(controlUI);
// Create an IMG element and attach it to the DIV.
var imgclose = document.createElement("img");
imgclose.src = srcImageL;
imgclose.style.width = "20px";
imgclose.style.height = "20px";
controlUI.appendChild(imgclose);
///--------------------------------------------------------
///Close panel---------------------------------------------
var closeControl = document.createElement('DIV');
closeControl.style.top="0px";
closeControl.style.left="0px";
closeControl.style.width="20px";
closeControl.style.height="20px";
closeControl.style.backgroundColor = 'silver';
closeControl.style.borderStyle = 'solid';
closeControl.style.borderWidth = '1px';
closeControl.style.borderColor='gray';
closeControl.style.cursor = 'pointer';
closeControl.style.position = 'relative';
closeControl.title = 'Click to open sliding panel';
MainContainer.appendChild(closeControl);
// Create an IMG element and attach it to the DIV.
var imgopen = document.createElement("img");
imgopen.src = srcImageR;
imgopen.style.width = "20px";
imgopen.style.height = "20px";
closeControl.appendChild(imgopen);
///--------------------------------------------------------
MyPanel.isVisible = true;
function closeEvent(){MyPanel.isVisible=false;
google.maps.event.trigger(MyPanel,'close',false)};
function openEvent(){MyPanel.isVisible=true;
google.maps.event.trigger(MyPanel,'open',true)};
google.maps.event.addDomListener(controlUI, 'click', function()
{
controlUI.onclick = function(){MyPanel.style.display = "none";
closeEvent()};
});
google.maps.event.addDomListener(closeControl, 'click',
function() {
closeControl.onclick = function(){MyPanel.style.display =
"block"; openEvent()};
});
}
function initialize() {
var myOptions = {
zoom: 11,
center: latlng,
// scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
//disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var MapControls = {
mapTypeControl: true,
mapTypeControlOptions : {
mapTypeIds: new
Array(google.maps.MapTypeId.ROADMAP,google.maps.MapTypeId.SATELLITE,google.maps.MapTypeId.HYBRID,google.maps.MapTypeId.TERRAIN),
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl: false,
scrollwheel: true
}
map.setOptions(MapControls);
var holdDiv = document.createElement('DIV');
var spcontrol= new SPControl(holdDiv, map);
holdDiv.index=-1;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(holdDiv);
}
</script>
<div id="map_canvas" style="width:100%; height:538px;"></div>
<div id="slidingPanel" style="width:400px; height:100%;background-
color:#FFFFFF; ">
</div>
code /////////////////////////////////////////////////
GMapHelp
Aug 19, 2011, 7:12:58 AM8/19/11
to Google Maps JavaScript API v3
Hello EveryOne,
How can i change scalecontrol position in V3 (i.e., i want to
change its x and y position). As in API V2 we can set
function GScaleControl1(){};
GScaleControl1.prototype = new GScaleControl();
GScaleControl1.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(475,7));
}
Any help appreciated
Regards
How can i change scalecontrol position in V3 (i.e., i want to
change its x and y position). As in API V2 we can set
function GScaleControl1(){};
GScaleControl1.prototype = new GScaleControl();
GScaleControl1.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(475,7));
}
Any help appreciated
Regards
en4ce
Aug 19, 2011, 7:43:44 AM8/19/11
to Google Maps JavaScript API v3
yup, we want !
Esa
Aug 19, 2011, 11:17:36 AM8/19/11
to Google Maps JavaScript API v3
I was writing earlier: "You can either adjust the map size or you can
with sidebar and one full width displayed when the sidebar is hidden.
That would solve the problem of keeping the right center point.
float the side panel on
map and move the control elements. Both ways have many pitfalls. "
There is a third way to do it. You can have two maps. One displayed
map and move the control elements. Both ways have many pitfalls. "
with sidebar and one full width displayed when the sidebar is hidden.
That would solve the problem of keeping the right center point.
Pil
Aug 19, 2011, 11:35:52 AM8/19/11
to Google Maps JavaScript API v3
Hmm, it seems that Google Maps doesn't change the center of the map
when hiding and showing the left panel. The map only seems to be
expanded or decreased on the left side.
Isn't this a good approach?
when hiding and showing the left panel. The map only seems to be
expanded or decreased on the left side.
Isn't this a good approach?
stejo
Sep 21, 2011, 7:50:07 AM9/21/11
to google-map...@googlegroups.com
I am trying to achieve the described funationality, see my stackoverflow post for my findings which include some some simple jsfiddle examples.
I'm almost there but not quite...
The best solution I have found is to place the sliding panel on the right hand side, although this does not meet my design requirements either.
Esa, I'm not sure thaty having two maps is viable either. I've found Google maps to be a fairly memory intensive as well as the issue of maintaining markers and custom overlays between the two maps.
Anyway, here are my attempts so far,
http://stackoverflow.com/questions/7493032/trying-to-replicate-google-maps-slide-panel-with-maps-v3-and-jquery
I'm almost there but not quite...
The best solution I have found is to place the sliding panel on the right hand side, although this does not meet my design requirements either.
Esa, I'm not sure thaty having two maps is viable either. I've found Google maps to be a fairly memory intensive as well as the issue of maintaining markers and custom overlays between the two maps.
Anyway, here are my attempts so far,
http://stackoverflow.com/questions/7493032/trying-to-replicate-google-maps-slide-panel-with-maps-v3-and-jquery
Reply all
Reply to author
Forward
0 new messages