Google Maps draggable overlay on touch screen - google-maps-api-3

I have added a custom draggable overlay onto a google map, which works well using a mouse, but doesn't work on touch screens.
The code I am using is from this question : Can we make custom overlays draggable on google maps V3
The code is from #Dr.Molle and shown below.
Is there anything I can do to make it work on a touch screen? The marker shows, but I cannot move it.
DraggableOverlay.prototype = new google.maps.OverlayView();
DraggableOverlay.prototype.onAdd = function () {
var container = document.createElement('div'),
that = this;
if (typeof this.get('content').nodeName !== 'undefined') {
container.appendChild(this.get('content'));
} else {
if (typeof this.get('content') === 'string') {
container.innerHTML = this.get('content');
} else {
return;
}
}
container.style.position = 'absolute';
container.draggable = true;
google.maps.event.addDomListener(this.get('map').getDiv(),
'mouseleave',
function () {
google.maps.event.trigger(container, 'mouseup');
}
);
google.maps.event.addDomListener(container,
'mousedown',
function (e) {
this.style.cursor = 'move';
that.map.set('draggable', false);
that.set('origin', e);
that.moveHandler =
google.maps.event.addDomListener(that.get('map').getDiv(),
'mousemove',
function (e) {
var origin = that.get('origin'),
left = origin.clientX - e.clientX,
top = origin.clientY - e.clientY,
pos = that.getProjection()
.fromLatLngToDivPixel(that.get('position')),
latLng = that.getProjection()
.fromDivPixelToLatLng(new google.maps.Point(pos.x - left,
pos.y - top));
that.set('origin', e);
that.set('position', latLng);
that.draw();
});
}
);
google.maps.event.addDomListener(container, 'mouseup', function () {
that.map.set('draggable', true);
this.style.cursor = 'default';
google.maps.event.removeListener(that.moveHandler);
});
this.set('container', container)
this.getPanes().floatPane.appendChild(container);
};
function DraggableOverlay(map, position, content) {
if (typeof draw === 'function') {
this.draw = draw;
}
this.setValues({
position: position,
container: null,
content: content,
map: map
});
}
DraggableOverlay.prototype.draw = function () {
var pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
this.get('container').style.left = pos.x + 'px';
this.get('container').style.top = pos.y + 'px';
};
DraggableOverlay.prototype.onRemove = function () {
this.get('container').parentNode.removeChild(this.get('container'));
this.set('container', null)
};
new DraggableOverlay(
map,//maps-instance
latLng,//google.maps.LatLng
'content',//HTML-String or DOMNode
function(){}//optional, function that ovverrides the draw-method
);

Related

Change infowindow marker based on variable in realtime

