带有标签的 Google Maps Retina 标记

Question

I am handling Google Maps for Retina with this code:

var marker = new google.maps.Marker({
              position: new google.maps.LatLng(lat, lon),
              title: title,
              map: map,
              id: id,
              icon: {
                  url: "http://maps.google.com/mapfiles/kml/paddle/orange-blank.png",
                  size: new google.maps.Size(64, 64),
                  scaledSize: new google.maps.Size(40, 40),
                  origin: new google.maps.Point(0, 0),
                  anchor: new google.maps.Point(0, 0)
              },
              label: level + ""
          });

It works that the Icon itself is scaled that it is sharp on retina display. But as you can see on this Image the Label is not in the center of the Marker anymore. How to handle that? I already tried with origin and anchor without success. (The red marker is google original marker, unfortunately google doesn't have a Method to change the color of the standard marker or is there sth available?)

Answer 1

• The icon " http://maps.google.com/mapfiles/kml/paddle/orange-blank.png " is 64px x 64px.

• It is scaled to 40px x 40px.
• Its anchor should be at [20,40] (20 px right, in the center, 40 px down from the top left corner of the scaled image,at the bottom).
• The labelAnchor should be at [20, 12] (20 px right, in the center, 12 px down from the top).

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lon),
  title: title,
  map: map,
  id: id,
  icon: {
    url: "http://maps.google.com/mapfiles/kml/paddle/orange-blank.png",
    size: new google.maps.Size(64, 64),
    scaledSize: new google.maps.Size(40, 40),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(20, 40),
    labelOrigin: new google.maps.Point(20,12)
  },
  label: level + ""
});

• If you want to open an infowindow on a custom marker, you also need to set the anchorPoint option of the marker.

code snippet:

 function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var title = "title"; var id = "id"; var level = 2; var lat = map.getCenter().lat(); var lon = map.getCenter().lng(); var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lon), title: title, map: map, id: id, icon: { url: "http://maps.google.com/mapfiles/kml/paddle/orange-blank.png", size: new google.maps.Size(64, 64), scaledSize: new google.maps.Size(40, 40), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(20, 40), labelOrigin: new google.maps.Point(20, 12) }, label: level + "", anchorPoint: new google.maps.Point(0, -40) }); var infowindow = new google.maps.InfoWindow(); infowindow.setContent(marker.getPosition().toUrlValue(6)); infowindow.open(map, marker); } 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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map_canvas"></div>

Answer 2

Fixed with:

icon: {
          url: "http://maps.google.com/mapfiles/kml/paddle/red-blank.png",
          size: new google.maps.Size(32, 42),
          scaledSize: new google.maps.Size(32, 32),
          origin: new google.maps.Point(0, -10),
          anchor: new google.maps.Point(16, 42)
}

And for others using that images there are a lot of colors just try...