谷歌地图;将地方卡添加到标记

Question

如下图所示，div（左上角）显示当前的标记地址/路线/保存..

这是使用Google地图中的嵌入式iframe代码完成的。但是你怎么能用自定义＆＃34;编码＆＃34;地图吗？

geocoder = new google.maps.Geocoder();

geocoder.geocode({
    "address": nw.google_pointer
}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {

        var myOptions = {
            zoom: parseInt(nw.google_zoom),
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
            title: nw.google_pointer
        });
    } else {
        console.log('Geocode was not successful for the following reason: ' + status);
    }
});

Answer 1

jsbin with my solution

<强>背景

我需要更好的解决鼠标滚轮滚动问题here和here。获得我想要的行为的最好方法是坚持使用API​​，但我真的很喜欢嵌入式版本中显示的卡。

方式：

1. 从嵌入式版本复制卡片代码和相关的CSS。
2. 在javascript中，将卡片html附加到已渲染的地图中

我的自定义：

1. 取消＆＃34; Save＆＃34;选项，因为它不起作用。
2. 位于右上方的定位卡 - 查看javascript中附加的html，以及绝对位置的硬编码，如果您愿意，可以更改此内容或将其与类关联。

希望这适合你！

Answer 2

我在@jcsmesquita回答中添加了第二张地图，但在两张地图上有相同的地方卡：http://jsbin.com/vixehodaka/edit?html,css,js,output

所以我稍微更改了javascript代码：jsbin.com/dezorezohe/edit?html,css,js,output