如何在Google地图中显示医院和餐馆等地点在同一页面上的单独地图中 [英] How to include Google map to show places like hospital and restaurant in separate maps on same page

问题描述

我使用这个脚本来显示附近地区的餐厅

 < script> 
 var map_rest; 
 var infowindow; 
函数initialize（）{
 var restaurant = new google.maps.LatLng（-33.8665433,151.1956316）; 
 map_rest = new google.maps.Map（document.getElementById（'restaurant-tab'），{
 center：restaurant，
 zoom：15 
}）; 
 var image_hospital = new google.maps.MarkerImage（http://www.myvirtualadmin.co.uk/wp-content/uploads/2011/04/location-place.png，null，null，null，新的google.maps.Size（40,52））; 
 var marker = new google.maps.Marker（{//设置标记
位置：restaurant，
图标：image_hospital，
 map：map_rest 
}）; 
 var request_rest = {
位置：餐厅，
半径：1000，
类型：['restaurant'] 
}; 
 infowindow = new google.maps.InfoWindow（）; 
 var service_rest = new google.maps.places.PlacesService（map_rest）; 
 service_rest.nearbySearch（request_rest，callback_rest）; 
 
 $ b函数callback_rest（results，status）{
 if（status == google.maps.places.PlacesServiceStatus.OK）{
 for（var i = 0; i< results.length; i ++）{
 createMarker_rest（results [i]）; 
} 
} 
} 
函数createMarker_rest（place）{
 var placeLoc = place.geometry.location; 
 
 var image = new google.maps.MarkerImage（http://www.creare.co.uk/wp-content/uploads/2013/08/marker.png，null，null， null，new google.maps.Size（40,52））; //为我们的标记图像创建一个变量。 
 var marker = new google.maps.Marker（{
 position：placeLoc，
 icon：image，
 map：map_rest 
}）; 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（place.name）; 
 infowindow.open（map_rest，this）; 
}）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 
< / script> 
  

如果我包含第二个脚本并将类型更改为学校或医院，
类型：['restaurant'] 在上一个脚本中，附近的位置不会显示在第一个地图上。

HTML

 < ul class =nav nav-tabsid =myTab> 
< li class =active>< a href =＃restdata-toggle =tab> < i class =fa fa-map-marker> < / i>餐厅< / a>< / li> 
< li>< a href =＃hospitaldata-toggle =tab> < i class =fa fa-hospital> < I> /;医院< / a>< / li> 
< li>< a href =＃schooldata-toggle =tab>< i class =fa fa-home> < I> /;学校< / a>< / li> 
< / ul> 
< div class =tab-content> 
< div class =tab-pane activeid =rest> 
< div id =restaurant-tabstyle =height：500px; width：100％; border：3px solid #acacac;> < / DIV> 
< / div> 
< div class =tab-paneid =hospital> 
 
< div id =hospital-tabstyle =height：500px; width：100％; border：3px solid #acacac;> < / DIV> 
 
< / div> 
< div class =tab-paneid =school> 
< div id =school-tabstyle =height：500px; width：100％; border：3px solid #acacac;> < / DIV> 
< / div> 
< / div> 
  

引导程序标签不会加载其他标签页。

* 在这里，我通过将地图div放在div *之外来测试这些贴图。所以基本上有两个问题，
如何在不同的地图中显示不同的地点，以及如何在标签中使用加载地图的地图。

解决方案

包含bootstrap.js / bootstrap.css，jquery.js和谷歌地图脚本

 <！DOCTYPE html PUBLIC -  // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> 
< html xmlns =http://www.w3.org/1999/xhtml> 
< head> 
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/> 
< title>标签载入地图< /标题> 
< link href =assets / bootstrap / css / bootstrap.css =stylesheet> 
< link href =assets / css / stylesheet.css =stylesheet> 
< style> 
 html，body，.container，.tab-content，.tab-pane {
 height：100％; 
} 
＃map-canvas {
 width：100％; 
 height：480px; 
} 
< / style> 
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places>< / script> 
< script src =assets / js / jquery-2.0.3.min.js>< / script> 
< script> 
 var map_rest; 
 var infowindow; 
函数initialize（）{
 var restaurant = new google.maps.LatLng（-33.8665433,151.1956316）; 
 map_rest = new google.maps.Map（document.getElementById（'map-canvas'），{
 center：restaurant，
 zoom：15，
 
} ）; 
 var image_hospital = new google.maps.MarkerImage（http://www.myvirtualadmin.co.uk/wp-content/uploads/2011/04/location-place.png，null，null，null，新的google.maps.Size（40,52））; //为我们的标记图像创建一个变量。 
 var marker = new google.maps.Marker（{//设置标记
位置：restaurant，//将位置标记置于坐标
图标：image_hospital，//使用我们的图像作为标记
 map：map_rest，//将市场分配给我们的地图变量
 title：'点击访问我们公司的Google Places'，//标记ALT文本
动画：google.maps.Animation .BOUNCE 
}）; 
 var request_rest = {
位置：餐厅，
半径：1000，
类型：['hospital'，'school'] 
}; 
 infowindow = new google.maps.InfoWindow（）; 
 var service_rest = new google.maps.places.PlacesService（map_rest）; 
 service_rest.nearbySearch（request_rest，callback_rest）; 
 
 $ b函数callback_rest（results，status）{
 if（status == google.maps.places.PlacesServiceStatus.OK）{
 for（var i = 0; i< results.length; i ++）{
 createMarker_rest（results [i]）; 
} 
} 
} 
函数createMarker_rest（place）{
 var placeLoc = place.geometry.location; 
 
 var image = new google.maps.MarkerImage（http://www.creare.co.uk/wp-content/uploads/2013/08/marker.png，null，null， null，new google.maps.Size（40,52））; //为我们的标记图像创建一个变量。 
 var marker = new google.maps.Marker（{//设置标记
位置：placeLoc，//将标记置于坐标
图标：image，//使用我们的图像作为标记
 map：map_rest，//将市场分配给我们的地图变量
 title：'点击访问我们公司的Google Places'，//标记ALT文本
 //animation:google.maps .Animation.BOUNCE 
}）; 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（place.name）; 
 infowindow.open（map_rest，this）; 
}）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize）; 
 
< / script> 
< script> 
 var map_atm; 
 var infowindow; 
函数initialize_atm（）{
 var atm = new google.maps.LatLng（-33.8665433,151.1956316）; 
 map_atm = new google.maps.Map（document.getElementById（'atm'），{
 center：atm，
 zoom：15，
 
}）; 
 var image_atm = new google.maps.MarkerImage（http://www.myvirtualadmin.co.uk/wp-content/uploads/2011/04/location-place.png，null，null，null，新的google.maps.Size（40,52））; //为我们的标记图像创建一个变量。 
 var marker = new google.maps.Marker（{//设置标记
位置：atm，//将标记置于坐标
图标：image_atm，//使用我们的图像作为标记
 map：map_atm，//将市场分配给我们的地图变量
 title：'点击访问我们公司的Google Places'，//标记ALT文本
动画：google.maps.Animation .BOUNCE 
}）; 
 var request_atm = {
位置：atm，
半径：1000，
类型：['atm'] 
}; 
 infowindow = new google.maps.InfoWindow（）; 
 var service_atm = new google.maps.places.PlacesService（map_atm）; 
 service_atm.nearbySearch（request_atm，callback_atm）; 
 
 $ b函数callback_atm（results，status）{
 if（status == google.maps.places.PlacesServiceStatus.OK）{
 for（var i = 0; i< results.length; i ++）{
 createMarker_atm（results [i]）; 
} 
} 
} 
函数createMarker_atm（place）{
 var placeLoc = place.geometry.location; 
 
 var image = new google.maps.MarkerImage（https://cdn2.iconfinder.com/data/icons/banking-icons-2/512/ATM-128.png，null， null，null，new google.maps.Size（40,52））; //为我们的标记图像创建一个变量。 
 var marker = new google.maps.Marker（{//设置标记
位置：placeLoc，//将标记置于坐标
图标：image，//使用我们的图像作为标记
 map：map_atm，//将市场分配给我们的地图变量
 title：'点击访问我们公司的Google Places'，//标记ALT文本
 
 //动画：google.maps.Animation.BOUNCE 
}）; 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（place.name）; 
 infowindow.open（map_atm，this）; 
}）; 
} 
 google.maps.event.addDomListener（window，'load'，initialize_atm）; 
< / script> 
 
< script> 
 var map_hos; 
 var infowindow; 
函数initialize_hos（）{
 var hospital = new google.maps.LatLng（-33.8665433,151.1956316）; 
 map_hos = new google.maps.Map（document.getElementById（'hospital'），{
 center：hospital，
 zoom：15 
}）; 
 var image_hospital = new google.maps.MarkerImage（http://www.myvirtualadmin.co.uk/wp-content/uploads/2011/04/location-place.png，null，null，null，新的google.maps.Size（40,52））; //为我们的标记图像创建一个变量。 
 var marker = new google.maps.Marker（{//设置标记
位置：医院，//将标记置于坐标
图标：image_hospital，//使用我们的图像作为标记
 map：map_hos //将市场分配给我们的地图变量
 title：'点击访问我们公司的Google Places'，//标记ALT文本
动画：google.maps.Animation .BOUNCE 
}）; 
 var request_hos = {
位置：医院，
半径：1000，
类型：['hospital'] 
}; 
 infowindow = new google.maps.InfoWindow（）; 
 var service_hos = new google.maps.places.PlacesService（map_hos）; 
 service_hos.nearbySearch（request_hos，callback_hos）; 
 
 $ b函数callback_hos（results，status）{
 if（status == google.maps.places.PlacesServiceStatus.OK）{
 for（var i = 0; i< results.length; i ++）{
 createMarker_hos（results [i]）; 
 
 
 
函数createMarker_hos（place）{
 var placeLoc = place.geometry.location; 
 
 var image = new google.maps.MarkerImage（https://cdn3.iconfinder.com/data/icons/healthcare-and-medicine-icons-1/512/Hospital-128.png ，null，null，null，new google.maps.Size（40,52））; //为我们的标记图像创建一个变量。 
 var marker = new google.maps.Marker（{//设置标记
位置：placeLoc，//将标记置于坐标
图标：image，//使用我们的图像作为标记
 map：map_hos //将市场分配给我们的地图变量
 title：'点击访问我们公司的Google Places'，//标记ALT文本
 
 //动画：google.maps.Animation.BOUNCE 
}）; 
 google.maps.event.addListener（marker，'click'，function（）{
 infowindow.setContent（place.name）; 
 infowindow.open（map_hos，this）; 
}）; 
} 
 
 google.maps.event.addDomListener（window，'load'，initialize_hos）; 
 
< script type =text / javascript> 
 $（document）.ready（function（）{
 flag_atm = 0; 
 flag_hos = 0; 
 $（document）.on（shown.bs.tab， '#atmtab'，函数（e）{
 google.maps.event.trigger（map_atm，'resize'）; 
 if（flag_atm == 0）
 {
 initialize_atm （）; 
 flag_atm = 1; 
} 
}）; 
 $（document）.on（shown.bs.tab，'#hospitaltab'，function（e ）{
 google.maps.event.trigger（map_hos，'resize'）; 
 if（flag_hos == 0）
 {
 initialize_hos（）; 
 flag_hos = 1; 
} 
 //google.maps.event.addDomListener(window，'load'，initialize_hos）; 
}）; 
}）; 
< / script>< / head> 
< body> 
< div class =container> 
< div class =row> 
< div class =col-sm-12> 
< h1> Google Map Inside Tab Tab< / h1> 
 
< ul class =nav nav-tabsid =myTab> 
< li class =active>< a href =＃homedata-toggle =tab> < i class =fa fa-map-marker> < I> /;位置地图< / a>< / li> 
< li>< a href =＃profiledata-toggle =tabid =atmtab> < i class =fa fa-hospital> < I> /;医院< / a>< / li> 
< li>< a href =＃messagesdata-toggle =tabid =hospitaltab>< i class =fa fa-home> < I> /;学校< / a>< / li> 
< / ul> 
< div class =tab-content> 
< div class =tab-pane activeid =home> 
< div id =map-canvasstyle =height：500px; width：100％; border：3px solid #acacac;> < / DIV> 
< / div> 
< div class =tab-paneid =profile> 
 
< div id =atmstyle =height：500px; width：100％; border：3px solid #acacac;> < / DIV> 
 
< / div> 
< div class =tab-paneid =messages> 
< div id =hospitalstyle =height：500px; width：100％; border：3px solid #acacac;> < / DIV> 
< / div> 
< / div> 
 
< / div> 
< / div> 
< / div> 
 
< script src =assets / bootstrap / js / bootstrap.min.js>< / script> 
< / body> 
< / html> 
  

I am using this script to show the restaurant in the nearby area

<script>
var map_rest;
var infowindow;
function initialize() {
  var restaurant = new google.maps.LatLng(-33.8665433, 151.1956316);
  map_rest = new google.maps.Map(document.getElementById('restaurant-tab'), {
    center: restaurant,
    zoom: 15
  });
    var image_hospital = new google.maps.MarkerImage("http://www.myvirtualadmin.co.uk/wp-content/uploads/2011/04/location-place.png", null, null, null, new google.maps.Size(40,52)); 
    var marker = new google.maps.Marker({ // Set the marker
            position: restaurant, 
            icon:image_hospital, 
            map: map_rest
        }); 
  var request_rest = {
    location: restaurant,
    radius: 1000,
    types: ['restaurant']
  };
  infowindow = new google.maps.InfoWindow();
  var service_rest = new google.maps.places.PlacesService(map_rest);
  service_rest.nearbySearch(request_rest, callback_rest);

}
function callback_rest(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker_rest(results[i]);
    }
  }
}
function createMarker_rest(place) {
  var placeLoc = place.geometry.location;

    var image = new google.maps.MarkerImage("http://www.creare.co.uk/wp-content/uploads/2013/08/marker.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
    var marker = new google.maps.Marker({ 
            position: placeLoc, 
            icon:image, 
            map: map_rest
        });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map_rest, this);
  });
}

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

    </script>

If I include the second script and change the type to school or hospital, types: ['restaurant'] the nearby location does not show in first map by all in the last script.

HTML

<ul class="nav nav-tabs" id="myTab">
                                    <li class="active"><a href="#rest" data-toggle="tab"> <i class="fa fa-map-marker"> </i>Restaurant </a></li>
                                    <li><a href="#hospital" data-toggle="tab"> <i class="fa fa-hospital"> </i> Hospitals </a></li>
                                    <li><a href="#school" data-toggle="tab"><i class="fa fa-home"> </i> Schools </a></li>
                                </ul>
                    <div class="tab-content">
                                    <div class="tab-pane active" id="rest">
                                     <div id="restaurant-tab" style="height:500px; width:100%; border:3px solid #acacac;"> </div>
                                    </div>
                                    <div class="tab-pane" id="hospital">

                                    <div id="hospital-tab" style="height:500px; width:100%; border:3px solid #acacac;"> </div>

                                    </div>
                                    <div class="tab-pane" id="school">
                                    <div id="school-tab" style="height:500px; width:100%; border:3px solid #acacac;"> </div>  
                                    </div>
                                </div>

The bootstrap tab is not loading the other tabs with the maps.

* Here I am testing these maps by putting the map div outside div*

So basically two questions, How to show the different places in different maps and how to use load the map in the tab that are not active as well.

解决方案

Include bootstrap.js/ bootstrap.css, jquery.js and google map script

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tab Load of Map</title>
    <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/stylesheet.css" rel="stylesheet">
    <style>
        html, body, .container, .tab-content, .tab-pane {
            height: 100%;
        }
        #map-canvas {
            width: 100%;
            height: 480px;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <script src="assets/js/jquery-2.0.3.min.js"></script>
    <script>
    var map_rest;
    var infowindow;
    function initialize() {
      var restaurant = new google.maps.LatLng(-33.8665433, 151.1956316);
      map_rest = new google.maps.Map(document.getElementById('map-canvas'), {
        center: restaurant,
        zoom: 15,

      });
        var image_hospital = new google.maps.MarkerImage("http://www.myvirtualadmin.co.uk/wp-content/uploads/2011/04/location-place.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
        var marker = new google.maps.Marker({ // Set the marker
                position: restaurant, // Position marker to coordinates
                icon:image_hospital, //use our image as the marker
                map: map_rest, // assign the market to our map variable
                title: 'Click to visit our company on Google Places', // Marker ALT Text
                animation:google.maps.Animation.BOUNCE
            }); 
      var request_rest = {
        location: restaurant,
        radius: 1000,
        types: ['hospital','school']
      };
      infowindow = new google.maps.InfoWindow();
      var service_rest = new google.maps.places.PlacesService(map_rest);
      service_rest.nearbySearch(request_rest, callback_rest);

    }
    function callback_rest(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          createMarker_rest(results[i]);
        }
      }
    }
    function createMarker_rest(place) {
      var placeLoc = place.geometry.location;

        var image = new google.maps.MarkerImage("http://www.creare.co.uk/wp-content/uploads/2013/08/marker.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
        var marker = new google.maps.Marker({ // Set the marker
                position: placeLoc, // Position marker to coordinates
                icon:image, //use our image as the marker
                map: map_rest, // assign the market to our map variable
                title: 'Click to visit our company on Google Places', // Marker ALT Text
                //animation:google.maps.Animation.BOUNCE
            });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(place.name);
        infowindow.open(map_rest, this);
      });
    }

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

        </script>
    <script>
    var map_atm;
    var infowindow;
    function initialize_atm() {
      var atm = new google.maps.LatLng(-33.8665433, 151.1956316);
      map_atm = new google.maps.Map(document.getElementById('atm'), {
        center: atm,
        zoom: 15,

      });
        var image_atm = new google.maps.MarkerImage("http://www.myvirtualadmin.co.uk/wp-content/uploads/2011/04/location-place.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
        var marker = new google.maps.Marker({ // Set the marker
                position: atm, // Position marker to coordinates
                icon:image_atm, //use our image as the marker
                map: map_atm, // assign the market to our map variable
                title: 'Click to visit our company on Google Places', // Marker ALT Text
                animation:google.maps.Animation.BOUNCE
            }); 
      var request_atm = {
        location: atm,
        radius: 1000,
        types: ['atm']
      };
      infowindow = new google.maps.InfoWindow();
      var service_atm = new google.maps.places.PlacesService(map_atm);
      service_atm.nearbySearch(request_atm, callback_atm);

    }
    function callback_atm(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          createMarker_atm(results[i]);
        }
      }
    }
    function createMarker_atm(place) {
      var placeLoc = place.geometry.location;

        var image = new google.maps.MarkerImage("https://cdn2.iconfinder.com/data/icons/banking-icons-2/512/ATM-128.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
        var marker = new google.maps.Marker({ // Set the marker
                position: placeLoc, // Position marker to coordinates
                icon:image, //use our image as the marker
                map: map_atm, // assign the market to our map variable
                title: 'Click to visit our company on Google Places', // Marker ALT Text

                //animation:google.maps.Animation.BOUNCE
            });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(place.name);
        infowindow.open(map_atm, this);
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize_atm);
        </script>

    <script>
    var map_hos;
    var infowindow;
    function initialize_hos() {
      var hospital = new google.maps.LatLng(-33.8665433, 151.1956316);
      map_hos = new google.maps.Map(document.getElementById('hospital'), {
        center: hospital,
        zoom: 15
      });
        var image_hospital = new google.maps.MarkerImage("http://www.myvirtualadmin.co.uk/wp-content/uploads/2011/04/location-place.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
        var marker = new google.maps.Marker({ // Set the marker
                position: hospital, // Position marker to coordinates
                icon:image_hospital, //use our image as the marker
                map: map_hos, // assign the market to our map variable
                title: 'Click to visit our company on Google Places', // Marker ALT Text
                animation:google.maps.Animation.BOUNCE
            }); 
      var request_hos = {
        location: hospital,
        radius: 1000,
        types: ['hospital']
      };
      infowindow = new google.maps.InfoWindow();
      var service_hos = new google.maps.places.PlacesService(map_hos);
      service_hos.nearbySearch(request_hos, callback_hos);

    }
    function callback_hos(results, status) {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          createMarker_hos(results[i]);
        }
      }
    }
    function createMarker_hos(place) {
      var placeLoc = place.geometry.location;

        var image = new google.maps.MarkerImage("https://cdn3.iconfinder.com/data/icons/healthcare-and-medicine-icons-1/512/Hospital-128.png", null, null, null, new google.maps.Size(40,52)); // Create a variable for our marker image.
        var marker = new google.maps.Marker({ // Set the marker
                position: placeLoc, // Position marker to coordinates
                icon:image, //use our image as the marker
                map: map_hos, // assign the market to our map variable
                title: 'Click to visit our company on Google Places', // Marker ALT Text

                //animation:google.maps.Animation.BOUNCE
            });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(place.name);
        infowindow.open(map_hos, this);
      });
    }

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

    <script type="text/javascript">
    $(document).ready(function () {
    flag_atm = 0;
    flag_hos = 0;   
        $(document).on("shown.bs.tab", '#atmtab', function (e) {
            google.maps.event.trigger(map_atm, 'resize');
            if(flag_atm == 0)
            {
                initialize_atm();
                flag_atm = 1;
            }
        });
        $(document).on("shown.bs.tab", '#hospitaltab', function (e) {
            google.maps.event.trigger(map_hos, 'resize');
            if(flag_hos == 0)
            {
                initialize_hos();
                flag_hos = 1;
            }
            //google.maps.event.addDomListener(window, 'load', initialize_hos);
        });
    });
</script></head>
    <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h1>Google Map Inside Tab Panel</h1>

                       <ul class="nav nav-tabs" id="myTab">
                                        <li class="active"><a href="#home" data-toggle="tab"> <i class="fa fa-map-marker"> </i> Location on Map </a></li>
                                        <li><a href="#profile" data-toggle="tab" id="atmtab" > <i class="fa fa-hospital"> </i> Hospitals </a></li>
                                        <li><a href="#messages" data-toggle="tab" id="hospitaltab"><i class="fa fa-home"> </i> Schools </a></li>
                                    </ul>
                        <div class="tab-content">
                                        <div class="tab-pane active" id="home">
                                         <div id="map-canvas" style="height:500px; width:100%; border:3px solid #acacac;"> </div>
                                        </div>
                                        <div class="tab-pane" id="profile">

                                        <div id="atm" style="height:500px; width:100%; border:3px solid #acacac;"> </div>

                                        </div>
                                        <div class="tab-pane" id="messages">
                                          <div id="hospital" style="height:500px; width:100%; border:3px solid #acacac;"> </div>
                                        </div>
                                    </div>

        </div>
      </div>
    </div>

    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

这篇关于如何在Google地图中显示医院和餐馆等地点在同一页面上的单独地图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！