将Google地图添加到您的网站的最简单方法

建立网站时，通常需要包括一张地图，以使人们获得更好的方向感。Google Maps是当今最受欢迎的地图服务，它提供了多种可以使用的工具和服务。

在本教程中，我们将向您展示如何轻松地将地图添加到您的网站并使用gMaps.js库对其进行自定义。这是一个简单易用的库，可让您充分利用Google Maps的潜力，而无需使用大量代码。

项目概况

为了演示Google Maps的用法，我们使用HTML和Bootstrap 4创建了一个简单的设计。您可以查看下面的图像以获取最终结果。

布局

我们的设计包括一个Bootstrap行和两列。左列显示Google地图，右列显示标题，其中包含一些文本，超棒的字体图标和一个小的图片库。

< div  class = “ map-example” > 
    < div  class = “ row” > 
        < div  class = “ col-lg-6” > 
            < div  id = “ map” > </ div > 
        </ div > 
        < div  class = “ col-lg-6” > 
            < div  class = “标题” > 
                < h3 > Lorem Ipsum Dolor </ h3 >
                < div 类=“ rating” > 
                    < i  class = “ fa fa-star图标” > </ i > 
                    < i  class = “ fa fa-star图标” > </ i > 
                    < i  class = “ fa fa-star图标” > </ i > 
                    < i  class = “ fa fa-star-图标” > </ i > 
                    < i  class = “ fa fa-star-o图标” > </ i > 
                </ div > 
            </ div> 
            < div  class = “ info” > 
                < p > Lorem ipsum dolor坐着，安全奉献精英。Nullam ornare leo porta cursus porttitor。Proin quis tempor ectus。Cras sodales nisi ut felis tincidunt suscipit。空洞的前庭和后庭。</ p > 
                < p > Aenean convallis，前庭刑警，sem nibh rutrum sem，vel sodales nisl velit eu。塞德·亨德利特（Sed Hendrerit）效索可立定 Maecenas tempus augue lacus。</ p > 
            </ div > 
            < div  class = “ gallery” >
                H4 >图片</ H4 > 
                < DIV 类= “行” > 
                    < DIV 类= “COL-MD-4” > 
                        <一个 HREF = “资产/ IMG / image2.jpg” > < IMG 类= “IMG-流体图像“  src = ” assets / img / image2.jpg“ > </ a > 
                    </ div > 
                    < div  class = ” col-md-4“ > 
                        <a  href = “ assets / img / image3.jpg”> < img  class = “  img-流体图像” src = “资产/img/image3.jpg” > </ a > 
                    </ div > 
                    < div  class = “ col-md-4” > 
                        < a  href = “资产/ img / image4.jpg” > < img 类= “  img-流体图像” src = “资产/img/image4.jpg” > </ a > 
                    </ div > 
                </ div > 
            </ div > 
        </div > 
    </ div > 
</ div >

地图配置

为了使用Google Maps，您需要导入gMaps.js库和Google Maps API。它需要一个API密钥，因此，如果您已经拥有一个API密钥，则可以使用它，否则，可以转到此链接以学习如何创建一个。准备好密钥后，只需替换脚本的“ YOUR_API_KEY”部分。

<脚本 src = “ http://maps.google.com/maps/api/js?key=YOUR_API_KEY” ></ script > 
< script  src = “ https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.25/gmaps.js” ></脚本>

现在我们需要生成地图。我们创建了一个新的地图对象，并设置了选择器（’#map’）以及要在地图上显示的点的经度和纬度作为参数。

接下来，我们需要在地图上添加一个标记。为此，请使用addMarker()要在其中放置纬度和经度的方法。我们还可以使用setZoom()以整数作为参数的方法设置显示地图的初始缩放比例。数字越小，地图越“放大”。

var map = new GMaps（{
     el：'#map'，
     lat：   40.730610，
     lng：-73.935242
}）;

map.addMarker（{
    lat：40.700610，
     lng：-73.997242，
    标题：'New York'
}）;

map.setZoom（8）;

款式

样式位于单独的CSS文件中。由于我们使用的是Bootstrap，因此大多数样式都由框架完成。我们添加了一些边距和填充调整，字体颜色和框阴影。

.navbar .navbar-light .navbar-expand-lg .bg-white .page-navbar {
   box-shadow：0  4px  10px  rgba（0，0，0，0.1）;
}

.navbar-light  .navbar-nav  .active > .nav-link，.navbar-light  .navbar-nav  .nav-link .active，.navbar-light  .navbar-nav  .nav-link .show，.navbar-light  .navbar-nav  .show > .nav-link {
   font-weight：bold;
}

.nav-item .item {
   padding-right：2rem ;
}

.navbar-nav ：last-child  .item ：last-child，.navbar-nav ：last-child  .item ：last-child  a {
   padding-right：0 ;
}

.map-example  .heading  .icon {
   color：＃ffb526 ;
}

.map-example {
   margin-top：50px ;
  padding-bottom：100px ;
}

.map-example  .heading {
   margin-bottom：20px ;
  border-bottom：1px实线＃e4e4e4 ;
  padding-bottom：30px ;
}

.map-example  .info {
   margin-bottom：20px ;
  border-bottom：1px实线＃e4e4e4 ;
  padding-bottom：20px ;
  颜色：＃636363 ;
}

.map-example  .gallery  h4 {
   margin-bottom：30px ;
}

.map-example  .gallery  .image {
   margin-bottom：15px ;
  box-shadow：0px  2px  10px  rgba（0，0，0，0.15）;
}

.map-example  #map {
   height：300px ;
  底边距：20px ;
}

.page-footer {
   padding-top：32px ;
  border-top：1px实线#ddd ;
  text-align：center;
  padding-bottom：20px ;
}

.page-footer  a {
   margin：0px  10px ;
  显示：inline-block;
  颜色：＃282b2d ;
  字体大小：18px ;
}

 .page -footer .links {
   display：inline-block;
}

@ media（min - width：992px）{.
   map -example  #map {
     height：500px ;
  }
}

Bootstrap Studio中的Google Maps

Bootstrap Studio应用程序提供了一种快速简便的方法来配置Google Maps，而无需编写任何代码。您可以在Bootstrap Studio教程部分中找到有关如何在您的项目中添加Google Maps的详细说明。