Mac上如何讓Bootstrap Studio中使用Google Maps

建立網站時，包括地圖可以使人們有更好的方向感。由於它的受歡迎程度和準確性，因此Google Maps是自然的選擇。

在本教程中，我們將向您展示如何在Bootstrap Studio設計中輕鬆新增地圖並對其進行自定義。藉助內建的Maps元件，這非常容易做到。  首先，轉到“元件”皮膚並搜尋“地圖”元件。然後將其拖放到您的頁面中。

不過有一個複雜的問題-Google要求所有地圖都使用API金鑰。不過，請不要擔心-它們具有大量的免費層，並且生成金鑰非常簡單。

生成金鑰

單擊地圖以將其選中。在邊欄中的選項選項卡下，您將看到許多設定。Google Maps需要使用API金鑰才能使用它，因此，如果您已經擁有一個API金鑰，請繼續將其貼上到“ API金鑰”欄位中，然後跳過此部分。

如果您沒有金鑰，則需要建立一個。我們已經儘可能簡化了這一過程，只需單擊選項中的“建立API金鑰”按鈕。

這將帶您***Google API控制檯。您需要建立一個新專案，或選擇一個現有專案，然後單擊繼續以啟用API和任何相關服務。

下一步需要您對金鑰進行限制。如果不確定其他選擇會做什麼，請將此選項保留為“無”。然後點選建立。

這將建立您的API金鑰，您需要將其複製並貼上到Bootstrap Studio的“ API金鑰”欄位中。

現在，您的Google地圖可以使用了。您不必每次新增地圖時都建立新的金鑰，您可以將其重新用於專案中的所有地圖。

自定義地圖

Bootstrap Studio提供了許多快速設定來自定義您的Google Maps元件。選擇了元件後，您將在“選項皮膚”中看到許多設定。

您可以更改以下內容：

• 模式-設定地圖的模式（位置，方向，搜尋，檢視，街景）。
• 位置-取決於地圖模式。它是您想以地圖為中心的點的地址或座標。
• 縮放-顯示地圖的初始比例。數字越小，地圖越“放大”。
• 型別-路線圖（顯示預設的路線圖檢視）和衛星（顯示Google Earth衛星影像）。
• 尺寸-設定地圖的寬度和高度。

現在，您的網站上已有正在執行的Google Map！為了節省將來的時間，您甚至可以將此地圖作為自定義元件新增到庫中，這樣就不必再次進行設定。

原文來源於‘未來軟體園’想更多瞭解請關注未來軟體園