在移动设备上，“在Google地图上查看”链接无法使用，如何嵌入谷歌地图？

Question

在移动设备上，“在Google地图上查看”链接无法使用，如何嵌入谷歌地图？

3

我已经使用“共享和嵌入”地图选项将一张地图放到我正在开发的网站上（从“新”谷歌地图底部的齿轮处）:

MapsShareAndEmbed

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2426.5340551802665!2d-1.3732330000000013!3d52.541864000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48775aa3a9b0d003%3A0x733a43420fa646be!2sAT+Home+Furniture!5e0!3m2!1sen!2s!4v1392282549357" width="600" height="450" frameborder="0" style="border:0"></iframe>

在桌面上，一切正常，您可以点击“在Google Maps上查看”，并且如您所期望的那样，在Google Maps上显示商店位置。但是，在移动设备（Nexus 5、iPad 3、Nexus 7）上单击此链接时，它只会打开Google Maps应用程序到一般区域，并且人们必须手动输入搜索来找到商店（下面是出现的屏幕截图）。这肯定不是Google Maps的错误吧？我做错了什么？其他人是否有同样的经历？

网站链接是：AT Home Furniture 2014-02-25编辑 - 如果没有办法解决这个问题（Google肯定会忽略某些东西？！），那么使用API能否复制此功能（如果用户已登录，则自定义地图）？如果您查看该网站，您应该可以看到这一点，但这是Google Maps嵌入iFrame时的标准功能。

2014-02-26编辑 - 如果我使用Google Maps API，我该如何放置指向“完整地图”的链接（在桌面和移动设备上都能打开）？ Google Maps Embed Broken On Mobile Devices

- BT643

W3C验证器报告您的页面内容存在一些错误。请检查一下，也许有一些可以改进的地方。 - Anto Jurković

现在一切都已经完全验证 :) 问题仍然存在（显然）。 - BT643

1

你是在说我应该使用Google Maps API而不是嵌入它们提供的iFrame代码吗？为什么iFrame在移动端上不能正常工作？这似乎有些奇怪！ - BT643

嵌入代码对移动端的设计不够完善，这就是为什么他们开发了Google Maps v3 API。该API旨在跨平台无缝使用。 - QuestionMarks

这里有一个很好的总结和有用的信息：https://dev59.com/UWYq5IYBdhLWcg3wkRi_ - QuestionMarks

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Gunawardena · Accepted Answer

您可以使用自定义地图API信息窗口来显示共享地图链接等内容。

在此处查看示例：http://jsfiddle.net/PEHba/7/ 您可以添加任意数量的标记。只需将第8-13行放入循环中即可。要在单击标记时显示的所有信息必须包含在标记内。单击后，我们使用this.xyz来访问它们。

google.maps.event.addDomListener(window, 'load',       function() {
    var map = new google.maps.Map(document.getElementById("map-canvas"),
    {
        center: new google.maps.LatLng(52.54215, -1.37335),
        zoom: 14
    });
    //add a marker
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(52.542151, -1.373351),
        map: map,
        title:"Hello World!",
        View_on_Google_Maps_link: 'https://www.google.com/maps/place/AT+Home+Furniture/@52.541864,-1.373233,16z/data=!4m2!3m1!1s0x0:0x733a43420fa646be?hl=en-GB'
    });

    //attach a click event to the marker to display the info window.
    google.maps.event.addListener(marker, 'click', function() {
        //create a info window to show when a maker is clicked
        var infowindow = new google.maps.InfoWindow({
            content: '<div>Share link: '+ this.View_on_Google_Maps_link +'.</div>'
        }); 
        infowindow.open(map,this);
    });



});