谷歌地图与响应边栏

Question

这是一个谷歌地图，我发现在这link。

我想知道如何实现一个负责任的侧边栏像这样的：

而且还有另一个不同的侧边栏

是否有人知道哪些功能是这个或如何执行它？类似于example。 我不能google maps docs

Answer 1

一种选择找到将修改example you link to把标记信息栏从the examples I linked to in my comments在其动态侧栏。

example

代码片段：

// arrays to hold copies of the markers and html used by the side_bar 
 
// because the function closure trick doesnt work there 
 
var gmarkers = []; 
 
var map = null; 
 

 
function initialize() { 
 
    var myWrapper = $("#wrapper"); 
 
    $("#menu-toggle").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#wrapper").toggleClass("toggled"); 
 
    myWrapper.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
 
     // code to execute after transition ends 
 
     google.maps.event.trigger(map, 'resize'); 
 
    }); 
 
    }); 
 
    // create the map 
 
    var myOptions = { 
 
    zoom: 8, 
 
    center: new google.maps.LatLng(43.907787, -79.359741), 
 
    mapTypeControl: true, 
 
    mapTypeControlOptions: { 
 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
 
    }, 
 
    navigationControl: true, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
 
    myOptions); 
 

 
    google.maps.event.addListener(map, 'click', function() { 
 
    infowindow.close(); 
 
    }); 
 

 
    // Add markers to the map 
 
    // Set up three markers with info windows 
 
    // add the points  
 
    var point = new google.maps.LatLng(43.65654, -79.90138); 
 
    var marker = createMarker(point, "This place", "Some stuff to display in the<br>First Info Window") 
 

 
    var point = new google.maps.LatLng(43.91892, -78.89231); 
 
    var marker = createMarker(point, "That place", "Some stuff to display in the<br>Second Info Window") 
 

 
    var point = new google.maps.LatLng(43.82589, -78.89231); 
 
    var marker = createMarker(point, "The other place", "Some stuff to display in the<br>Third Info Window") 
 
} 
 

 
var infowindow = new google.maps.InfoWindow({ 
 
    size: new google.maps.Size(150, 50) 
 
}); 
 

 
// This function picks up the click and opens the corresponding info window 
 
function myclick(i) { 
 
    google.maps.event.trigger(gmarkers[i], "click"); 
 
} 
 

 
// A function to create the marker and set up the event window function 
 
function createMarker(latlng, name, html) { 
 
    var contentString = html; 
 
    var marker = new google.maps.Marker({ 
 
    position: latlng, 
 
    map: map, 
 
    zIndex: Math.round(latlng.lat() * -100000) << 5 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infowindow.setContent(contentString); 
 
    infowindow.open(map, marker); 
 
    }); 
 
    // save the info we need to use later for the side_bar 
 
    gmarkers.push(marker); 
 
    // add a line to the side_bar html 
 
    var sidebar = $('#side_bar'); 
 
    var sidebar_entry = $('<li/>', { 
 
    'html': name, 
 
    'click': function() { 
 
     google.maps.event.trigger(marker, 'click'); 
 
    }, 
 
    'mouseenter': function() { 
 
     $(this).css('color', 'red'); 
 
    }, 
 
    'mouseleave': function() { 
 
     $(this).css('color', '#999999'); 
 
    } 
 
    }).appendTo(sidebar); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body { 
 
    height: 100%; 
 
} 
 
#map_canvas, 
 
#wrapper, 
 
#page-content-wrapper { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.container-fluid, 
 
.row, 
 
.col-lg-12 { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
} 
 
/* hamburger menu pseudo element */ 
 

 
.box-shadow-menu { 
 
    position: relative; 
 
    padding-left: 1.25em; 
 
} 
 
.box-shadow-menu:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0.25em; 
 
    width: 1em; 
 
    height: 0.15em; 
 
    background: black; 
 
    box-shadow: 0 0.25em 0 0 black, 0 0.5em 0 0 black; 
 
} 
 
