如何將動態谷歌地圖添加到我的網站？

Question

我已經創建了一個商業目錄網站，所以我需要添加谷歌地圖到我的網站。 如果一個用戶選擇了特定的城市，地區和搜索類別（例如：Hotels），意味着我需要列出酒店名稱和地址，但問題是我需要在地圖中顯示所有列出的酒店圖標。

我設計了使用HTML，CSS，MYSQL，JS的網站。

我已經試過WordPress，但無法正常執行。

是否有可能？還有其他來源？請幫助我..

Answer 1

添加谷歌地圖和地方搜索框將幫助你實現這一目標。

檢查下面的URL示例代碼

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Answer 2

看一看目錄WordPress主題here當然你需要開發這個你自己。這將幫助你做你的項目！

關於在Google地圖上放置標記，請看google map documentation上演示的示例。

您將使用經度和緯度在地圖上顯示對象。定義您自己的搜索。

所以從search.php中的樣本結果可能是該JSON：

{ 
    search_result: [ 
     { 
      latLng: [40.71958306715651,-74.0379810333252], 
      options: { 
       icon: "http://preview.ait-themes.com/directory/wp1/wp-content/uploads/sports.png", 
       shadow: "http://preview.ait-themes.com/directory/wp1/wp-content/themes/directory/design/img/map-icon/icon-shadow.png", 
      }, 
      data: '<div class="marker-holder"><div class="marker-content with-image"><img src="http://preview.ait-themes.com/directory/wp1/wp-content/themes/directory/tn.php?src=http%3A%2F%2Fpreview.ait-themes.com%2Fdirectory%2Fwp1%2Fwp-content%2Fuploads%2Fbigstock-young-people-dancing-in-a-stud-34308962.jpg&amp;w=120&amp;h=160" alt=""><div class="map-item-info"><div class="title">'+"Dance & Relax"+'</div><div class="address">'+"276 Canal Street, New York, NY 10013, United States"+'</div><a href="http://preview.ait-themes.com/directory/wp1/item/dance-relax/" class="more-button">' + "VIEW MORE" + '</a></div><div class="arrow"></div><div class="close"></div></div></div></div>' 
     }, 
     { 
      latLng: [40.7053026089413,-73.95326614379883], 
      options: { 
       icon: "http://preview.ait-themes.com/directory/wp1/wp-content/uploads/sports.png", 
       shadow: "http://preview.ait-themes.com/directory/wp1/wp-content/themes/directory/design/img/map-icon/icon-shadow.png", 
      }, 
      data: '<div class="marker-holder"><div class="marker-content with-image"><img src="http://preview.ait-themes.com/directory/wp1/wp-content/themes/directory/tn.php?src=http%3A%2F%2Fpreview.ait-themes.com%2Fdirectory%2Fwp1%2Fwp-content%2Fuploads%2Fbigstock-All-Metal-Bicycle-2378091.jpg&amp;w=120&amp;h=160" alt=""><div class="map-item-info"><div class="title">'+"Bike PRO"+'</div><div class="address">'+"276 Canal Street, New York, NY 10013, United States"+'</div><a href="http://preview.ait-themes.com/directory/wp1/item/bike-pro/" class="more-button">' + "VIEW MORE" + '</a></div><div class="arrow"></div><div class="close"></div></div></div></div>' 
     } 
    ] 
} 

使用此地圖上的谷歌地圖的對象。