logo
 JavaScript >> Javascript 文檔 >  >> Tags >> API

適用於多個位置的 Google Maps API

我正在為多地點餐廳概念製作地點頁面。目前的壓倒性趨勢是為每個位置添加一個帶有標記的谷歌地圖。

擁有遍布全球的大型公司擁有龐大的地圖數據庫和許多不同的障礙需要克服 - 能夠按城鎮或郵政編碼、Wi-Fi 可用性、工作時間等進行搜索。

對於我的特定項目，我只有幾個需求：

  • 在我的頁面上添加地圖
  • 為每個位置顯示一個標記
  • 每個標記都顯示地址並可以提供路線

為此，我需要 Google Maps API，它是 Google Developers 的一部分。

在研究 Google Maps API 之前，我最大的誤解是您將我們所知道的 Google Maps 嵌入到網站中。我以為只要簡單地包含一個位置標記，所有信息都會在側邊欄中彈出，例如地址和方向搜索欄。

事實證明並非如此——你得到了地圖，但僅僅包括一個標記並不會導致任何預期的動作。我想出了一些對我有用的東西，我將寫下我採取的步驟，以防有人在類似情況下苦苦掙扎。

獲取 Google Maps Javascript API 密鑰

Google Maps API 有幾種類型 - Android、iOS、Web 和 Web 服務。只需將帶有一些標記的地圖嵌入到您的站點中，就屬於網絡類別，即 Google Maps Javascript。

第一步是獲取 API 密鑰。

您必須同意他們的條款和服務。

他們會希望你給它一個名字並決定任何限制。如果您對它沒有任何限制，任何人都可以使用它並用完您的配額。地圖只能在特定時間點免費。

之後，它會彈出一些看起來超級安全的字符串，現在你有了一個密鑰。

現在我有了密鑰，就可以開始在我的網站中實施 Google 地圖了。

將地圖嵌入您的網站

Google Maps API 的文檔非常豐富。他們有一個很好的“Hello, World!”，或者入門指南。在繼續嘗試更高級的概念之前，確保一切設置正確非常重要。

與 Web 上的任何交互內容一樣，它包含三個組件 - HTML、CSS 和 JavaScript。網站上的示例將所有內容都放在一個文件中，但我們只是開始將它們分成三個單獨的文件，因為這就是您在現實中設置項目的方式。

HTML

我有一個常規的 HTML5 文檔，鏈接到 CSS 樣式表和 JS 腳本。地圖將包含在 <div id="map"></div> .當然，你必須替換 YOUR_API_KEY 使用上一步中的密鑰。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Google Maps APIs</title>

    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>
<script src="script.js"></script>
<script
  async
  defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
