CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Michael Bradley
Michael Bradley

Reputation: 5481

Marker off-set on Google Map API v3

I've created a simple map with custom PNG markers. Is it possible to offset the attached PNG image? There does not seem to be any mention of an 'offset' in the Google Map API v3 documentation.

Upvotes: 18

Views: 32103

Answers (4)

geocodezip
geocodezip

Reputation: 161384

As of v3.10, the MarkerImage class has been deprecated, the Icon anonymous object should be used instead. From the documentation

Until version 3.10 of the Google Maps JavaScript API, complex icons were defined as MarkerImage objects. The Icon object literal was added in version 3.10, and replaces MarkerImage from version 3.11 onwards.

For example:

var marker = new google.maps.Marker({
  map:map,
  position: map.getCenter(),
  icon: {
    url: place.icon,
    size: new google.maps.Size(71, 71),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(17, 34),
    scaledSize: new google.maps.Size(25, 25)
  }
});

example fiddle

code snippet"

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions)
  var marker = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: {
      url: "https://i.sstatic.net/PYAIJ.png",
      size: new google.maps.Size(36, 36),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(18, 18),
      scaledSize: new google.maps.Size(25, 25)
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
  width: 100%;
  height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

Upvotes: 15

d2burke
d2burke

Reputation: 4111

For v3, this is how I accomplished it:

var image = new google.maps.MarkerImage("images/car1.png",
    new google.maps.Size(60, 60),
    new google.maps.Point(0,0),
    new google.maps.Point(30, 30)
);

//ADD MARKER AT EACH POINT
var marker = new google.maps.Marker();
marker.setPosition(new_point);
marker.setIcon(image);
marker.setZIndex(0);
marker.setMap(map);

Upvotes: 1

Gringo Suave
Gringo Suave

Reputation: 31910

I was looking for just this option and found a sample here:
http://econym.org.uk/gmap/custom.htm

Setting iconAnchor (on the marker data actually) worked for me.

   var Icon = new GIcon();
      Icon.image = "mymarker.png";
      Icon.iconSize = new GSize(20, 34);
      Icon.shadow = "myshadow.png";
      Icon.shadowSize = new GSize(36, 34);
      Icon.iconAnchor = new GPoint(5, 34);
      Icon.infoWindowAnchor = new GPoint(5, 2);
      Icon.transparent = "mytran.png";

Upvotes: 1

RedBlueThing
RedBlueThing

Reputation: 42532

The anchor option on the MarkerImage class lets offset the marker image from the middle center position on the marker's lat/lng:

'anchor' overrides the position of the anchor point from its default bottom middle position

Upvotes: 8

Related Questions