/* hamburger menu pseudo element gradient */ 
 

 
.gradient-menu { 
 
    padding-left: 1.25em; 
 
    position: relative; 
 
} 
 
.gradient-menu:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0.21em; 
 
    bottom: 0.21em; 
 
    width: 1em; 
 
    background: linear-gradient(to bottom, black, black 20%, white 20%, white 40%, black 40%, black 60%, white 60%, white 80%, black 80%, black 100%); 
 
} 
 
/* http://www.jqueryscript.net/demo/Bootstrap-Sidebar-Extension-With-jQuery-CSS-CSS3/ */ 
 

 
/*! 
 
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com) 
 
* Code licensed under the Apache License v2.0. 
 
* For details, see http://www.apache.org/licenses/LICENSE-2.0. 
 
*/ 
 

 
/* Toggle Styles */ 
 

 
.nav-tabs>li { 
 
    float: none; 
 
} 
 
.nav-tabs { 
 
    border-bottom: 0; 
 
} 
 
.nav-tabs>li.active>a, 
 
.nav-tabs>li.active>a:focus, 
 
.nav-tabs>li.active>a:hover { 
 
    margin: 0; 
 
    border-radius: 0; 
 
} 
 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
#wrapper.toggled { 
 
    padding-left: 250px; 
 
} 
 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 250px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -250px; 
 
    overflow-y: auto; 
 
    background: #000; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 250px; 
 
} 
 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -250px; 
 
} 
 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 250px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #999999; 
 
} 
 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: rgba(255, 255, 255, 0.2); 
 
} 
 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 
.sidebar-nav > .sidebar-brand { 
 
    height: 65px; 
 
    font-size: 18px; 
 
    line-height: 60px; 
 
} 
 
.sidebar-nav > .sidebar-brand a { 
 
    color: #999999; 
 
} 
 
.sidebar-nav > .sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 
@media(min-width:768px) { 
 
    #wrapper { 
 
    padding-left: 250px; 
 
    } 
 
    #wrapper.toggled { 
 
    padding-left: 0; 
 
    } 
 
    #sidebar-wrapper { 
 
    width: 250px; 
 
    } 
 
    #wrapper.toggled #sidebar-wrapper { 
 
    width: 0; 
 
    } 
 
    #page-content-wrapper { 
 
    padding: 20px; 
 
    position: relative; 
 
    } 
 
    #wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0; 
 
    } 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="wrapper"> 
 
    <!-- Sidebar --> 
 
    <div id="sidebar-wrapper"> 
 
    <ul class="sidebar-nav" id="side_bar"> 
 
     <li class="sidebar-brand" style="font-weight: bold; color: #999999;"> 
 
     <h1>Places</h1> 
 
     </li> 
 
     <hr> 
 
    </ul> 
 
    </div> 
 
    <!-- /#sidebar-wrapper --> 
 
    <!-- Page Content --> 
 
    <div id="page-content-wrapper"> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-lg-12"> 
 
      <h1> 
 
\t  <a href="#menu-toggle" class="gradient-menu" id="menu-toggle"></a> 
 
      &nbsp;Map&nbsp;<!-- a href="#menu-toggle" class="btn btn-default" >Toggle Sidebar</a --> 
 
      </h1> 
 
      <!-- you can use tables or divs for the overall layout --> 
 
      <div id="map_canvas"></div> 
 
      <h1>Simple Sidebar</h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- /#page-content-wrapper --> 
 
</div> 
 
<!-- /#wrapper -->

Answer 2

我找到了解决办法。 这是一个创建和分享自定义地图的应用程序。 我没有时间在里面挖掘，但它似乎创建的目的是帮助那些不熟悉Maps API等代码的人员。 这个名字是My Maps。

在那里，我们可以创建地图和图层。 图层实际上是我正在寻找的边栏。

我找到了一个论坛来解决这个 在这个link有关的问题。