Google Maps: Custom Marker Icon - Not Plotting At Center Of Rectangle

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 s

Solution 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:

functioninitialize() {
  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 bottomanchor: 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><scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="map"></div>