SVG path point at lat and long rather than side of SVG

Question

Super noob to SVG's, but I am trying to set the point on a SVG path to a lat/lng, rather than the top left corner/circle. I have the SVG path as below, and have tried to follow along with guides ex. as here, but not had luck in figuring out what to change on this SVG to make the pointer at the lat/lng.

Is there a site that helps create SVG's or move's all the path coordinatess?

I can provide further code if needed;

let icon = {
      // url: 'https://www.shareicon.net/data/128x128/2015/09/27/108149_map_512x512.png',
      // scaledSize: new window.google.maps.Size(30, 30)
      path: 'M 172.268,501.67 C 26.97,291.031 0,269.413 0,192 0,85.961 85.961,0 192,0 c 106.039,0 192,85.961 192,192 0,77.413 -26.97,99.031 -172.268,309.67 -9.535,13.774 -29.93,13.773 -39.464,0 z',
        fillColor: '#000000',
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: .1,
    }

let marker = new window.google.maps.Marker({icon: icon})

You also must reference `map` itself to attach the marker to, and the `position` (latitude, longitude) to actually place it at desired coordinates. See [this answer](https://stackoverflow.com/a/24426400/1509551) — i--, Sep 05 '18 at 21:13
Yeah I have position, title, etc, also referenced later with map, the icons display fine, just not pointing to my lat/long that I want, just removed for consolidation, hence why I said I can provide further/full code if needed — 3noki, Sep 05 '18 at 21:20
The problem is in the instantiating the `google.maps.Marker` part, so I would just provide the full code for it, `icon` code can be skipped all together. — i--, Sep 05 '18 at 21:24

score 0 · Answer 1 · answered Sep 05 '18 at 21:32

0

Figured out an answer,

I set the anchor to the point M for the SVG and this works great, (M is the Move to the absolute coordinates x,y )

anchor: new window.google.maps.Point(172.268, 501.67),

answered Sep 05 '18 at 21:32

3noki

317
1
4
13

I see, you were looking for an answer on how to offset the center of the icon and not how to place the icon at certain coordinates. It was not clear in the question, at least to me. – i-- Sep 06 '18 at 13:25
1

No problem, (it's sometimes hard to explain what one is doing...) I appreciate the help! – 3noki Sep 06 '18 at 20:20

score 0 · Answer 2 · answered Sep 06 '18 at 00:58

Looks like the anchor needs to be:

anchor: new google.maps.Point(195, 510)

Making the definition of the icon:

let icon = {
  path: 'M 172.268,501.67 C 26.97,291.031 0,269.413 0,192 0,85.961 85.961,0 192,0 c 106.039,0 192,85.961 192,192 0,77.413 -26.97,99.031 -172.268,309.67 -9.535,13.774 -29.93,13.773 -39.464,0 z',
  fillColor: '#000000',
  fillOpacity: 1,
  strokeColor: '#000',
  strokeWeight: 0, // fixes an artifact on the right side of the icon
  scale: 0.1,
  anchor: new google.maps.Point(195, 510)
}

proof of concept fiddle

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
    });
  let icon = {
    path: 'M 172.268,501.67 C 26.97,291.031 0,269.413 0,192 0,85.961 85.961,0 192,0 c 106.039,0 192,85.961 192,192 0,77.413 -26.97,99.031 -172.268,309.67 -9.535,13.774 -29.93,13.773 -39.464,0 z',
    fillColor: '#000000',
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 0,
    scale: 0.1,
    anchor: new google.maps.Point(195, 510)
  }

  let marker = new google.maps.Marker({
    icon: icon,
    map: map,
    position: map.getCenter()
  });
  // reference point
  var measle = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.5, 3.5)
    }
  })
}
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"></script>
<div id="map_canvas"></div>

SVG path point at lat and long rather than side of SVG

2 Answers2