How do I change the icon of a marker based on if a value is true or false.
I created an if function that checks the value of CameraStatus. I set it to false on default but the marker still won't change to RedStatus. It does change to RedStatus when I try a timer like this:
setTimeout(function () { MiamiMarker.setIcon(RedStatus) }, 10 * 1000);
It doesn't change to RedStatus when I try this:
var CameraStatus = false;
function CheckStatus() {
if (CameraStatus === false) {
MiamiMarker.SetIcon(RedStatus)
}
}
How do I change the marker based on my if function?
Eventually I want to change all my markers with boolean values I get from a home controller. The value of the boolean should decide if the marker has a GreenStats or RedStatus icon. First I'm trying to change one marker based on a hardcoded value. (See code below)
My code:
<script>
var map;
function initMap() {
var CenterLoc = { lat: 51.34, lng: 5.53 };
map = new google.maps.Map(document.getElementById('map'),
{
center: CenterLoc,
disableDefaultUI: true,
zoom: 3,
});
google.maps.event.addDomListener(window, 'load', initMap);
var Miami = { lat: 25.774266, lng: -80.193659 };
var MiamiMarker = new google.maps.Marker
({
position: Miami,
map: map,
icon: GreenStatus
});
//Replace standard google maps markers with colored dots
var GreenStatus = "#ViewBag.GreenStatus";
var OrangeStatus = "#ViewBag.OrangeStatus";
var RedStatus = "#ViewBag.RedStatus";
var CameraStatus = false;
function CheckStatus() {
if (CameraStatus === false) {
MiamiMarker.SetIcon(RedStatus)
}
}
var MiamiInfoCard = new google.maps.InfoWindow
({
content: '<div id="map-dialog"><h3>Miami</h3></div>'
});
MiamiMarker.addListener('click', function () {
MiamiInfoCard.open(map, MiamiMarker);
});
var position = new google.maps.LatLng(52.2305, 5.9924);
}
</script>
You can use an if else statement to change your Icon. Please note that it is .setIcon() and not *.SetIcon() just like in your code.
if (CameraStatus == false) {
MiamiMarker.setIcon(RedStatus)
} else {
MiamiMarker.setIcon(GreenStatus)
}
You can check this sample code that reproduces what you want in your use-case.
I used a toggle switch to set values for CameraStatus and call the CheckStatus() function passing the variables CameraStatus and MiamiMarker to be processed in the function.
var switchStatus = document.getElementById("mySwitch");
var CameraStatus;
switchStatus.addEventListener('change', function() {
if (switchStatus.checked) {
CameraStatus = false;
} else {
CameraStatus = true;
}
CheckStatus(CameraStatus, MiamiMarker);
});
I put the CheckStatus() function outside the initMap() function and passed the CameraStatus and MiamiMarker to change the marker's icon base on the value of CameraStatus.
function CheckStatus(CameraStatus, MiamiMarker) {
if (CameraStatus == false) {
MiamiMarker.setIcon(RedStatus)
} else {
MiamiMarker.setIcon(GreenStatus)
}
Hope this helps!

How to show dynamically multiple popup in openlayers 3 map

Can anyone tell me how to show all popup of markers in openlayers 3 map. I searched many sites but couldn't get any answer please anyone know about this then help me
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
crossOrigin: 'anonymous'
})
})
],
overlays: [overlay],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([0, 50]),
zoom: 2
})
});
var vectorSource = new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([16.37, 48.2])),
name: 'London'
}),
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.13, 51.51])),
name: 'NY'
}),
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([30.69, 55.21])),
name: 'Paris'
})
]
});
var markers = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
image: new ol.style.Icon({
src: '//openlayers.org/en/v3.12.1/examples/data/icon.png',
anchor: [0.5, 1]
})
})
});
map.addLayer(markers);
function showpopup(){
// For showing popups on Map
var arrayData = [1];
showInfoOnMap(map,arrayData,1);
function showInfoOnMap(map, arrayData, flag) {
var flag = 'show';
var extent = map.getView().calculateExtent(map.getSize());
var id = 0;
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'center'
});
map.addOverlay(popup);
if (arrayData != null && arrayData.length > 0) {
arrayData.forEach(function(vectorSource) {
/* logMessage('vectorSource >> ' + vectorSource); */
if (vectorSource != null && markers.getSource().getFeatures() != null && markers.getSource().getFeatures().length > 0) {
markers.getSource().forEachFeatureInExtent(extent, function(feature) {
/* logMessage('vectorSource feature >> ' + feature); */
console.log("vectorSource feature >> " + markers.getSource().getFeatures());
if (flag == 'show') {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
popup.setPosition(coord);
/* var prop;
var vyprop = ""; */
$(element).popover({
'position': 'center',
'placement': 'top',
'template':'<div class="popover"><div class="popover-content"></div></div>',
'html': true,
'content': function() {
var string = [];
var st = feature.U.name;
if (st != null && st.length > 0) {
var arrayLength = 1;
string = "<table>";
string += '<tr><td>' + st + "</table>";
}
return string;
}
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
}
});
}
};
}
I used this code in my file but it show only one popup on all markers please someone tell me how to show all markers popup simultaneously.
I'm not sure exactly what you're trying to show in your popups, but I would probably try this approach. This extends the ol.Overlay class, allowing you to get the map object and attach a listener which you can use to grab the feature that was clicked. Is this what you're trying to accomplish?
function PopupOverlay() {
var element = document.createElement('div');
$(element).popover({
template: '<div class="popover"><div class="popover-content"></div></div>',
placement: 'top',
position: 'center',
html: true
});
ol.Overlay.call(this, {
element: element
});
}
ol.inherits(PopupOverlay, ol.Overlay);
PopupOverlay.prototype.setMap = function (map) {
var self = this;
map.on('singleclick', function (e) {
map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
ol.Overlay.prototype.setPosition.call(self, feature.getGeometry().getCoordinates());
var el = self.getElement();
$(el).data('bs.popover').options.content = function () {
// EDIT THE POPOVER CONTENT
return feature.get('name');
};
$(el).popover('show');
});
});
ol.Overlay.prototype.setMap.call(this, map);
};
Check out this example
So after your comment, I see what you're trying to do now. I would say that you want to take the same basic approach, make a class that overrides ol.Overlay, but this time just loop through all the features, creating an overlay for each feature.
This Updated Example
function PopoverOverlay(feature, map) {
this.feature = feature;
var element = document.createElement('div');
$(element).popover({
template: '<div class="popover"><div class="popover-content"></div></div>',
placement: 'top',
position: 'center',
html: true
});
ol.Overlay.call(this, {
element: element,
map: map
});
};
ol.inherits(PopoverOverlay, ol.Overlay);
PopoverOverlay.prototype.togglePopover = function () {
ol.Overlay.prototype.setPosition.call(this, this.feature.getGeometry().getCoordinates());
var self = this;
var el = this.getElement();
$(el).data('bs.popover').options.content = function () {
// EDIT THE POPOVER CONTENT
return self.feature.get('name');
};
$(el).popover('toggle');
};
// create overlays for each feature
var overlays = (function createOverlays () {
var popupOverlays = [];
vectorSource.getFeatures().forEach(function (feature) {
var overlay = new PopoverOverlay(feature, map);
popupOverlays.push(overlay);
map.addOverlay(overlay);
});
return popupOverlays;
})();
// on click, toggle the popovers
map.on('singleclick', function () {
for(var i in overlays) {
overlays[i].togglePopover();
}
});
Now when you click anywhere on the map, it should call the togglePopover method and toggle the popover on the individual element.

Lightbox2 rotate not working

Does anyone have a sample project for lightbox2 rotate? I have applied all the javascript and css for this example http://jsfiddle.net/pootie/EBLc7/
and the rotate button never seems to show. What am I missing please help me
HTML CODE:
<img src="http://grgichtran.com/code/img/car-seat.jpg" class="img-polaroid" style="width: 100px;"/>
JS CODE:
(function () {
var $, Lightbox, LightboxOptions;
$ = jQuery;
LightboxOptions = (function () {
function LightboxOptions() {
this.fadeDuration = 500;
this.fitImagesInViewport = true;
this.resizeDuration = 700;
this.showImageNumberLabel = true;
this.wrapAround = false;
}
LightboxOptions.prototype.albumLabel = function (curImageNum, albumSize) {
return "Image " + curImageNum + " of " + albumSize;
};
return LightboxOptions;
})();
Lightbox = (function () {
function Lightbox(options) {
this.options = options;
this.album = [];
this.currentImageIndex = void 0;
this.init();
}
Lightbox.prototype.init = function () {
this.enable();
return this.build();
};
Lightbox.prototype.enable = function () {
var _this = this;
return $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function (e) {
_this.start($(e.currentTarget));
return false;
});
};
Lightbox.prototype.build = function () {
var _this = this;
$("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a><a class='lb-rotate'></a></div></div></div></div>").appendTo($('body'));
this.$lightbox = $('#lightbox');
this.$overlay = $('#lightboxOverlay');
this.$outerContainer = this.$lightbox.find('.lb-outerContainer');
this.$container = this.$lightbox.find('.lb-container');
this.containerTopPadding = parseInt(this.$container.css('padding-top'), 10);
this.containerRightPadding = parseInt(this.$container.css('padding-right'), 10);
this.containerBottomPadding = parseInt(this.$container.css('padding-bottom'), 10);
this.containerLeftPadding = parseInt(this.$container.css('padding-left'), 10);
this.$overlay.hide().on('click', function () {
_this.end();
return false;
});
this.$lightbox.hide().on('click', function (e) {
if ($(e.target).attr('id') === 'lightbox') {
_this.end();
}
return false;
});
this.$outerContainer.on('click', function (e) {
if ($(e.target).attr('id') === 'lightbox') {
_this.end();
}
return false;
});
this.$lightbox.find('.lb-prev').on('click', function () {
if (_this.currentImageIndex === 0) {
_this.changeImage(_this.album.length - 1);
} else {
_this.changeImage(_this.currentImageIndex - 1);
}
return false;
});
this.$lightbox.find('.lb-next').on('click', function () {
if (_this.currentImageIndex === _this.album.length - 1) {
_this.changeImage(0);
} else {
_this.changeImage(_this.currentImageIndex + 1);
}
return false;
});
this.$lightbox.find('.lb-rotate').on('click', function () {
$cont = _this.$lightbox.find('.lb-outerContainer');
$image = _this.$lightbox.find('.lb-image');
if ($($cont).attr('angle') == null) {
$($cont).attr('angle', 0);
}
var value = Number($($cont).attr('angle'));
value += 90;
$($cont).rotate({
animateTo: value
});
$($cont).attr('angle', value);
return false;
});
return this.$lightbox.find('.lb-loader, .lb-close').on('click', function () {
_this.end();
return false;
});
};
Lightbox.prototype.start = function ($link) {
var $window, a, dataLightboxValue, i, imageNumber, left, top, _i, _j, _len, _len1, _ref, _ref1;
$(window).on("resize", this.sizeOverlay);
$('select, object, embed').css({
visibility: "hidden"
});
this.$overlay.width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
this.album = [];
imageNumber = 0;
dataLightboxValue = $link.attr('data-lightbox');
if (dataLightboxValue) {
_ref = $($link.prop("tagName") + '[data-lightbox="' + dataLightboxValue + '"]');
for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
a = _ref[i];
this.album.push({
link: $(a).attr('href'),
title: $(a).attr('title')
});
if ($(a).attr('href') === $link.attr('href')) {
imageNumber = i;
}
}
} else {
if ($link.attr('rel') === 'lightbox') {
this.album.push({
link: $link.attr('href'),
title: $link.attr('title')
});
} else {
_ref1 = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
for (i = _j = 0, _len1 = _ref1.length; _j < _len1; i = ++_j) {
a = _ref1[i];
this.album.push({
link: $(a).attr('href'),
title: $(a).attr('title')
});
if ($(a).attr('href') === $link.attr('href')) {
imageNumber = i;
}
}
}
}
$window = $(window);
top = $window.scrollTop() + $window.height() / 10;
left = $window.scrollLeft();
this.$lightbox.css({
top: top + 'px',
left: left + 'px'
}).fadeIn(this.options.fadeDuration);
this.changeImage(imageNumber);
};
Lightbox.prototype.changeImage = function (imageNumber) {
var $image, preloader,
_this = this;
this.disableKeyboardNav();
$image = this.$lightbox.find('.lb-image');
this.sizeOverlay();
this.$overlay.fadeIn(this.options.fadeDuration);
$('.lb-loader').fadeIn('slow');
this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
this.$outerContainer.addClass('animating');
preloader = new Image();
preloader.onload = function () {
var $preloader, imageHeight, imageWidth, maxImageHeight, maxImageWidth, windowHeight, windowWidth;
$image.attr('src', _this.album[imageNumber].link);
$preloader = $(preloader);
$image.width(preloader.width);
$image.height(preloader.height);
if (_this.options.fitImagesInViewport) {
windowWidth = $(window).width();
windowHeight = $(window).height();
maxImageWidth = windowWidth - _this.containerLeftPadding - _this.containerRightPadding - 20;
maxImageHeight = windowHeight - _this.containerTopPadding - _this.containerBottomPadding - 110;
if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
imageWidth = maxImageWidth;
imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
$image.width(imageWidth);
$image.height(imageHeight);
} else {
imageHeight = maxImageHeight;
imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
$image.width(imageWidth);
$image.height(imageHeight);
}
}
}
return _this.sizeContainer($image.width(), $image.height());
};
preloader.src = this.album[imageNumber].link;
this.currentImageIndex = imageNumber;
};
Lightbox.prototype.sizeOverlay = function () {
return $('#lightboxOverlay').width($(document).width()).height($(document).height());
};
Lightbox.prototype.sizeContainer = function (imageWidth, imageHeight) {
var newHeight, newWidth, oldHeight, oldWidth,
_this = this;
oldWidth = this.$outerContainer.outerWidth();
oldHeight = this.$outerContainer.outerHeight();
newWidth = imageWidth + this.containerLeftPadding + this.containerRightPadding;
newHeight = imageHeight + this.containerTopPadding + this.containerBottomPadding;
this.$outerContainer.animate({
width: newWidth,
height: newHeight
}, this.options.resizeDuration, 'swing');
setTimeout(function () {
_this.$lightbox.find('.lb-dataContainer').width(newWidth);
_this.$lightbox.find('.lb-prevLink').height(newHeight);
_this.$lightbox.find('.lb-nextLink').height(newHeight);
_this.showImage();
}, this.options.resizeDuration);
};
Lightbox.prototype.showImage = function () {
this.$lightbox.find('.lb-loader').hide();
this.$lightbox.find('.lb-image').fadeIn('slow');
this.updateNav();
this.updateDetails();
this.preloadNeighboringImages();
this.enableKeyboardNav();
};
Lightbox.prototype.updateNav = function () {
this.$lightbox.find('.lb-nav').show();
if (this.album.length > 1) {
if (this.options.wrapAround) {
this.$lightbox.find('.lb-prev, .lb-next').show();
} else {
if (this.currentImageIndex > 0) {
this.$lightbox.find('.lb-prev').show();
}
if (this.currentImageIndex < this.album.length - 1) {
this.$lightbox.find('.lb-next').show();
}
}
}
};
Lightbox.prototype.updateDetails = function () {
var _this = this;
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
this.$lightbox.find('.lb-caption').html(this.album[this.currentImageIndex].title).fadeIn('fast');
}
if (this.album.length > 1 && this.options.showImageNumberLabel) {
this.$lightbox.find('.lb-number').text(this.options.albumLabel(this.currentImageIndex + 1, this.album.length)).fadeIn('fast');
} else {
this.$lightbox.find('.lb-number').hide();
}
this.$outerContainer.removeClass('animating');
this.$lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function () {
return _this.sizeOverlay();
});
};
Lightbox.prototype.preloadNeighboringImages = function () {
var preloadNext, preloadPrev;
if (this.album.length > this.currentImageIndex + 1) {
preloadNext = new Image();
preloadNext.src = this.album[this.currentImageIndex + 1].link;
}
if (this.currentImageIndex > 0) {
preloadPrev = new Image();
preloadPrev.src = this.album[this.currentImageIndex - 1].link;
}
};
Lightbox.prototype.enableKeyboardNav = function () {
$(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this));
};
Lightbox.prototype.disableKeyboardNav = function () {
$(document).off('.keyboard');
};
Lightbox.prototype.keyboardAction = function (event) {
var KEYCODE_ESC, KEYCODE_LEFTARROW, KEYCODE_RIGHTARROW, key, keycode;
KEYCODE_ESC = 27;
KEYCODE_LEFTARROW = 37;
KEYCODE_RIGHTARROW = 39;
keycode = event.keyCode;
key = String.fromCharCode(keycode).toLowerCase();
if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) {
this.end();
} else if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
if (this.currentImageIndex !== 0) {
this.changeImage(this.currentImageIndex - 1);
}
} else if (key === 'n' || keycode === KEYCODE_RIGHTARROW) {
if (this.currentImageIndex !== this.album.length - 1) {
this.changeImage(this.currentImageIndex + 1);
}
}
};
Lightbox.prototype.end = function () {
this.disableKeyboardNav();
$(window).off("resize", this.sizeOverlay);
this.$lightbox.fadeOut(this.options.fadeDuration);
this.$overlay.fadeOut(this.options.fadeDuration);
return $('select, object, embed').css({
visibility: "visible"
});
};
return Lightbox;
})();
$(function () {
var lightbox, options;
options = new LightboxOptions();
return lightbox = new Lightbox(options);
});
}).call(this);
I'm not sure what your question is; please allow me to confirm that after applying the code in your project,
the lightbox shows up properly, but rotate button doesn't
nothing special shows up. Neither lightbox, nor rotate button show up.
If your question is the first one, please check if the rotate button image (rotate.png) is placed in proper path. From the css file, this image should be put in img/ folder.
From this sample's css, rotate.png should be here:
background: url(../img/rotate.png) top right no-repeat;
On the other hand, if your question is second one, please check all files (js/css/images) exist and are in correct path, especially css and images.

