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

将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'lat40.730610lng-73.935242
});

map.addMarker({
    lat40.700610lng-73.997242标题'New York'
});

map.setZoom(8);

款式

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

.navbar .navbar-light .navbar-expand-lg .bg-white .page-navbar {
   box-shadow0  4px  10px  rgba0,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-right2rem ;
}

.navbar-nav :last-child  .item :last-child.navbar-nav :last-child  .item :last-child  a {
   padding-right0 ;
}

.map-example  .heading  .icon {
   color#ffb526 ;
}

.map-example {
   margin-top50px ;
  padding-bottom100px ;
}

.map-example  .heading {
   margin-bottom20px ;
  border-bottom1px实线#e4e4e4 ;
  padding-bottom30px ;
}

.map-example  .info {
   margin-bottom20px ;
  border-bottom1px实线#e4e4e4 ;
  padding-bottom20px ;
  颜色#636363 ;
}

.map-example  .gallery  h4 {
   margin-bottom30px ;
}

.map-example  .gallery  .image {
   margin-bottom15px ;
  box-shadow0px  2px  10px  rgba0,0,0,0.15);
}

.map-example  #map {
   height300px ;
  底边距20px ;
}

.page-footer {
   padding-top32px ;
  border-top1px实线#ddd ;
  text-align:center;
  padding-bottom20px ;
}

.page-footer  a {
   margin0px  10px ;
  显示:inline-block;
  颜色#282b2d ;
  字体大小18px ;
}

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

@ mediamin - width992px){.
   map -example  #map {
     height500px ;
  }
}

Bootstrap Studio中的Google Maps

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

分享到 :
相关推荐

发表评论

电子邮件地址不会被公开。