Add custom control to a Google Map that's a dropdown
and decided to put the time in to do it!
It should look like this:
My Box
Option 1
Option 2
Here's the code...I'll update to making it generically and with jQuery soon!
<!DOCTYPE html>
<html>
<head>
<title>Google Maps V3 style controls</title>
<style type="text/css">
.container{
width: 85px;
z-index: 1;
margin: 5px;
cursor: pointer;
text-align: left;
z-index: 0;
}
.dropDownControl{
direction: ltr;
overflow-x: hidden;
overflow-y: hidden;
text-align: left;
position: relative;
font-family: Arial, sans-serif;
-webkit-user-select: none;
font-size: 13px;
padding-top: 1px;
padding-right: 6px;
padding-bottom: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(113, 123, 135);
border-right-color: rgb(113, 123, 135);
border-bottom-color: rgb(113, 123, 135);
border-left-color: rgb(113, 123, 135);
border-image: initial;
-webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px;
box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px;
color: rgb(0, 0, 0);
padding-left: 6px;
font-weight: bold;
background-image: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgb(255, 255, 255);
background-position: initial initial;
background-repeat: initial initial;
z-index: 2;
}
.dropDownArrow{
-webkit-user-select: none;
border-width: 0px;
border-style: initial;
border-color: initial;
border-image: initial;
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
position: absolute;
right: 6px;
top: 50%;
margin-top: -2px;
width: 7px;
height: 4px;
}
.dropDownOptionsDiv{
background-color: white;
z-index: 0; /*need this to make the box look cool, but this stops the hover and title from working on items in the box! */
padding-top: 2px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: rgb(113, 123, 135);
border-bottom-color: rgb(113, 123, 135);
border-left-color: rgb(113, 123, 135);
border-image: initial;
border-top-width: 0px;
border-top-style: initial;
border-top-color: initial;
-webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px;
box-shadow: rgba(0, 0, 0, 0.398438) 0px 2px 4px;
position: relative;
text-align: left;
display: none;
}
.dropDownItemDiv{
font-family: Arial, sans-serif;
-webkit-user-select: none;
font-size: 13px;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: rgb(255, 255, 255);
color: black;
/*font-weight: bold;*/
}
.dropDownItemDiv:hover, .checkboxContainer:hover{
background-color: rgb(235, 235, 235);
z-index: 1;
}
.dropDownControl:hover{
background: -webkit-linear-gradient(top,rgb(255,255,255),rgb(230,230,230));
}
.separatorDiv{
margin-top: 1px;
margin-right: 0px;
margin-bottom: 1px;
margin-left: 0px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(235, 235, 235);
}
.checkboxContainer{
font-family: Arial, sans-serif;
-webkit-user-select: none;
font-size: 11px;
padding-top: 1px;
padding-bottom: 3px;
padding-left: 5px;
direction: ltr;
text-align: left;
background-color: rgb(255, 255, 255);
white-space: nowrap;
padding-right: 8px;
color: rgb(0, 0, 0);
}
.checkboxSpan{
box-sizing: border-box;
position: relative;
line-height: 0;
font-size: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
display: inline-block;
background-color: rgb(255, 255, 255);
border-width: 1px;
border-style: solid;
border-color: initial;
border-image: initial;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 1px;
width: 13px;
height: 13px;
vertical-align: middle;
-webkit-box-shadow: none;
box-shadow: none;
border-color: rgb(198, 198, 198);
}
.blankDiv{
position: absolute;
left: 1px;
top: -2px;
width: 13px;
height: 11px;
overflow-x: hidden;
overflow-y: hidden;
display: none; /*when = block -> this is the "check" symbol*/
}
.blankImg{
position: absolute;
left: -52px;
top: -44px;
-webkit-user-select: none;
border-width: 0px;
border-style: initial;
border-color: initial;
border-image: initial;
padding: 0px;
margin: 0px;
-webkit-user-drag: none;
width: 68px;
height: 67px;
}
.checkboxLabel{
vertical-align: middle;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="dropDownControl" id="ddControl" title="A custom drop down select with mixed elements" onclick="(document.getElementById('myddOptsDiv').style.display == 'block') ? document.getElementById('myddOptsDiv').style.display = 'none' : document.getElementById('myddOptsDiv').style.display = 'block';"">
My Box
<img class="dropDownArrow" src="http://maps.gstatic.com/mapfiles/arrow-down.png" />
</div>
<div class = "dropDownOptionsDiv" id="myddOptsDiv">
<div class = "dropDownItemDiv" id="mapOpt" title="This acts like a button or click event" onClick="alert('option1')">
Option 1
</div>
<div class = "dropDownItemDiv" id="satelliteOpt" title="This acts like a button or click event" onClick="alert('option2')">
Option 2
</div>
<div class="separatorDiv"></div>
<div class="checkboxContainer" title="This allows for multiple selection/toggling on/off" onclick="(document.getElementById('terrainCheck').style.display == 'block') ? document.getElementById('terrainCheck').style.display = 'none' : document.getElementById('terrainCheck').style.display = 'block';">
<span role="checkbox" class="checkboxSpan ">
<div class="blankDiv" id="terrainCheck">
<img class="blankImg" src="http://maps.gstatic.com/mapfiles/mv/imgs8.png" />
</div>
</span>
<label class="checkboxLabel">On/Off</label>
</div>
</div>
</div>
</body>
</html>
Hello Briana,
ReplyDeleteInitially, I want to thank you for sharing your great work.
I implemented this dropdown menu on my own maps but I need to have a way to check the checkboxes from Javascript and also an option to initialize these checkboxes checked by default.
I saw your answer on StackOverflow and I made one for this same query (http://stackoverflow.com/questions/19609756/google-maps-custom-dropdown-menu-with-checkboxes), but I wanted to show you on your own blog my thanks.
Regards
Ok, solved now :)
ReplyDeleteThe link to the solution is:
http://stackoverflow.com/questions/19609756/google-maps-custom-dropdown-menu-with-checkboxes/19725966#19725966
Thanks again, Briana!! :)