CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-maps-markers
Moritz Pfeiffer
Moritz Pfeiffer

Reputation: 487

Google Maps Retina Marker with Label

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?)

enter image description here

Upvotes: 3

Views: 1272

Answers (2)

geocodezip
geocodezip

Reputation: 161334

enter image description here

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

picture of custom marker with label

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

picture of custom marker with label and infowindow

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>

Upvotes: 4

Moritz Pfeiffer
Moritz Pfeiffer

Reputation: 487

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...

Upvotes: 0

Related Questions