html - 谷歌地图（现代）集成

Question

我想将我的谷歌地图位置整合到我的网站 (html) 中。我找到了这个参考

https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map

这样做，但我不知道如何在那里添加我的信息（就像你在图片中看到的那样）。我也想要现代的外观，而不是带有黑色粗体笔触和无聊图形的旧布局。你知道我该怎么做吗？

图片链接：http ://s15.postimg.org/jejl35j8r/MAp.jpg

Answer 1

将其包含在您的网站 html 代码的头部：

<style>
  #map_canvas {
    width: 500px;
    height: 400px;
  }
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
  function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
      center: new google.maps.LatLng(YOUR LATITUDE, YOUR LONGITUDE),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

将您的纬度和经度放在上面代码中大写字母的位置。然后将此 div 放在您希望地图出现在您网站中的任何位置。

<div id="map_canvas"></div>

您可以通过此网站轻松找到您的经度和纬度：http: //universimmedia.pagesperso-orange.fr/geo/loc.htm