javascript - Google Maps: Custom Marker Icon - Not plotting at Center of Rectangle

Question

Trying to plot a rectangle area with bounds lat/lng, also plotting a marker at the center of the area, when i use the default icon of google maps which is tapering at the end, it sticks to the rectangle on zoom in /zoom out. but when using a custom icon then it does not stick to the rectangle area. please check the fiddles:

Default marker: https://jsfiddle.net/8mQ6G/473/

    var myPos = new google.maps.LatLng(47.56715, -122.1556);
    var marker = new google.maps.Marker({
        position: myPos,
        //icon: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
        map: map
      });

 var rectangle = new google.maps.Rectangle({
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: '#ffffff',
   fillOpacity: 0.35,
   map: map,
   bounds: new google.maps.LatLngBounds(
   new google.maps.LatLng(47.5204, -122.2047),
   new google.maps.LatLng(47.6139, -122.1065))
 });

Custom marker: https://jsfiddle.net/8mQ6G/472/

    var myPos = new google.maps.LatLng(47.56715, -122.1556);
    var marker = new google.maps.Marker({
        position: myPos,
        icon: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
        map: map
      });

 var rectangle = new google.maps.Rectangle({
   strokeColor: '#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: '#ffffff',
   fillOpacity: 0.35,
   map: map,
   bounds: new google.maps.LatLngBounds(
   new google.maps.LatLng(47.5204, -122.2047),
   new google.maps.LatLng(47.6139, -122.1065))
 });

What makes the custom icon plot elsewhere depends on the base of the icon if its to the left or right, since if its not in the center like the default one it will always be away form the exact lat/lng. Please suggest is there any solution to this issue.

Answer 1

Please see the discussion of complex custom markers in the documentation.

Complex icons

You may want to specify complex shapes to indicate regions that are clickable, and specify how the icons should appear relative to other overlays (their "stack order"). Icons specified in this manner should set their icon properties to an object of type Icon.

Icon objects define an image. They also define the size of the icon, the origin of the icon (if the image you want is part of a larger image in a sprite, for example), and the anchor where the icon's hotspot should be located (which is based on the origin).

You can set the anchor to whatever position on the icon you would like placed at the location (usually the tip of a "bubble" icon, but for the "i" I would think you would want the bottom of the "i" which is ~4 pixels from the bottom of the image in the center:

 var marker = new google.maps.Marker({
   position: myPos,
   icon: {
     url: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
     anchor: new google.maps.Point(16, 28)
   },
   map: map
 });

proof of concept fiddle

code snippet:

function initialize() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: new google.maps.LatLng(47.53772, -122.1153),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var myPos = new google.maps.LatLng(47.56715, -122.1556);
  var marker = new google.maps.Marker({
    position: myPos,
    icon: {
      url: "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png",
      // referenced to the upper left hand corner of the image, in pixels
      // the image is 32 x 32, this is in the center 4 pixels from the bottom
      anchor: new google.maps.Point(16, 28)
    },
    map: map
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#ffffff',
    fillOpacity: 0.35,
    map: map,
    bounds: new google.maps.LatLngBounds(
      new google.maps.LatLng(47.5204, -122.2047),
      new google.maps.LatLng(47.6139, -122.1065))
  });
}

initialize();

html,
body,
#map {
  height: 100%;
  width: 100%;
  border: 6px solid #dedede;
  margin: 0 auto;
}

<title>Google Maps JavaScript API v3 Example: Rectangle Simple</title>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>