Question

我创建了一个商业目录网站，所以我需要将谷歌地图添加到我的网站。如果一个用户选择了特定的城市，地区和搜索类别（例如：酒店）意味着我需要列出酒店名称和地址，但问题是我需要在地图中显示所有列出的酒店图标。

我使用HTML，CSS，MYSQL，JS设计了网站。

我已经尝试过使用WordPress，但无法正常执行。

有可能吗？还有其他任何来源吗？请帮帮我..

Answer 1

使用“地方搜索”框添加Google地图可帮助您实现此目标。

检查示例代码的以下网址

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

Answer 2

查看目录WordPress主题 here，但当然您需要自己开发。这将帮助您为项目做些什么！

关于将Marker放在Google Map上，请查看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>'
        }
    ]
}

使用此功能在Google地图上映射对象。

如何将动态谷歌地图添加到我的网站？

2 个答案: