使用 Google 地图 Javascript API 添加标记，使其看起来与在 maps.google.com 中添加的标记完全相同

Question

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"
    });
  }

Answer 1

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"></script> <div id="map"></div>