使用 Google Maps Javascript API 添加标记，使其看起来与在 maps.google.com 中添加的标记完全相同 [英] Add marker with Google Maps Javascript API to look exactly as marker that were added in maps.google.com

问题描述

我正在尝试使用 Google Maps Javascript API 将地图添加到我的网站.我希望它看起来与使用 maps.google.com 创建的地图完全一样:

但是我无法达到这个结果，就这样:

所以我的问题是:如何在标记底部添加红点，以及如何使标题以粗体写在该点的右侧?

这是我的代码:

function initMap() {var 坐标 = { lat: 40.785845, lng: -74.020496 };var map = new google.maps.Map(document.getElementById('map'), {缩放:14，中心:坐标，滚轮:假});var 标记 = 新的 google.maps.Marker({位置:坐标，地图:地图，标签:5409 麦迪逊街"});}

解决方案

要自定义标签文本，请参阅

代码片段:

function initMap() {变量坐标 = {纬度:40.785845，液化天然气:-74.020496};var map = new google.maps.Map(document.getElementById('map'), {缩放:14，中心:坐标，滚轮:假});var measle = new google.maps.Marker({位置:坐标，地图:地图，图标: {url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",大小:新的 google.maps.Size(7, 7)，锚点:新 google.maps.Point(3.8, 3.8)}});var 标记 = 新的 google.maps.Marker({位置:坐标，地图:地图，图标: {url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",labelOrigin: 新的 google.maps.Point(75, 32),大小:新的 google.maps.Size(32, 32),锚点:新 google.maps.Point(16, 32)},标签: {文字:5409 麦迪逊街"，颜色:#C70E20"，fontWeight:粗体"}});}google.maps.event.addDomListener(window, "load", initMap);

html,身体，#地图 {高度:100%；宽度:100%；边距:0px；填充:0px}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></脚本><div id="map"></div>

I am trying to add map to my site using Google Maps Javascript API. I want it to looks exactly like map that was created with maps.google.com:

But I can not achieve this result, just this:

So my question is: how to add red dot at the bottom of a marker, and how to make title to be written on the right side of this dot in bold?

This is my code:

function initMap() {
    var coordinates = { lat: 40.785845, lng: -74.020496 };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        center: coordinates,
        scrollwheel: false
    });
    var marker = new google.maps.Marker({
        position: coordinates,
        map: map,
        label: "5409 Madison St"
    });
  }

解决方案

To customize the label text see the documentation for the markerLabel anonymous object. To control the position of the label, you need to use the Icon labelOrigin property.

var marker = new google.maps.Marker({
  position: coordinates,
  map: map,
  icon: {
    url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
    labelOrigin: new google.maps.Point(75, 32),
    size: new google.maps.Size(32,32),
    anchor: new google.maps.Point(16,32)
  },
  label: {
    text: "5409 Madison St",
    color: "#C70E20",
    fontWeight: "bold"
  }
});

To add the "red dot" ("measle") at the bottom of the marker, the simplest way is to create another marker at the same location (although you could create an icon for your marker that includes both the measle and the default red "bubble" marker).

var measle = new google.maps.Marker({
  position: coordinates,
  map: map,
  icon: {
    url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
    size: new google.maps.Size(7, 7),
    anchor: new google.maps.Point(4, 4)
  }
});

proof of concept fiddle

code snippet:

function initMap() {
  var coordinates = {
    lat: 40.785845,
    lng: -74.020496
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: coordinates,
    scrollwheel: false
  });
  var measle = new google.maps.Marker({
    position: coordinates,
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.8, 3.8)
    }
  });
  var marker = new google.maps.Marker({
    position: coordinates,
    map: map,
    icon: {
      url: "http://maps.google.com/mapfiles/ms/icons/red-dot.png",
      labelOrigin: new google.maps.Point(75, 32),
      size: new google.maps.Size(32, 32),
      anchor: new google.maps.Point(16, 32)
    },
    label: {
      text: "5409 Madison St",
      color: "#C70E20",
      fontWeight: "bold"
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

这篇关于使用 Google Maps Javascript API 添加标记，使其看起来与在 maps.google.com 中添加的标记完全相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！