javascript - 如何使用Google Maps API显示商户信息？

以前，我会去Google那里，从组织的描述中获取一个iframe，然后将其粘贴到我正在处理的页面中。信息框将显示有关企业的信息，例如完整地址，电话号码和网站等（请参见下图）：



决定从头开始重做我的网站后，我决定也要尝试更新地图。这有两个原因。新版Google Maps看起来更加优美（个人喜好），使用API​​，我可以将地图样式化以适合网站的配色方案。

我从一个相当简单的javascript开始：

function initialize(data) {

    var map;
    var someLoc = new google.maps.LatLng(####,#####);

    var MY_MAPTYPE_ID = 'custom_style';

    var featureOpts = [
    {
        "stylers": [
        { "hue": "#8800ff" },
        { "lightness": 33 }
        ]
    }
    ]

    var mapOptions = {
        zoom: 12,
        center: someLoc,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
        },
        mapTypeId: MY_MAPTYPE_ID
    };

  map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

  var styledMapOptions = {
    name: 'Custom Style'
  };

  var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

  map.mapTypes.set(MY_MAPTYPE_ID, customMapType);


}


$(document).ready(function(){
    google.maps.event.addDomListener(window, 'load', initialize);
});

这给了我下面的地图：



但是，我想显示一个商户位置和相关信息的标记，因此我添加：

  var marker = new google.maps.Marker({
      position: someLoc,
      map: map,
      title: 'Hello World!'
  });


}

但这意味着我将组织显示在地图上，并创建了刚刚创建的标记：



使用Google Maps API（V3）是否可以获得与iframe（第一张图片）相同的结果？从本质上讲，我希望在页面加载时显示与业务相关的信息，所以我有类似以下内容：

最佳答案

好的，我找到了一个相当简单的解决方案。

设置maxZoom级别，以便仅显示您创建的引脚：

var mapOptions = {
        zoom: 12,
        maxZoom: 16,
        center: myLoc,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
        },
        mapTypeId: MY_MAPTYPE_ID
    };

然后使用information window添加任何其他信息。