1

I am trying to display Google Maps markers with a circular icon as a SVG path.

I have this HTML:

<div id="map-canvas"></div>

And this javascript:

function initialize() {

  let mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(48, 20)
  }

  let map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions)

  let circle = {
    path: 'M 1, 2 a 1,1 0 1,1 2,0 a 1,1 0 1,1 -2,0',
    anchor: new google.maps.Point(2, 2),
    scale: 10
  }

  let marker = new google.maps.Marker({
    position: map.getCenter(),
    icon: circle,
    map: map
  })
}

google.maps.event.addDomListener(window, 'load', initialize);

http://jsfiddle.net/ea32j950/

Google Maps renders the SVG path as an img tag inside a div tag.

Without touchscreen, both tags have calculated dimensions width: 30px; height: 30px;, which is as expected (in all browsers I tested).

enter image description here

But on a laptop with touchscreen there are some unexpected margins rendered. Both img and div tag have calculated dimensions width: 46px; height: 46px;. Both in Chrome and Firefox:

enter image description here

How can I prevent this difference? Is there a way to override the setting window.navigator['maxTouchPoints'] of the client?

Edit: "Device Manager -> Human Interface Devices -> HID-compliant touch screen -> Disable" seems to cause window.navigator['maxTouchPoints'] = 0 and the issue is gone. Is there any other workaround, which keeps the touchscreen functionality outside of the webpage?

When I draw two markers close to each other, hovering over the marker with lower z-index causes the tooltip of the other marker to show up due to the margin.

I have tried setting a circular MarkerShape but the problem remains: http://jsfiddle.net/shrt8axj/

Edit: I ended up opening a new issue with Google.

mirelon
  • 4,896
  • 6
  • 40
  • 70
  • Why you guys think the question needs more focus? There is a jsfiddle link, which clearly shows the rendered marker is bigger on windows than on linux. – mirelon Jun 21 '20 at 12:03
  • Have you tried [`size`](https://developers.google.com/maps/documentation/javascript/reference/marker#Icon.size) or [`scaledSize`](https://developers.google.com/maps/documentation/javascript/reference/marker#Icon.scaledSize) on the [`icon`](https://developers.google.com/maps/documentation/javascript/reference/marker#Icon) itself? – MrUpsidown Jun 22 '20 at 12:14
  • I have tried all combinations of scale / size / scaledSize, but the size is still 46 instead of 30. If I omit the "scale: 10", the calculated dimensions on windows are 20x20 regardless on the size / scaledSize attribute: https://imgur.com/a/XuoIjZJ. If you have windows, you can verify it on http://jsfiddle.net/ea32j950/ – mirelon Jun 22 '20 at 12:54
  • I am not on Windows so it's hard for me to try... Still, could you provide a fiddle or update your question to include how you have tried the other attributes? Also did you search in the [issue tracker](https://issuetracker.google.com/issues?q=status:open%20componentid:188853) to see if this was already reported? – MrUpsidown Jun 22 '20 at 13:01
  • `scaledSize: new google.maps.Size(30, 30)` http://jsfiddle.net/25avqxpw/ `size: new google.maps.Size(30, 30)` http://jsfiddle.net/25avqxpw/1/ ... and more combinations. It does not make sense to post here all combinations that do not work. Thanks for the mention of the issue tracker. There is no ticket like this one. Do you think I should create a ticket on the issue tracker? – mirelon Jun 22 '20 at 13:50
  • `size` and `scaledSize` are only available on the `Icon` interface and you are using the `Symbol` interface, so indeed, `scale` is your only option. What you *could* try though, is to convert your SVG **path** to a SVG **file** if that's an option, and use the SVG file with the `Icon` interface, with which you can then use the 2 aforementioned properties. No idea if this will fix the issue but might be worth trying. Some useful info maybe in [my answer here](https://stackoverflow.com/a/24426400/1238965). – MrUpsidown Jun 22 '20 at 14:34
  • You certainly can open a new issue in the tracker if you believe this is a bug. But don't expect a quick answer, action or fix. – MrUpsidown Jun 22 '20 at 14:45
  • @MrUpsidown thanks for the ideas. Unfortunately, using file is not an option because of color variability requirement. Your other answer shows the same (now I believe, a bug) unexpected additional margins rendered on windows: https://imgur.com/a/9v0Wtng. There is no such margin on linux. – mirelon Jun 22 '20 at 16:49
  • What browsers have you tried on Windows? Do they all behave the same way? Also the SVG seems to be displayed at exactly the same size as your screenshots show, even with these added margins. Does it change anything to the way the Marker behaves? – MrUpsidown Jun 22 '20 at 17:49
  • I have tried chrome, firefox and edge. The changed behavior is e.g. tooltip on hover - e.g. when you have two markers close to each other, then hovering over marker with lower zindex causes tooltip of the other marker to show up (due to the margin). – mirelon Jun 23 '20 at 03:29
  • I have also tried the technique from https://stackoverflow.com/a/31338353/1878731: using icon with data URI and explicitly set viewbox. The margin still shows up: http://jsfiddle.net/w3akfjxt/ – mirelon Jun 23 '20 at 03:33
  • What about using the [`MarkerShape` interface](https://developers.google.com/maps/documentation/javascript/reference/marker?hl=en#MarkerShape)? – MrUpsidown Jun 23 '20 at 08:04
  • Interesting idea with MarkerShape, I have tried it with circular shape, but unfortunately, the tooltip is still displayed when hovering over square img tag, including the margin: http://jsfiddle.net/shrt8axj/. – mirelon Jun 23 '20 at 09:05
  • Then you should open an issue in the tracker. Link your issue here, and this question on the issue for reference. Wait. Pray. – MrUpsidown Jun 23 '20 at 10:04
  • https://issuetracker.google.com/issues/159667757 thanks for all the guiding – mirelon Jun 23 '20 at 11:21
  • 1
    The guys at issue tracker helped me isolated the issue - it occurs when there is a touchscreen. I will edit the question. – mirelon Jun 24 '20 at 10:14

0 Answers0