Create similar google maps map control in javascript dynamically - javascript

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

My 'p' element is not appearing in my 'div' element that I appeanded it to, any solutions?

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';

Onclick event in c# using javascript archor tag

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

How to correctly use DOM style margin top property in javascript?

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');

Refresh google maps controls

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>

How to add a text box on google maps route?

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!

Categories