I've been attempting to create something similar to this.
However, I'm having trouble replicating it exactly.
What I've attempted
I've managed to create a replica, but the issue is that the buttons are fixed.
Could setting the left property in CSS make it possible?
If anyone can provide guidance on this, it would be greatly appreciated.
Thanks.
(function($) {
var map = new google.maps.Map(document.getElementById('new_map_canvas'), {
zoom: 4,
center: new google.maps.LatLng(57.658339,-102.918287),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
$("#store_").click(function(){
//$(".side_window_content").show("slide", { direction: "left" }, 1000 );
$(".side_window_content").slideToggle();
});
})(jQuery);#new_map_canvas{
border:5px solid;
}
#store_, #direction_{
position:absolute;
z-index:5;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.side_window, .side_window_content{
position:absolute;
z-index:6;
}
.side_window_content{
width:300px;
height:660px;
background:white;
display:none;
}
.side_window{
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="side_window_content">
<input type="text" id="searchStore" placeholder="Search address" />
</div>
<div class="side_window">
<input type="button" id="store_" value="Store" />
<input type="button" id="direction_" value="Direction" />
</div>
<div id="new_map_canvas" style="height:660px; width:auto;"></div>