SoundManager 2 Slider UI while sliding not changing anything - Wordpress

I have a problem with plugin SoundManager + Slider jquery UI - this one works as volume/current position changer while playing music.
After page is loaded, sometimes (i think it depends on file size) volume and current position are works fine, but if file are too huge, slider is loading properly (no errors in console) but not changing anything.
<?php
// In page Javascript
function audio_player_javascript () {
?>
<script>
var AudioPlayerDebugMode = true;
var songPlays = 0;
function AudioPlayerConsole (message) {
if (AudioPlayerDebugMode == true)
console.log(message);
}
function convertMilliseconds (ms, p) {
var pattern = p || "hh:mm:ss",
arrayPattern = pattern.split(":"),
clock = [ ],
hours = Math.floor ( ms / 3600000 ), // 1 Hour = 36000 Milliseconds
minuets = Math.floor (( ms % 3600000) / 60000), // 1 Minutes = 60000 Milliseconds
seconds = Math.floor ((( ms % 360000) % 60000) / 1000) // 1 Second = 1000 Milliseconds
// build the clock result
function createClock(unit){
// match the pattern to the corresponding variable
if (pattern.match(unit)) {
if (unit.match(/h/)) {
addUnitToClock(hours, unit);
}
if (unit.match(/m/)) {
addUnitToClock(minuets, unit);
}
if (unit.match(/s/)) {
addUnitToClock(seconds, unit);
};
}
}
function addUnitToClock(val, unit){
if ( val < 10 && unit.length === 2) {
val = "0" + val;
}
clock.push(val); // push the values into the clock array
}
// loop over the pattern building out the clock result
for ( var i = 0, j = arrayPattern.length; i < j; i ++ ){
createClock(arrayPattern[i]);
}
return {
hours : hours,
minuets : minuets,
seconds : seconds,
clock : clock.join(":")
};
}
<?php
$detect = new Mobile_Detect();
if ($detect->isMobile())
{
?>
setTimeout(function () {jQuery(".audio-player-toggle").trigger("click");}, 1000);
<?php
}
if (get_option("audio_player_autoplay_plugin") == "yes")
{
?>
setTimeout(function () { jQuery("#play-pause-button").trigger("click"); }, 1000);
<?php
}
?>
jQuery(function() {
soundManager.url = "<?php echo plugins_url('/js/soundmanager/swf', __FILE__);?>";
// Hide audio player
jQuery(".audio-player-toggle.open").live("click", function (e) {
jQuery(".audio-player-container").animate({
bottom: '-' + jQuery(".audio-player-container").height() + 'px'
}, 300, function () {
jQuery(".audio-player-toggle").removeClass("open");
jQuery(".audio-player-toggle").addClass("closed");
});
});
// Show audio player
jQuery(".audio-player-toggle.closed").live("click", function (e) {
jQuery(".audio-player-container").animate({
bottom: '0px'
}, 300, function () {
jQuery(".audio-player-toggle").removeClass("closed");
jQuery(".audio-player-toggle").addClass("open");
});
});
jQuery( "#position-scrubber" ).slider({
range: "max",
min: 0,
max: 0,
value: 0,
slide: function( event, ui ) {
}
});
if (navigator.mimeTypes ["application/x-shockwave-flash"] != undefined)
{
// Set volume range if browser has Flash enabled
jQuery( "#volume-scrubber" ).slider({
range: "max",
min: 0,
max: 100,
value: 50,
slide: function( event, ui ) {
}
});
}
else
{
// Set volume range if browser doesn't have Flash enabled
jQuery( "#volume-scrubber" ).slider({
range: "max",
min: 0,
max: 1,
value: 0.5,
step: 0.01,
slide: function( event, ui ) {
}
});
}
jQuery(".audio-controls-container a").click(function (e) {
e.preventDefault();
});
var htmlSound = new Audio ();
// Set first song in playlist to be played
jQuery(".playlist_item:first").addClass("current");
var firstSong;
var mySound;
// Find playlist item with current class
firstSong = jQuery(".playlist_item:first").attr("data-song_file");
jQuery("#play-pause-button").live("click", function (e) {
AudioPlayerConsole(songPlays);
if (songPlays == 0)
{
playAudio(firstSong);
jQuery(this).addClass("playing");
}
else
{
// Pause music if it has playing class
if (jQuery(this).hasClass("playing"))
{
AudioPlayerConsole("stop playing");
jQuery(this).removeClass("playing");
if (navigator.mimeTypes["application/x-shockwave-flash"] != undefined)
mySound.pause('audio-player');
else
htmlSound.pause();
return;
}
else
{
AudioPlayerConsole("start playing");
jQuery(this).addClass("playing");
if (navigator.mimeTypes ["application/x-shockwave-flash"] != undefined)
mySound.resume('audio-player');
else
htmlSound.play();
return;
}
}
});
jQuery("#next-button").live("click", function (e) {
var thisSongFile = jQuery(".playlist_item.current").next(".playlist_item").attr("data-song_file");
if(!thisSongFile)
{
jQuery(".playlist_item").removeClass("current");
jQuery(".playlist_item:first").addClass("current");
thisSongFile = jQuery(".playlist_item:first").attr("data-song_file");
playAudio(thisSongFile);
}
else
{
console.log(thisSongFile);
var foundCurrent = false;
jQuery(".playlist_item").each(function () {
if (foundCurrent == true)
{
jQuery(this).addClass("current");
foundCurrent = false;
return;
}
if (jQuery(this).hasClass("current"))
{
jQuery(this).removeClass("current");
foundCurrent = true;
}
});
playAudio(thisSongFile);
}
});
jQuery("#previous-button").live("click", function (e) {
var thisSongFile = jQuery(".playlist_item.current").prev(".playlist_item").attr("data-song_file");
if(!thisSongFile)
{
jQuery(".playlist_item").removeClass("current");
jQuery(".playlist_item:first").addClass("current");
thisSongFile = jQuery(".playlist_item:first").attr("data-song_file");
playAudio(thisSongFile);
}
else
{
var foundCurrent = false;
jQuery(".playlist_item").each(function () {
if (jQuery(this).hasClass("current"))
{
jQuery(this).removeClass("current");
jQuery(this).prev(".playlist_item").addClass("current");
}
});
playAudio(thisSongFile);
}
});
// Load album track preview into audio player
jQuery(".track-preview").live("click", function (e) {
e.preventDefault();
var thisSongFile = jQuery(this).attr("data-song_file");
var thisSongArtist = jQuery(this).attr("data-song_artist");
var thisSongTitle = jQuery(this).attr("data-song_title");
var isInPlaylist = false;
// Determine if selected song is already in playlist
jQuery(".playlist_item").each(function () {
// Get title and artist of playing song
var songTitle = jQuery(this).attr("data-song_title");
var songArtist = jQuery(this).attr("data-song_artist");
if (thisSongArtist == songArtist && thisSongTitle == songTitle)
{
jQuery(".playlist_item").removeClass("current");
jQuery(this).addClass("current");
isInPlaylist = true;
}
});
if (isInPlaylist == true)
{
playAudio(thisSongFile);
}
else
{
jQuery(".playlist_item").removeClass("current");
var newPlaylistItem = '<li class="playlist_item current" song_title="' + thisSongTitle + '" song_artwork="" song_file="' + thisSongFile + '" song_artist="' + thisSongArtist + '"></li>';
jQuery("#audio-player-playlist").append(newPlaylistItem);
playAudio(thisSongFile);
}
});
function playAudio (songFile) {
songPlays++;
AudioPlayerConsole("Loading " + songFile);
if (navigator.mimeTypes ["application/x-shockwave-flash"] != undefined)
{
soundManager.onready(function() {
soundManager.destroySound('audio-player');
mySound = soundManager.createSound({
id:'audio-player',
url: songFile,
onload: function() {
var duration = mySound.duration;
jQuery( "#position-scrubber" ).slider("option", "max", duration);
var durationTime = convertMilliseconds(duration, "mm:ss");
jQuery("#total-track-time").html(durationTime.clock);
jQuery( "#position-scrubber" ).bind( "slide", function(event, ui) {
mySound.setPosition(ui.value);
});
// Show pause button
jQuery("#play-pause-button").addClass("playing");
},
whileplaying: function() {
var position = mySound.position;
var positionTime = convertMilliseconds(position, "mm:ss");
jQuery("#current-track-time").html(positionTime.clock);
jQuery( "#position-scrubber" ).slider("option", "value", position/1000);
var volume = jQuery( "#volume-scrubber" ).slider("option", "value");
mySound.setVolume(volume);
},
whileloading: function() {
var duration = mySound.duration;
var durationTime = convertMilliseconds(duration, "mm:ss");
jQuery("#total-track-time").html(durationTime.clock);
},
onfinish: function() {
// Play next song in playlist
setTimeout(function () {jQuery("#next-button").trigger("click");}, 300);
}
});
// End soundManager.createSound
mySound.play();
});
jQuery("#play-pause-button").addClass("playing");
}
// End if (navigator.mimeTypes ["application/x-shockwave-flash"] != undefined)
else
// Player will use HTML5
{
htmlSound.src = songFile;
htmlSound.load();
jQuery( "#position-scrubber" ).bind( "slide", function(event, ui) {
htmlSound.currentTime = ui.value;
});
htmlSound.addEventListener("timeupdate", function() {
var newVolume = jQuery( "#volume-scrubber" ).slider("option", "value");
htmlSound.volume = newVolume;
var duration = htmlSound.duration * 1000;
var durationTime = convertMilliseconds(duration, "mm:ss");
jQuery("#total-track-time").html(durationTime.clock );
var position = htmlSound.currentTime * 1000;
var positionTime = convertMilliseconds(position, "mm:ss");
jQuery("#current-track-time").html(positionTime.clock );
jQuery( "#position-scrubber" ).slider("option", "max", duration/1000);
jQuery( "#position-scrubber" ).slider("option", "value", position/1000);
});
htmlSound.addEventListener("ended", function() {
setTimeout(function () {jQuery("#next-button").trigger("click");}, 300);
});
htmlSound.play();
jQuery("#play-pause-button").addClass("playing");
}
// End Player will use HTML5
jQuery(".playlist_item").each(function () {
if (jQuery(this).hasClass("current"))
{
// Set title, artist, and artwork of playing song
var songArtwork = jQuery(this).attr("data-song_artwork");
var songTitle = jQuery(this).attr("data-song_title");
var songArtist = jQuery(this).attr("data-song_artist");
if (songArtwork != "")
{
jQuery(".audio-player-artwork img").attr("src", songArtwork);
jQuery(".audio-player-artwork").show();
}
else
{
jQuery(".audio-player-artwork img").attr("src", "");
jQuery(".audio-player-artwork").hide();
}
jQuery(".audio-player-song-title").html(songTitle);
jQuery(".audio-player-song-artist").html(songArtist);
}
});
}
// End playAudio()
});
</script>

Google Map Tooltip

I wonder whether someone may be able to help me please.
I've been working on a tooltip for markers that I place on a google map. I can get this to work showing the information that I would like the user to see, in this case the fields name and address, so the code line is title: name+address.
Could someone please tell me how I could put a space between these so the tooltip would read 'name address' rather than 'nameaddress'.
I've tried all sorts of things using e.g.title: name'_'+ address, title: name' '+address and I can't get it to work.
Any help would be greatly appreciated.
Many thanks
Chris
You can try this
name + ' ' + address
NB: you need a space in the quotes and a + on either side.
I use this function to initialize started values:
//Inicialize map values
function initialize() {
latCenterMap=41.50347;
lonCenterMap=-5.74638;
zommCeneterMap=14;
latPoint=41.50347;
lonPoint=-5.74638;
//Values default initialize
var latlng = new google.maps.LatLng(latCenterMap, lonCenterMap);
var mapOptions = {
zoom: zommCeneterMap,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas_'), mapOptions);
codePoint(map, lat, lon);
}
I used this function to set values point position into map
//Get position by Latitude and Longitude
function codePoint(map, lat, lon) {
var latlng = new google.maps.LatLng(parseFloat(lat), parseFloat(lon));
var title = "Your text";
var iconPoint = new google.maps.MarkerImage('images/pointBlue.png',
//Measure image
new google.maps.Size(25,25),
new google.maps.Point(0,0),
//Half measure image
new google.maps.Point(12.5,12.5)
);
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: iconPoint,
tooltip: title
});
customTooltip(marker);
}
I use this function to create a tooltip to point position
//TOOLTIP
function customTooltip(marker){
// Constructor function
function Tooltip(opts, marker) {
// Initialization
this.setValues(opts);
this.map_ = opts.map;
this.marker_ = marker;
var div = this.div_ = document.createElement("div");
// Class name of div element to style it via CSS
div.className = "tooltip";
this.markerDragging = false;
}
Tooltip.prototype = {
// Define draw method to keep OverlayView happy
draw: function() {},
visible_changed: function() {
var vis = this.get("visible");
this.div_.style.visibility = vis ? "visible" : "hidden";
},
getPos: function(e) {
var projection = this.getProjection();
// Position of mouse cursor
var pixel = projection.fromLatLngToDivPixel(e.latLng);
var div = this.div_;
// Adjust the tooltip's position
var gap = 15;
var posX = pixel.x + gap;
var posY = pixel.y + gap;
var menuwidth = div.offsetWidth;
// Right boundary of the map
var boundsNE = this.map_.getBounds().getNorthEast();
boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE);
if (menuwidth + posX > boundsNE.pixel.x) {
posX -= menuwidth + gap;
}
div.style.left = posX + "px";
div.style.top = posY + "px";
if (!this.markerDragging) {
this.set("visible", true);
}
},
// This is added to avoid using listener (Listener is not working when Map is quickly loaded with icons)
getPos2: function(latLng) {
var projection = this.getProjection();
// Position of mouse cursor
var pixel = projection.fromLatLngToDivPixel(latLng);
var div = this.div_;
// Adjust the tooltip's position
var gap = 5;
var posX = pixel.x + gap;
var posY = pixel.y + gap;
var menuwidth = div.offsetWidth;
// Right boundary of the map
var boundsNE = this.map_.getBounds().getNorthEast();
boundsNE.pixel = projection.fromLatLngToDivPixel(boundsNE);
if (menuwidth + posX > boundsNE.pixel.x) {
posX -= menuwidth + gap;
}
div.style.left = posX + "px";
div.style.top = posY + "px";
if (!this.markerDragging) {
this.set("visible", true);
}
},
addTip: function() {
var me = this;
var g = google.maps.event;
var div = me.div_;
div.innerHTML = me.get("text").toString();
// Tooltip is initially hidden
me.set("visible", false);
// Append the tooltip's div to the floatPane
me.getPanes().floatPane.appendChild(this.div_);
// In IE this listener gets randomly lost after it's been cleared once.
// So keep it out of the listeners array.
g.addListener(me.marker_, "dragend", function() {
me.markerDragging = false; });
// Register listeners
me.listeners = [
// g.addListener(me.marker_, "dragend", function() {
// me.markerDragging = false; }),
g.addListener(me.marker_, "position_changed", function() {
me.markerDragging = true;
me.set("visible", false); }),
g.addListener(me.map_, "mousemove", function(e) {
me.getPos(e); })
];
},
removeTip: function() {
// Clear the listeners to stop events when not needed.
if (this.listeners) {
for (var i = 0, listener; listener = this.listeners[i]; i++) {
google.maps.event.removeListener(listener);
}
delete this.listeners;
}
// Remove the tooltip from the map pane.
var parent = this.div_.parentNode;
if (parent) parent.removeChild(this.div_);
}
};
function inherit(addTo, getFrom) {
var from = getFrom.prototype; // prototype object to get methods from
var to = addTo.prototype; // prototype object to add methods to
for (var prop in from) {
if (typeof to[prop] == "undefined") to[prop] = from[prop];
}
}
// Inherits from OverlayView from the Google Maps API
inherit(Tooltip, google.maps.OverlayView);
var tooltip = new Tooltip({map: map}, marker);
tooltip.bindTo("text", marker, "tooltip");
google.maps.event.addListener(marker, 'mouseover', function() {
tooltip.addTip();
tooltip.getPos2(marker.getPosition());
});
google.maps.event.addListener(marker, 'mouseout', function() {
tooltip.removeTip();
});
}
I use this style to css file
//CSS
.tooltip {
position:absolute;
top:0;
left:0;
z-index: 300;
width: 11.5em;
padding: 5px;
font-size: 12pt;
font-family: klavika;
color: #fff;
background-color: #04A2CA;
border-radius: 10px;
box-shadow: 2px 2px 5px 0 rgba(50, 50, 50, 0.75);
}

Resources