7

爲客戶建立一個網站我需要定期嵌入GMaps。爲此目的,我使用maplace.js。無法獲得「新面貌」谷歌嵌入地圖

這一切都很好,但我注意到一些奇怪的東西。

我已經啓用了新的在我的谷歌帳戶谷歌地圖的「看」,所以現在它看起來非常漂亮和乾淨:

New look Google maps

在這裏,我可以生成的手工嵌入一個iFrame GMAP在我的網站,保持全新,簡潔的外觀和相當方便的「獲取路線」覆蓋:

enter image description here

然而,當使用maplace.js(因此,在效果圖API)我仍然得到在非常乾淨的控件的老樣子和NOE:

enter image description here

我已搜查高和低的方式,使認爲看起來一樣在谷歌產生的框架,但沒有運氣。

這些都是包括我用得到完成的事情:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.exp"></script> 
<script type="text/javascript" src="/Scripts/maplace.min.js"></script> 

這是應用到地圖的CSS:

#gmap { 
    height: 300px; 
    width: 100%; 
} 

和實際地圖嵌入:

<script> 
new Maplace({ 
    map_options: { 
     scrollwheel: false, 
     navigationControl: true, 
     mapTypeControl: false, 
     scaleControl: false, 
     draggable: false, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }, 
    visualRefresh: true, 
    locations: [ 

      {lat: 50.871197, lon: 4.696941000000038, zoom: 15} 



    ] 
}).Load(); 
</script> 

有人對此有何看法?

+0

「v = 3.exp」(即在您的腳本src URL中)應該使用最新版本的Google Maps API,但你有沒有嘗試過使用「v = 3.17」?我知道兩人都應該給你一個最新的版本,但它值得一檢查! –

+4

不幸的是,他們還沒有用這個新的用戶界面更新他們的API。您可以在Google自己的API v3頁面上看到[示例](https://developers.google.com/maps/documentation/javascript/)都沒有使用新的用戶界面。他們似乎推動的是一個新的Embed API,它允許新的用戶界面,同時對嵌入式地圖進行更多的控制。請參閱他們的官方博客文章[這裏](http://googlegeodevelopers.blogspot.ca/2014/03/adding-new-google-maps-to-your-website.html)以及開發者關於它的網頁[此處] (https://developers.google.com/maps/documentation/embed/)。 –

+0

由於Beta版本中的新UI並不總是API的一部分,UI無法應用於API,因此涉及很多事情可能會在後期出錯,因此請堅持您現在收到的舊UI,並且始終允許您自定義API請參閱在Google地圖API中添加[控制](https://developers.google.com/maps/documentation/javascript/examples/control-options),您還可以[自定義](https://developers.google.com/maps/documentation/javascript/examples/control-custom)獲取更多幫助請發佈工作小提示 – MarmiK

回答

0

我終於想通了這一點(其實那纔是怪事沒人似乎都這樣做的話)。

我在我的問題中引用的「新外觀」地圖是作爲Google Maps Embed API的一部分生成的。

這個API提供(看着他們除了漂亮的外觀和背景的用戶)的一些好處:

  • 沒有使用/流量限制
  • 上下文爲用戶在看地圖如果該用戶已經登錄到他/她的賬戶,則提供

此外,如果您打算在您的網站上使用它們,則從任何給定的內容管理器嵌入此類映射似乎很容易。這是因爲的src屬性嵌入他們總是具有如下佈置:

https://www.google.com/maps/embed/v1/MODE?key=API_KEY&parameters 

其中,根據documentation如下:

  • {MODE}:是代替一個,方向,搜索或查看。
  • {API_KEY}是您的免費API密鑰。
  • 參數包括可選參數

所提供的示例似乎表明,它應該很容易足以例如CMS的鏈接內容領域的iframe src屬性的{} MODE領域:

https://www.google.com/maps/embed/v1/place?key=API_KEY&q=Fisht+Olympic+Stadium,Sochi+Russia 

這是所有我曾經想實現。看起來我只是過度關注Maps API本身,並不知何故將其他內容蒙上了一層陰影: -/