Google Maps API 在 iframe 地图上获取地点文本

Question

所以我找到了几种将地图放到我的页面上的方法，第一个版本是使用这样的 iframe：

<iframe src="https://www.google.com/maps/embed/v1/place?key=[APIKEY]&amp;q=place_id:[PlaceID]"></iframe>

它给出了一个标记，如下图所示，标记旁边的地名：

但是，这并不完美，因为它在左上角有那个巨大的白框，并且根据许多 SO 帖子，您无法将其删除。

所以我想我会尝试 js 路线所以有以下代码：

var map = new google.maps.Map(this, {
  zoom: 15,
  center: { lat: options.latitude, lng: options.longitude }
});

marker = new google.maps.Marker({
  map: map,
  title: options.title
});

marker.setPlace({
  placeId: options.placeId,
  location: { lat: options.latitude, lng: options.longitude }
});

var infowindow = new google.maps.InfoWindow(
  {
    content: '<strong>' + options.title + '</strong><br />' + options.address
  });

google.maps.event.addListener(marker, 'click', function () {
  infowindow.open(map, marker);
});

所有options 都用正确的值填充。但是，这会生成以下更好的地图，因为它没有白框：

但是，即使第二张地图使用与第一张相同的地点 ID，第二张地图上也没有商店文字。

有什么方法可以更改 js 代码，使其包含像 iframe 版本中的位置文本？我已经搜索了所有文档和示例，但找不到任何设置来执行此操作

Answer 1

您可以自己将该标签添加到地图中。一种选择是使用InfoBox：

function addMapLabel(text, latlng, map) {
  var labelText = "<b>" + text + "</b>";

  var myOptions = {
    content: labelText,
    boxStyle: {
      border: "none",
      textAlign: "center",
      fontSize: "8pt",
      width: "auto",
      color: "#800000"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(10, -10),
    position: latlng,
    closeBoxURL: "",
    isHidden: false,
    pane: "mapPane",
    enableEventPropagation: true
  };

  var ibLabel = new InfoBox(myOptions);
  ibLabel.open(map);
}

proof of concept fiddle

代码 sn-p：

function addMapLabel(text, latlng, map) {
  var labelText = "<b>" + text + "</b>";

  var myOptions = {
    content: labelText,
    boxStyle: {
      border: "none",
      textAlign: "center",
      fontSize: "8pt",
      width: "auto",
      color: "#800000"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(10, -10),
    position: latlng,
    closeBoxURL: "",
    isHidden: false,
    pane: "mapPane",
    enableEventPropagation: true
  };

  var ibLabel = new InfoBox(myOptions);
  ibLabel.open(map);
}
var map;
var options = {
  placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
  latitude: 53.7153659,
  longitude: -1.8790866,
  title: "Dickies Tiles",
  address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}

function initialize() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 15,
    center: {
      lat: options.latitude,
      lng: options.longitude
    }
  });

  marker = new google.maps.Marker({
    map: map,
    title: options.title
  });

  marker.setPlace({
    placeId: options.placeId,
    location: {
      lat: options.latitude,
      lng: options.longitude
    }
  });

  var infowindow = new google.maps.InfoWindow({
    content: '<strong>' + options.title + '</strong><br />' + options.address
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
  addMapLabel(options.title, new google.maps.LatLng(options.latitude, options.longitude), map);
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>

Answer 2

以防万一其他人需要这种类型的东西，我在我接受的答案中找到了比信息框更好的插件（尽管我将其保留为已接受，因为它为我指明了正确的方向）。它是：

MarkerWithLabel。

它提供与 InfoBox 相同的功能，但也允许您像单击标记一样单击标签以打开信息窗口

我如何使用它的一个例子是：

var map;
var options = {
  placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
  latitude: 53.7153659,
  longitude: -1.8790866,
  title: "Dickies Tiles",
  address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}

function initialize() {
  var map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 15,
    center: {
      lat: options.latitude,
      lng: options.longitude
    }
  });

  var marker = new MarkerWithLabel({
    position: new google.maps.LatLng(options.latitude, options.longitude),
    map: map,
    title: options.title,
    labelContent: options.title,
    labelAnchor: new google.maps.Point(-13, 15),
    labelClass: "map-label",
    labelStyle: {
      border: 'none',
      textAlign: 'center',
      fontSize: '12px',
      width: 'auto',
      color: '#800000'
    }
  });

  marker.setPlace({
    placeId: options.placeId,
    location: {
      lat: options.latitude,
      lng: options.longitude
    }
  });

  var infowindow = new google.maps.InfoWindow({
    content: '<strong>' + options.title + '</strong><br />' + options.address
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

.map-label { text-shadow: -1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff; font-weight:bold; }

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas"></div>