></script>
```

CSS

Google 提供的 CSS 用於全屏地圖。我把它放在 style.css .

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

html 和 body 類需要有 100% 的高度，以及 map ID。將邊距和內邊距設置為 0 會重置瀏覽器。

這段代碼很好，但我更喜歡按照 height: 60vh 的行設置一些東西 到 map ID。 60vh 將等於 60% 的視口高度，因此將佔用 60% 的可用屏幕空間。這樣，用戶將能夠輕鬆地滾動地圖到您擁有的任何其他內容。為了這篇文章，我就保持100%，因為我沒有額外的內容。

至此，您已經完成了與地圖相關的 HTML 和 CSS。

JavaScript

我將在 script.js 中插入 Google 的起始示例 .

var map

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644,
    },
    zoom: 8,
  })
}

我聲明 map 變量，使用 initMap() 啟動地圖 函數，並將 Google Map 放入 map 內的我的 CSS 地圖 ID 變量。

center 正在決定地圖的中心位置（澳大利亞新南威爾士州悉尼）和 zoom 決定放大多少。

現在你應該有一個正常工作的地圖了。

自定義地圖

我有一張地圖，但它還沒有做任何具體的事情。您可以放大和縮小，在街道視圖和衛星視圖之間切換，以及單擊並拖動地圖。

我想添加一個標記，所以我查看了文檔上的標記頁面。但是，添加標記僅此而已 - 僅此而已。然後我轉到 Info Windows，它正在向標記添加詳細信息。我認為彈出窗口可能包含谷歌地圖對該區域的任何信息，但信息窗口僅包含您自己的內容。

Google Places API Web Service 似乎更多地與 Google Maps 數據庫集成，但實施起來也更加困難，所以我在我的項目中堅持使用 Google Maps Javascript API。

在我尋找一種簡單、有效的方法來包含帶有地址和信息的多個標記時，我在 StackOverflow 上找到了這篇出色的帖子。我不能相信這個解決方案。這是一段非常靈活的代碼，對我的項目很有幫助。

目標

讓我們定義一個目標，然後實現它。

  • 我將使用 Chipotle 作為示例。
  • 地點將是芝加哥。
  • 我將假設只有三個 Chipotle 位置存在，但可能還會有更多。
  • 每個位置都會彈出一個包含名稱、地址和路線鏈接的彈出窗口

為此，我需要知道位置的地址以及緯度和經度。 Get Lat Long from Address 是我發現並使用的一個驚人的不言自明的資源。

位置

這是我的三個地點。

  • 百老匯

  • 5224 N Broadway St, Chicago, IL 60640

  • (41.976816, -87.659916)

  • 貝爾蒙特

  • 1025 W Belmont Ave, 芝加哥, IL 60657

  • (41.939670, -87.655167)

  • 謝里登

  • 6600 N Sheridan Rd, 芝加哥, IL 60626

  • (42.002707, -87.661236)

我想要的另一件事是一個指向該位置的路線的 URL。為此，我只是去了谷歌地圖，輸入我想要的地址，然後點擊Get Directions .我現在可以獲取到地圖的鏈接，所以我點擊共享或嵌入地圖 並獲取 URL。

現在我擁有了構建自定義地圖所需的一切。首先，我將調用該 initMap 函數。

function initMap() {
  // More
}

然後我將為每個位置製作一個對象。每個對像都是一個變量，將包含信息框、緯度和經度。

var broadway = {
  info:
    '<strong>Chipotle on Broadway</strong><br>\
    	5224 N Broadway St<br> Chicago, IL 60640<br>\
    	<a href="https://goo.gl/maps/jKNEDz4SyyH2">Get Directions</a>',
  lat: 41.976816,
  long: -87.659916,
}

info 是一個字符串，我在其中寫下了我所在位置的名稱和地址，以及指向 Google 地圖上的路線的鏈接。添加 \ 在字符串行的末尾允許你在下一行繼續寫它。

我還為 belmont 創建了對象 和 sheridan .

現在我要在一個名為 location 的變量中創建一個數組 包含 info , lat , 和 long .

var locations = [
  [broadway.info, broadway.lat, broadway.long, 0],
  [belmont.info, belmont.lat, belmont.long, 1],
  [sheridan.info, sheridan.lat, sheridan.long, 2],
]

我將像在“Hello, World!”中那樣調用地圖。例子。我要去zoom 到 13，因為我所有的位置都靠得很近，並且 center 它在百老彙的緯度上，因為它是中間位置。

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 13,
  center: new google.maps.LatLng(41.976816, -87.659916),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
})

使用最後一段代碼，標記和信息窗口的數量將根據我們的 locations 動態更新 變量。

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 () {
        infowindow.setContent(locations[i][0])
        infowindow.open(map, marker)
      }
    })(marker, i)
  )
}

這是最終的、完整的 JavaScript。

function initMap() {
  var broadway = {
    info:
      '<strong>Chipotle on Broadway</strong><br>\
    	5224 N Broadway St<br> Chicago, IL 60640<br>\
    	<a href="https://goo.gl/maps/jKNEDz4SyyH2">Get Directions</a>',
    lat: 41.976816,
    long: -87.659916,
  }

  var belmont = {
    info:
      '<strong>Chipotle on Belmont</strong><br>\
    	1025 W Belmont Ave<br> Chicago, IL 60657<br>\
    	<a href="https://goo.gl/maps/PHfsWTvgKa92">Get Directions</a>',
    lat: 41.93967,
    long: -87.655167,
  }

  var sheridan = {
    info:
      '<strong>Chipotle on Sheridan</strong><br>\r\
    	6600 N Sheridan Rd<br> Chicago, IL 60626<br>\
    	<a href="https://goo.gl/maps/QGUrqZPsYp92">Get Directions</a>',
    lat: 42.002707,
    long: -87.661236,
  }

  var locations = [
    [broadway.info, broadway.lat, broadway.long, 0],
    [belmont.info, belmont.lat, belmont.long, 1],
    [sheridan.info, sheridan.lat, sheridan.long, 2],
  ]

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: new google.maps.LatLng(41.976816, -87.659916),
    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 () {
          infowindow.setContent(locations[i][0])
          infowindow.open(map, marker)
        }
      })(marker, i)
    )
  }
}

現在我們所有的位置都在地圖上，並帶有各自的信息框。


上一篇
下一篇
Tutorial JavaScript 教程

  1. JavaScript 數字轉字符串 – 如何使用 toString 將 Int 轉換為字符串

  2. 如何在不使用任何外部庫的情況下在 JavaScript 中顯示格式化日期

  3. 選擇牆紙時不能做什麼

  4. javascript中while條件中的變量聲明

  5. 沒有jquery的outerWidth

  6. React：在創建拉取請求時為用戶驗收測試創建環境

  7. 讓我們清理：​​醜陋的嘗試捕獲！

  1. DOM元素的jQuery反向數組

  2. 0.4 版：未完成的工作

  3. 從代碼到 Kubernetes 集群的 Nodejs 應用程序

  4. 在 Svelte 中創建自己的路由

  5. 在 NodeJS 中理解和實現密碼散列。

  6. 加載外部 JavaScript 的最佳方式

  7. JavaScript 字符串插值

  1. 使用 Kendo UI 在 Angular 中實現表單下拉菜單的三種方法

  2. 如何讓團隊更有效率（WDS #3）

  3. 餘燼時報 - 第 163 期

  4. 使用 Gatsby、Google Sheets 和 Netlify 構建畫廊