Adding Jquery UI slider custom control
1,061 views
Skip to first unread message
Matt Alonso
Apr 13, 2011, 11:54:43 AM4/13/11
to Google Maps JavaScript API v3
So I'm pretty convinced that I am just doing something stupid but
cannot figure out for the life of me what it is. Basically I am
trying to add a generic jquery UI vertical slider (http://jqueryui.com/
demos/slider/#slider-vertical) as a google map control. I'm able to
create other controls - as long as I specify the innerHTML ahead of
time - but seem to be missing something w/the slider. I've even tried
putting an empty div in the innerHTML and then tying the slider init
call to the ready event of that div but to no avail.
I'm obviously missing some fundamental understanding of how the API
(flow) works.
Thanks in advance.
cannot figure out for the life of me what it is. Basically I am
trying to add a generic jquery UI vertical slider (http://jqueryui.com/
demos/slider/#slider-vertical) as a google map control. I'm able to
create other controls - as long as I specify the innerHTML ahead of
time - but seem to be missing something w/the slider. I've even tried
putting an empty div in the innerHTML and then tying the slider init
call to the ready event of that div but to no avail.
I'm obviously missing some fundamental understanding of how the API
(flow) works.
Thanks in advance.
en4ce
Apr 14, 2011, 5:11:41 AM4/14/11
to Google Maps JavaScript API v3
link?
Matt Alonso
Apr 14, 2011, 7:54:33 AM4/14/11
to Google Maps JavaScript API v3
Sorry about that, it was in a dev staging environment and I did not
have a publicly accessible link I could send out.
I was able to figure out how to do this though...sort of. I had been
trying to get the control to be added "automatically" as soon as
possible. However, I relaxed that requirement b/c our implementation
will not be able to make sure of the slider until a user chooses a
variable and so I've just attached the slider creation into the events
that trigger overlays being put on the map.
For whatever it is worth, I included a couple snippets of code below.
Addition of the custom control (div):
var sliderContainer = document.createElement('DIV');
sliderContainer.innerHTML='<div id="sliderContainer"></div>';
controlDiv.appendChild(sliderContainer);
Code I want(ed) to be triggered automatically (Note: This code is in a
separate file):
$('div#sliderContainer').html('');
$(function() {
$( "div#sliderContainer" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
self.overlay.setOpacity(ui.value)
}
});
sliderSet=1;
});
I guess I am also sort of curious to know how to (programmaticly)
determine that the map is loaded and modifications can be made to the
controls.
Thanks
On Apr 14, 5:11 am, en4ce <djen...@googlemail.com> wrote:
> link?
>
have a publicly accessible link I could send out.
I was able to figure out how to do this though...sort of. I had been
trying to get the control to be added "automatically" as soon as
possible. However, I relaxed that requirement b/c our implementation
will not be able to make sure of the slider until a user chooses a
variable and so I've just attached the slider creation into the events
that trigger overlays being put on the map.
For whatever it is worth, I included a couple snippets of code below.
Addition of the custom control (div):
var sliderContainer = document.createElement('DIV');
sliderContainer.innerHTML='<div id="sliderContainer"></div>';
controlDiv.appendChild(sliderContainer);
Code I want(ed) to be triggered automatically (Note: This code is in a
separate file):
$('div#sliderContainer').html('');
$(function() {
$( "div#sliderContainer" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
self.overlay.setOpacity(ui.value)
}
});
sliderSet=1;
});
I guess I am also sort of curious to know how to (programmaticly)
determine that the map is loaded and modifications can be made to the
controls.
Thanks
On Apr 14, 5:11 am, en4ce <djen...@googlemail.com> wrote:
> link?
>
Message has been deleted
en4ce
Apr 14, 2011, 11:33:14 AM4/14/11
to Google Maps JavaScript API v3
hey, you can upload your files to dropbox for example. about the
jquery thing...i tryed
something simular yesterday and it did not work, jquery seems not
getting the events if something is a cumstom map control and embedded
in the map it self, i will open a new topic about that in a few
but what you can do:
1. dont attach the slider to the map
2. place it obove the map via z-index and position relative/absolute
3. set a function to the slider, this function should set the zoom
level
there are some events to determine if the map is fully loaded, search
in the forum that for
jquery thing...i tryed
something simular yesterday and it did not work, jquery seems not
getting the events if something is a cumstom map control and embedded
in the map it self, i will open a new topic about that in a few
but what you can do:
1. dont attach the slider to the map
2. place it obove the map via z-index and position relative/absolute
3. set a function to the slider, this function should set the zoom
level
there are some events to determine if the map is fully loaded, search
in the forum that for
teknocreator
Apr 14, 2011, 2:38:04 PM4/14/11
to Google Maps JavaScript API v3
Matt,
Yeah, it's not completely clear cut. I don't know if this helps but I
got this Min value horizontal jQuery UI slider to work for setting/
getting our map's overlay opacity:
In the main javascript area:
// gets the current slider value and sets the Google Maps overlay's
opacity to it
// GMoverlay is a global ProjectedOverlay object
function getsliderval() {
var op = $("#opslider").slider("value");
if (GMoverlay)
GMoverlay.setOpacity(op);
$("#opacity").html(op+"%"); // This displays the opacity value
followed by the percent sign outside of the map area
}
// slider function using jQuery UI; calls function above when the
value changes or slide is used
$(function() {
$( "#opslider" ).slider({
slide: getsliderval,
change: getsliderval
});
$( "#opacity" ).val( $( "#opslider").slider("value"));
});
In the <body> section of the document:
<!-- opacity control -->
<div id="peropacity"
style="position:absolute; top:200px;left:450px">Opacity: <span
id="opacity"></span></div>
<div id="opslider" style="position:absolute; top:225px; left:
425px; width:200px"></div>
Hope that helps.
Dave
Yeah, it's not completely clear cut. I don't know if this helps but I
got this Min value horizontal jQuery UI slider to work for setting/
getting our map's overlay opacity:
In the main javascript area:
// gets the current slider value and sets the Google Maps overlay's
opacity to it
// GMoverlay is a global ProjectedOverlay object
function getsliderval() {
var op = $("#opslider").slider("value");
if (GMoverlay)
GMoverlay.setOpacity(op);
$("#opacity").html(op+"%"); // This displays the opacity value
followed by the percent sign outside of the map area
}
// slider function using jQuery UI; calls function above when the
value changes or slide is used
$(function() {
$( "#opslider" ).slider({
range: "min",
min: 0,
max: 100,
value: 50,
min: 0,
max: 100,
slide: getsliderval,
change: getsliderval
});
$( "#opacity" ).val( $( "#opslider").slider("value"));
});
In the <body> section of the document:
<!-- opacity control -->
<div id="peropacity"
style="position:absolute; top:200px;left:450px">Opacity: <span
id="opacity"></span></div>
<div id="opslider" style="position:absolute; top:225px; left:
425px; width:200px"></div>
Hope that helps.
Dave
en4ce
Apr 14, 2011, 3:04:57 PM4/14/11
to Google Maps JavaScript API v3
you did something like this:
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push($
("#opslider"));
?
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push($
("#opslider"));
?
teknocreator
Apr 15, 2011, 7:15:31 AM4/15/11
to Google Maps JavaScript API v3
Matt,
Yeah, sorry I didn't see you wanted to add this as a map control.
But, as I found, if you have it outside of the map, you can still use
it to get and set values for map objects.
Dave
> > > > link?- Hide quoted text -
>
> - Show quoted text -
Yeah, sorry I didn't see you wanted to add this as a map control.
But, as I found, if you have it outside of the map, you can still use
it to get and set values for map objects.
Dave
>
> - Show quoted text -
en4ce
Apr 15, 2011, 8:25:26 AM4/15/11
to Google Maps JavaScript API v3
yeah of cause =)
but different resolutions / dpi / fonts installed on the hardware and
all kind of stuff make me move away from have it outside of the map
but different resolutions / dpi / fonts installed on the hardware and
all kind of stuff make me move away from have it outside of the map
Reply all
Reply to author
Forward
0 new messages