Javascript 如何显示每页多个谷歌地图_Javascript_Html_Angularjs_Google Maps_Maps

Javascript 如何显示每页多个谷歌地图

javascript html angularjs google-maps maps

Javascript 如何显示每页多个谷歌地图,javascript,html,angularjs,google-maps,maps,Javascript,Html,Angularjs,Google Maps,Maps,当我试图在多个视图中显示两个地图时，我遇到了一个问题。我希望你能帮助我我有以下HTML代码： <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://m

当我试图在多个视图中显示两个地图时，我遇到了一个问题。我希望你能帮助我

我有以下HTML代码：

         <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->

        ........

        <div class="tab-content">
                <!-- HOME PAGE -->
                <div id="pois" class="tab-pane fade in active">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div >
                                    <!-- MAPA -->
                                    <div class="embed-responsive embed-responsive-4by3 embed-responsive-item" style="margin-bottom: 10px;
                                    min-width: 323px; min-height: 323px" id="map_canvas"></div>
                                </div>
                            </div>

    ........

    <!-- SEARCH TAB -->
    <div class="panel-body">
           <div class="col-sm-6">
            <form class="form" role="form">
                 <div class="form-group">
                    <input type="text" class="form-control" placeholder="Direccion" ng-model="address"/>
                                                    <div class="well">
                                                        <b>Latitud: {{latitud}}</b><br>
                                                        <b>Logitud: {{longitud}}</b>
                                                    </div>
                                                </div>
                                                <button ng-click="sacarDir(address)" type="submit" class="btn btn-primary btn-block">Buscar</button><br>
                                            </form>
                                            <!-- MAPA -->
                                            <div class="embed-responsive embed-responsive-4by3 embed-responsive-item" style="margin-bottom: 10px;
                                             min-width: 323px; min-height: 323px" id="map_canvas2"></div>
                                        </div>

.................    

              <script async defer
                    src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX&callback=initMap">
            </script>


........
........
纬度：{{Latitud}}

Logitud:{{longitud}
客车

.................

控制器JS：

angular.module('userManager',[],function($locationProvider){
    $locationProvider.html5Mode(true);
});

var map;
var map2;

.................

function initMap() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: {lat: 40.46366700000001, lng: -3.7492200000000366},
        zoom: 6
    });

    map2 = new google.maps.Map(document.getElementById('map_canvas2'), {
        center: {lat: 40.46366700000001, lng: -3.7492200000000366},
        zoom: 6
    });

    $.get('/pois', function(res){
        var message=res.message;
        if(!res.error){
            for(i=0;i<message.length;i++){
                var marker = new google.maps.Marker({
                    position: {lat: message[i].latitud, lng: message[i].longitud},
                    map: map,
                    animation: google.maps.Animation.DROP,
                    title: message[i].nombre
                });
                // Push marker to markers array
                markers.push(marker);
            }
        }
    });
    setMarkers(markers);
}

angular.module（'userManager'，[]，函数（$locationProvider）{
$locationProvider.html5Mode（true）；
});
var映射；
var-map2；
.................
函数initMap（）{
map=new google.maps.map（document.getElementById（'map_canvas'）{
中心：{lat:40.46366700000001，lng:-3.74922000000366}，
缩放：6
});
map2=new google.maps.Map（document.getElementById（'Map\u canvas2'）{
中心：{lat:40.46366700000001，lng:-3.74922000000366}，
缩放：6
});
$.get（'/pois'，函数（res）{
var message=res.message；
如果（！res.error）{
对于（i=0；我在这里看到，实际上谷歌地图在显示其父地图时不起作用：无查看此答案API链接此SO帖子-可能也有帮助。：）