Thursday, March 22, 2012

A Google Map Style Drop-Down

I had been wanting to make one of these for a while, saw this post on stack overflow:
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:











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>

2 comments:

  1. Hello Briana,

    Initially, 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

    ReplyDelete
  2. Ok, solved now :)

    The link to the solution is:

    http://stackoverflow.com/questions/19609756/google-maps-custom-dropdown-menu-with-checkboxes/19725966#19725966

    Thanks again, Briana!! :)

    ReplyDelete