I have a google map and
I´m using a hacky solution for infowindows not to show up under a div that overlays the google map if a special user-interaction is done.
i execute this code after user-interaction :
var controlDiv = document.createElement('div');
controlDiv.style.width = '220px';
controlDiv.style.height = '500px';
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(controlDiv);
that works wonderfully, but if the user closes the overlay i want to remove the element i pushed into the array.
i tryed to splice it out, but i have no idea how to select it, or what it´s index is.
map.controls[google.maps.ControlPosition.RIGHT_TOP].splice("?", 1);
other possibility may be
delete map.controls[google.maps.ControlPosition.RIGHT_TOP]
but i just dont get the element removed
plesea help
thanks in advance
map.controls[google.maps.ControlPosition.RIGHT_TOP] isn't a native array, it's a google.maps.MVCArray
When you add only this single custom control to the array you may simply call:
map.controls[google.maps.ControlPosition.RIGHT_TOP].clear();
When there are more custom controls iterate over the controls to find the index of controlDiv and call
map.controls[google.maps.ControlPosition.RIGHT_TOP].removeAt(index);
Another approach: instead of adding/removing the control add the control once and toggle the display of controlDiv.
I found that the setAt() and removeAt() methods do not work well for map controls. Google only uses push() and clear() methods in their code samples.
Also, the display property may result in controls on top of each other after hiding and re-showing them. I found that the visibility property works best. Below a custom control constructor with google map style and a method to show/hide the control.
function CustomControl(options) { // constructor
"use strict";
this.div = document.createElement('div');
this.div.style.visibility = "visible";
var controlUI = document.createElement('div'); // Set CSS for the control border
controlUI.style.backgroundColor = '#fff';
controlUI.style.backgroundClip = 'padding-box';
controlUI.style.border = '1px solid rgba(0, 0, 0, 0.15)';
controlUI.style.borderRadius = '2px';
controlUI.style.boxShadow = 'rgba(0,0,0,.3) 0px 1px 4px -1px';
controlUI.style.cursor = 'pointer';
controlUI.style.margin = '5px 5px 15px';
controlUI.style.minWidth = '120px';
controlUI.style.textAlign = 'left';
controlUI.style.position = 'relative';
if (options.title) {
controlUI.title = options.title;
}
if (options.visibility) { // "visible" or "hidden"
controlUI.style.visibility = options.visibility;
}
this.div.appendChild(controlUI);
var controlText = document.createElement('div'); //Set CSS for the control interior
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '11px';
controlText.style.fontWeight = '500';
controlText.style.padding = '1px 6px';
if (options.text) {
controlText.innerHTML = options.text;
}
controlUI.appendChild(controlText);
if (options.index) {
this.div.index = options.index;
}
if (options.handler) {
google.maps.event.addDomListener(controlUI, 'click', options.handler);
}
if (options.position) {
this.position = options.position;
}
if (options.sequence) {
this.sequence = options.sequence;
}
this.setVisible = function(bolean) { // method
var visibility;
if (bolean) { //true
visibility = "visible";
} else {
visibility = "hidden";
}
controlUI.style.visibility = visibility;
}
}
Related
I have created two custom controlUIs in Google Maps based on existing default examples. They work nice but I realised they are displayed vertically:
But I want them displayed horizontally:
The CSS definintions for both custom Controls looks the same (except the image of course):
// Add marker control
var optionDiv = document.createElement('div');
// Same for second control UI (centerPlayer) but for simplicity reasons not added
var CenterMarker = new centerMarkerButton (optionDiv, this.map);
optionDiv.index = 1;
this.map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(optionDiv);
...
function centerMarkerButton (controlDiv, map) {
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '8px';
controlUI.style.marginRight = '10px';
controlUI.style.paddingTop = '3px';
controlUI.style.paddingLeft = '3px';
controlUI.style.paddingRight = '3px';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.innerHTML = '<a><img src="https://www....centermarker.svg" height="28px" width="28px"</a>';
controlUI.appendChild(controlText);
// Add click event listener
controlUI.addEventListener('click', function() {
instance.centerGame();
});
}
}
// Set CSS for the control border.
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '8px';
controlUI.style.marginRight = '10px';
controlUI.style.paddingTop = '3px';
controlUI.style.paddingLeft = '3px';
controlUI.style.paddingRight = '3px';
controlUI.style.paddingRight = '3px';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.innerHTML = '<a><img src="https://www..../centeruser.svg" height="28px" width="28px"</a>';
controlUI.appendChild(controlText);
Code analysis inside the displayed google maps in browser showed me there is a simple DIV around both custom Controls but it has no ID, so I can't access/modify it.
Anyone has an idea how I can set/display these two custom Controls vertically?
Dang, just found the answer by myself. I had to add these CSS styles to both controlUIs:
controlUI.style.cssFloat = 'left';
Now the controls appears horizontally (next to each other).
I created a chrome extension that inserts some html into a page (see screenshot below of how it looks...top right corner is the inserted HTML).
I want to create functionality such that when the user clicks the "Skip for now" text, the inserted HTML should disappear or be hidden. I'm having a difficult time doing that within my current code.
Inject.js gets called through this function:
chrome.tabs.executeScript(tab.ib, {
file: 'inject.js'
});
Inject.js (I'm not sure how to write a new function to hide all the elements that were created below and how to call that function from the HTML section at the bottom):
(function() {
// Create div
var div = document.createElement('div');
// Div styling
// Positioning
div.style.position = 'fixed';
div.style.boxSizing = 'border-box';
div.style.display = 'block';
div.style.zIndex = 10000000;
div.style.top = '20px';
div.style.right = '20px';
// Size
div.style.height = '130px';
div.style.width = '330px';
// Padding
div.style.paddingTop = '20px';
div.style.paddingBottom = '20px';
div.style.paddingLeft = '20px';
div.style.paddingRight = '20px';
div.style.borderRadius = '25px';
// Text
div.style.textAlign = 'center';
div.style.fontSize = '11px';
// Color
div.style.backgroundColor = '#505F69';
div.style.color = 'white';
div.style.border = '2px solid grey';
// HTML
div.innerHTML += '<u>Click to activate your To a Cause donation.</u><br><br>';
div.innerHTML += '<u>Skip for now</u>';
// Append
document.body.appendChild(div);
})();
You should create the skip button as an HTML node (like you did for the div) and append it to the div. Then you can do:
skipButton.onclick = () => {
document.body.removeChild(div);
};
Using the Yahoo Weather API.
When trying to set the style margins via JS, nothing happens.
Here is my script:
<script>
var cBackFunction = function (data) {
console.log(data);
var location = data.query.results.channel.location;
var condition = data.query.results.channel.item.condition;
var wind = data.query.results.channel.wind;
var units = data.query.results.channel.units;
var link = data.query.results.channel.link;
var lastUpdated = data.query.results.channel.lastBuildDate;
var conditionCode = condition.code;
var conditionText = condition.text;
var img = document.createElement("IMG");
img.src = "https://s.yimg.com/zz/combo?a/i/us/we/52/" + conditionCode + ".gif";
img.style.marginLeft = "140px";
document.getElementById('Weather-Description2').appendChild(img);
document.getElementById('Weather-Location2').innerHTML = location.city;
document.getElementById('Weather-Region2').innerHTML = location.region;
document.getElementById('Weather-Temp2').innerHTML = condition.temp;
document.getElementById('Weather-Unit2').innerHTML = units.temperature;
document.getElementById('Weather-WindSpeed2').innerHTML = wind.speed;
document.getElementById('Weather-Link2').href = link;
document.getElementById('lastUpdate2').innerHTML = lastUpdated;
document.getElementById('Weather-text2').innerHTML = "["+conditionText+"]";
document.getElementById('Weather-text2').style.marginLeft = 'auto'; //not working
document.getElementById('Weather-text2').style.marginRight = 'auto'; // not working
}
HTML:
<strong id="Weather-text2"></strong>
If I change the auto to a specific pixel like "100px" then it works.. can auto be used in JS for margins? The reason for auto on both marginLeft and marginRight is to auto-center the element. If so, how do I implement that correctly?
A <strong> element is, by default, display: inline.
Auto margins centre elements which are display: block (although since you would have width: auto as the default, this would have no practical effect unless you also reduced the width).
Set text-align: center on the nearest block ancestor element to centre the text.
I have the svg map with pins on it. I want to make the application that shows the description of the pin, when user put the mouse on it. The thing is, that the description should be in the mouse position. I've already done things like changing color onMouseOver and manipulate with all different css parameters. But I have problem with changing the div position.
In the same part of code when I put:
document.getElementById("test").style.color = "red";
the color is changing.
but when I do this:
document.getElementById("test").style.left = 500;
nothing happens.
I was trying with all those solution:
$("test").css({top: 200, left: 200});
and lots of others, but I have no idea why it doesnt work.
my jQuery code:
jQuery(document).ready(function() {
jQuery('img.svg').each(function(){
var mouseX;
var mouseY;
var $img = jQuery(this);
var imgURL = $img.attr('src');
jQuery.get(imgURL, function (data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Replace image with new SVG
$img.replaceWith($svg);
// Add an handler
jQuery('#pins path').each(function () {
jQuery(this).click(function () {
var post_slug = jQuery(this).attr('id');
var url = "http://127.0.0.1:8000/posts/post_slug".replace("post_slug", post_slug); //TODO
window.location = url;
});
jQuery(this).mouseover(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
var post_slug = jQuery(this).attr('id');
// using string concat due to name conficts with "path id" in svg map
//document.getElementById("popup_".concat(post_slug)).style.display = 'block';
document.getElementById("popup_".concat(post_slug)).style.top = mouseY;
document.getElementById("popup_".concat(post_slug)).style.left = mouseX;
document.getElementById("popup_".concat(post_slug)).style.color = "red";
});
jQuery(this).mouseout(function () {
var post_slug = jQuery(this).attr('id');
// using string concat due to name conficts with "path id" in svg map
document.getElementById("popup_".concat(post_slug)).style.display = 'none';
});
});
});
});
});
The divs are dynamically created according to objects in my django template.
for (var i = 0; i < pin_slugs.length; i++) {
var popup = document.createElement("div");
popup.id = "popup_".concat(pin_slugs[i]);
popup.title = pin_slugs[i];
popup.innerHTML = pin_slugs[i];
document.body.appendChild(popup);
}
I'm struggling with it for a long time. Can anyone help?
left, right, top, bottom properties will not work with default position value which is static. You should give position:absolute/relative. Best one to give in this scenario is absolute.
I solved it out. The solution was simple.
mouseX + "px";
and in my css I needed to put:
position: absolute;
I'm trying to create a control like the one on google maps to show different maps (Map, Satellite, Terrain). Basically, a button-like div that when I click it it displays a drop down list of checkboxes and a button. I can create the drop down list of checkboxes but I can't make the div to behave like that control of google maps.
What am I missing?
My list appears inside the "button" and not below.
Here is my code
function MyControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'left';
controlUI.title = 'Click to show';
controlDiv.appendChild(controlUI);
var dropdown = document.createElement('DIV');
dropdown.style.width = '100px';
var chkOne = document.createElement( "input" );
chkOne.type = "checkbox";
chkOne.id = "chkOne";
chkOne.value = "One";
chkOne.checked = false;
var lblOne = document.createElement('label')
lblOne.htmlFor = "chkOne";
lblOne.appendChild(document.createTextNode('One'));
var chkTwo = document.createElement( "input" );
chkTwo.type = "checkbox";
chkTwo.id = "chkTwo";
chkTwo.value = "Two";
chkTwo.checked = false;
var lblTwo = document.createElement('label')
lblTwo.htmlFor = "chkTwo";
lblTwo.appendChild(document.createTextNode('Two'));
var btnDone = document.createElement( "input" );
btnDone.type = "button";
btnDone.name = "btnDone";
btnDone.value = "Done";
dropdown.appendChild(chkOne);
dropdown.appendChild(lblOne);
dropdown.appendChild(document.createElement( "BR" ));
dropdown.appendChild(chkTwo);
dropdown.appendChild(lblTwo);
dropdown.appendChild(document.createElement( "BR" ));
dropdown.appendChild(btnDone);
controlUI.appendChild(dropdown);
google.maps.event.addDomListener(controlUI, 'click', function() {
dropdown.visible = true;
});
btnDone.addEventListener("click", showList, false);
function showList() {
dropdown.visible = false;
}
}
// Create the DIV to hold the control and call the HomeControl() constructor
// passing in this DIV.
var accidentsToShowDiv = document.createElement('DIV');
// Set CSS for the control border.
accidentsToShowDiv.style.backgroundColor = 'white';
accidentsToShowDiv.style.borderStyle = 'solid';
accidentsToShowDiv.style.borderWidth = '2px';
accidentsToShowDiv.style.cursor = 'pointer';
accidentsToShowDiv.style.textAlign = 'left';
accidentsToShowDiv.title = 'Accidents to Show';
var homeControl = new MyControl(accidentsToShowDiv, mainMap);
accidentsToShowDiv.index = 1;
mainMap.controls[google.maps.ControlPosition.TOP_RIGHT].push(accidentsToShowDiv);
You forgot to add boxshadow
controlUI.style.boxShadow = '0 1px 3px rgba(0,0,0,0.5)';