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)';
Related
base = document.createElement('div');
document.body.append(base);
base.style.width = '100px';
base.style.height = '150px';
base.style.backgroundColor = 'black';
base.style.color = 'white';
base.style.opacity = '0.8';
base.style.borderRadius = '5px';
base.style.fontFamily = 'arial';
baseHeading = document.createElement('p');
document.body.base.append(baseHeading);
baseHeading.innerText = 'Controid';
My text is not showing like its supposed to. ALSO can I make the div draggable?
You have to append the p element to the div element, not the base element. Use this:
base = document.createElement('div');
document.body.append(base);
base.style.width = '100px';
base.style.height = '150px';
base.style.backgroundColor = 'black';
base.style.color = 'white';
base.style.opacity = '0.8';
base.style.borderRadius = '5px';
base.style.fontFamily = 'arial';
baseHeading = document.createElement('p');
base.append(baseHeading);
baseHeading.innerText = 'Controid';
I make a pop up form using java script and i'm kinda new in java script .
The pop up form has TextBox and a anchor .
Now my question is how can i call the on click event of the button and also get the button using c# code.
<script type="text/javascript">
function showBox() {
var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;
var layer = document.createElement('div');
layer.style.zIndex = 2;
layer.id = 'layer';
layer.style.position = 'absolute';
layer.style.top = '0px';
layer.style.left = '0px';
layer.style.height = document.documentElement.scrollHeight + 'px';
layer.style.width = width + 'px';
layer.style.backgroundColor = 'black';
layer.style.opacity = '.6';
layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=60)");
document.body.appendChild(layer);
var div = document.createElement('div');
div.style.zIndex = 3;
div.id = 'box';
div.style.position = (navigator.userAgent.indexOf('MSIE 6') > -1) ? 'absolute' : 'fixed';
div.style.top = '200px';
div.style.left = (width / 2) - (400 / 2) + 'px';
div.style.height = '100px';
div.style.width = '400px';
div.style.backgroundColor = 'white';
div.style.border = '2px solid silver';
div.style.padding = '20px';
document.body.appendChild(div);
var p = document.createElement('p');
p.innerHTML = 'Input BFG';
div.appendChild(p);
var b = document.createElement("INPUT")
b.placeholder = "BFG";
div.appendChild(b);
var a = document.createElement('a');
a.innerHTML = 'Close window';
a.href = 'javascript:void(0)';
a.id = "btnSave"
a.onclick = function () {
document.getElementById(a)
document.body.removeChild(document.getElementById('layer'));
document.body.removeChild(document.getElementById('box'));
};
div.appendChild(a);
}
</script>
Note: i don't have the html part of the popup form its created only using java script.
any help would be truly appreciated
I am trying to get my div element to the center of the screen that I have aligned to the center but the top margin is still stuck on the top and not centered.
I have tried divElement.style.marginTop = "100px"; but that didn't change anything.
//this is the javascript
function stopDesc(){
var divElement = document.createElement("Div");
divElement.id = "divID";
// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
//divElement.style.marginTop = "100px";
divElement.style.paddingTop = "100px";
divElement.style.width = "500px";
divElement.style.height = "250px";
divElement.style.background = "orange";
divElement.style.margin="0 auto";
divElement.style.color = "white";
divElement.style.position="relative";
divElement.style.zIndex="1000";
// Adding a paragraph
var paragraph = document.createElement("P");
var text =
document.createTextNode("Text..................................");
paragraph.appendChild(text);
divElement.appendChild(paragraph);
// Adding a button
var button = document.createElement("Button");
var textForButton = document.createTextNode("Next->");
button.appendChild(textForButton);
button.addEventListener("click", function(){
alert("Hi!");
});
divElement.appendChild(button);
// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);
//document.getElementById("divID").setAttribute('align','center');
}
Right now the div is centered but the top is stuck to the top of the screen and I want it in the center or at least 100px down from the top.
Edit this line:
divElement.style.margin="0 auto";
and make it:
divElement.style.margin="100px auto";
maybe you've added divElement.style.marginTop = "100px" above that line of code so that it was overriden.
var divElement = document.createElement("Div");
divElement.id = "divID";
// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
//divElement.style.marginTop = "100px";
divElement.style.paddingTop = "100px";
divElement.style.width = "500px";
divElement.style.height = "250px";
divElement.style.background = "orange";
divElement.style.margin="100px auto";
divElement.style.color = "white";
divElement.style.position="relative";
divElement.style.zIndex="1000";
// Adding a paragraph
var paragraph = document.createElement("P");
var text =
document.createTextNode("Text..................................");
paragraph.appendChild(text);
divElement.appendChild(paragraph);
// Adding a button
var button = document.createElement("Button");
var textForButton = document.createTextNode("Next->");
button.appendChild(textForButton);
button.addEventListener("click", function(){
alert("Hi!");
});
divElement.appendChild(button);
// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);
//document.getElementById("divID").setAttribute('align','center');
in my google map I have added a control that shows zoom level. But it isn't updating the value. I am using map.getZoom() function.
var divRef = document.createElement('div');
var ref = document.createElement("div");
ref.setAttribute("id", "ref");
divRef.appendChild(ref);
var controlText1 = document.createElement('div');
controlText1.className = "zoom";
var label1 = document.createElement('LABEL');
var t = document.createTextNode("zoom level ");
label1.setAttribute = ("for", "zoom");
label1.appendChild(t);
controlText1.appendChild(label1);
ref.appendChild(controlText1);
var tzoom = document.createTextNode(map.getZoom());
controlText1.appendChild(tzoom);
ref.appendChild(controlText1);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(divRef);
When the map is loaded for the first time it shows the zoom level control correctly but if I scroll o change zoom with the buttons, the value isn't updated.
How can I refresh controls ? or should I set this control in a different way?
Here's a fiddle with the control in the left_bottom corner. When I zoom in-out the value isn't updated.
https://jsfiddle.net/3b31qfsm/
use a 'zoom_changed' event listener to update the content of the control:
google.maps.event.addListener(map, 'zoom_changed', function() {
tzoom.textContent = map.getZoom();
});
proof of concept fiddle
code snippet:
var map;
var chicago = {
lat: 41.85,
lng: -87.65
};
function CenterControl(controlDiv, map) {
var divRef = document.createElement('div');
var ref = document.createElement("div");
ref.setAttribute("id", "ref");
divRef.appendChild(ref);
var controlText1 = document.createElement('div');
controlText1.className = "zoom";
var label1 = document.createElement('LABEL');
controlText1.style.color = 'red';
controlText1.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText1.style.fontSize = '16px';
controlText1.style.lineHeight = '38px';
controlText1.style.paddingLeft = '5px';
controlText1.style.paddingRight = '5px';
controlText1.style.backgroundColor = '#fff';
controlText1.style.border = '2px solid #fff';
controlText1.style.borderRadius = '3px';
controlText1.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
var t = document.createTextNode("zoom level ");
label1.setAttribute = ("for", "zoom");
label1.appendChild(t);
controlText1.appendChild(label1);
ref.appendChild(controlText1);
var tzoom = document.createTextNode(map.getZoom());
controlText1.appendChild(tzoom);
google.maps.event.addListener(map, 'zoom_changed', function() {
tzoom.textContent = map.getZoom();
})
ref.appendChild(controlText1);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(divRef);
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 = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI); // Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Center Map';
controlUI.appendChild(controlText); // Setup the click event listeners: simply set the map to Chicago.
controlUI.addEventListener('click', function() {
map.setCenter(chicago);
});
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: chicago
});
var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
I need to create a a text box between the route directions like in here :
For start i was thinking to add tooltip...but i can't place them in the middle of the route like in the picture, or set it's position to be relative.
You can create a custom overlay as described in the documentation:
https://developers.google.com/maps/documentation/javascript/customoverlays
The sample code snippet might be
function routeOverlay(point, map, content) {
this._point = point;
this._map = map;
this.div_ = null;
this._cnt = content;
this.setMap(map);
}
routeOverlay.prototype = new google.maps.OverlayView();
routeOverlay.prototype.onAdd = function () {
var div = document.createElement('div');
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px';
div.style.backgroundColor = 'white';
div.style.position = 'absolute';
div.style.padding = '4px';
div.style.zIndex = 1000;
div.innerHTML = this._cnt;
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
}
routeOverlay.prototype.draw = function () {
var overlayProjection = this.getProjection();
var p = overlayProjection.fromLatLngToDivPixel(this._point);
this.div_.style.left = p.x + 'px';
this.div_.style.top = p.y + 'px';
}
routeOverlay.prototype.onRemove = function () {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
routeOverlay.prototype.hide = function() {
if (this.div_) {
// The visibility property must be a string enclosed in quotes.
this.div_.style.visibility = 'hidden';
}
};
routeOverlay.prototype.show = function() {
if (this.div_) {
this.div_.style.visibility = 'visible';
}
};
Later in you code you should create this overlay. For example:
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var ind = (response.routes[0].overview_path.length - response.routes[0].overview_path.length % 2) / 2;
var rover = new routeOverlay(response.routes[0].overview_path[ind], map, 'Add your HTML here');
rover.show();
} else {
window.alert('Directions request failed due to ' + status);
}
I have modified your jsfiddle: http://jsfiddle.net/h54tmmcb/14/
You should create corresponding styles and corresponding content for the overlay.
Hope this helps!