hello@shopaii.com 18676917505

如何在谷歌地图中标识你的地址

| Visit:10

我有三个子公司， 名为北京分公司， 上海分司， 香港分公司， 编写一段 js, 通过 google map api , 在世界地图上标识这三家公司， 包括 图片（100*100px）, 分公司名称，经度，维度。

在以下代码中，我们首先引入了Google Maps JavaScript API，并定义了initMap函数来初始化地图。然后我们定义了三个分公司的位置、名称和图片信息，并使用循环在地图上标记这三个位置。当用户点击标记点时，会弹出包含分公司名称和图片的信息窗口。

请注意，你需要将YOUR_API_KEY替换为你自己的Google Maps API密钥，以便使用地图服务。

<!DOCTYPE html>
<html>
<head>
  <title>Company Locations</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <script>
    function initMap() {
      var locations = [
        ['北京分公司', 39.9042, 116.4074, 'https://example.com/beijing_logo.png'],
        ['上海分公司', 31.2304, 121.4737, 'https://example.com/shanghai_logo.png'],
        ['香港分公司', 22.3193, 114.1694, 'https://example.com/hongkong_logo.png']
      ];

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: new google.maps.LatLng(30, 110),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var infowindow = new google.maps.InfoWindow();

      var marker, i;

      for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            var content = '<div><h2>' + locations[i][0] + '</h2><img src="' + locations[i][3] + '" width="100" height="100"></div>';
            infowindow.setContent(content);
            infowindow.open(map, marker);
          }
        })(marker, i));
      }
    }
  </script>
</head>
<body>
  <div id="map" style="height: 600px; width: 100%;"></div>
  <script>
    initMap();
  </script>
</body>
</html>