Marker's shape - clickable areaCan't click point from KML if inside Polygonanchor in Marker with SVG path screws up the imageRedrawing map based on lat and long google mapGoogle Maps v3 ShapesPassing array as parameter google mapsEmbed a Google Map with approximation in my siteChange an icon using an 'if' statement in Google MapsDefine a clickable/touchable area for custom markers in android google-maps-api-2ESLint errors with .js fileHow to map the clickable area on a SVG button / link?
What risks are there when you clear your cookies instead of logging off?
How to build suspense or so to establish and justify xenophobia of characters in the eyes of the reader?
How to retract an idea already pitched to an employer?
Was Jesus good at singing?
Trapping Rain Water
"You've got another thing coming" - translation into French
Find the Factorial From the Given Prime Relationship
Should I give professor gift at the beginning of my PhD?
Smooth switching between 12 V batteries, with a toggle switch
Chemmacros scheme translation
Genetic limitations to learn certain instruments
What should the arbiter and what should have I done in this case?
Do any instruments not produce overtones?
Are there downsides to using std::string as a buffer?
Confusion about off peak timings of London trains
The eyes have it
Passing multiple files through stdin (over ssh)
What does the term "railed" mean in signal processing?
Winning Strategy for the Magician and his Apprentice
How Can I Tell The Difference Between Unmarked Sugar and Stevia?
What is wrong with this proof that symmetric matrices commute?
Was there a priest on the Titanic who stayed on the ship giving confession to as many as he could?
Movie about a boy who was born old and grew young
Using a found spellbook as a Sorcerer-Wizard multiclass
Marker's shape - clickable area
Can't click point from KML if inside Polygonanchor in Marker with SVG path screws up the imageRedrawing map based on lat and long google mapGoogle Maps v3 ShapesPassing array as parameter google mapsEmbed a Google Map with approximation in my siteChange an icon using an 'if' statement in Google MapsDefine a clickable/touchable area for custom markers in android google-maps-api-2ESLint errors with .js fileHow to map the clickable area on a SVG button / link?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I'm trying to use Google Maps Markers with circle icons. My problem is that the clickable area is a square instead of a circle.
I've tried to use Marker Shape as defined in the documentation https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerShape
As I was able to read here, you can alter the clickable area of a marker. So, I did this:
map = new google.maps.Map(document.getElementById('map'),
center: new google.maps.LatLng(47.023578942,15.368335626 ),
zoom: 8
);
m1 = new google.maps.Marker(
position: new google.maps.LatLng(47.023578942,15.368335626 ),
map: map,
icon:
path: google.maps.SymbolPath.CIRCLE,
scale: 10,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity: 1
,
shape: coords: [0,0,50,50], type: "rect"
);
m2 = new google.maps.Marker(
position: new google.maps.LatLng(47.523578942,15.368335626 ),
map: map,
icon:
path: google.maps.SymbolPath.CIRCLE,
scale: 10,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity: 1
,
shape: coords: [0,0,500], type: "circle"
);
Demo with the code: https://jsfiddle.net/6sm32nqc/1/
I've expected the clickable area to be a circle for one of the markers (the top one), but nothing is changed. The same 46x46 square clickable area is drawn (see darker area in the picture below):
I'm not sure what I'm missing here :(.
javascript google-maps google-maps-api-3
asked Mar 24 at 16:27
DragosHanDragosHan
125
add a comment |
I'm trying to use Google Maps Markers with circle icons. My problem is that the clickable area is a square instead of a circle.
I've tried to use Marker Shape as defined in the documentation https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerShape
As I was able to read here, you can alter the clickable area of a marker. So, I did this:
map = new google.maps.Map(document.getElementById('map'),
center: new google.maps.LatLng(47.023578942,15.368335626 ),
zoom: 8
);
m1 = new google.maps.Marker(
position: new google.maps.LatLng(47.023578942,15.368335626 ),
map: map,
icon:
path: google.maps.SymbolPath.CIRCLE,
scale: 10,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity: 1
,
shape: coords: [0,0,50,50], type: "rect"
);
m2 = new google.maps.Marker(
position: new google.maps.LatLng(47.523578942,15.368335626 ),
map: map,
icon:
path: google.maps.SymbolPath.CIRCLE,
scale: 10,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity: 1
,
shape: coords: [0,0,500], type: "circle"
);
Demo with the code: https://jsfiddle.net/6sm32nqc/1/
I've expected the clickable area to be a circle for one of the markers (the top one), but nothing is changed. The same 46x46 square clickable area is drawn (see darker area in the picture below):
I'm not sure what I'm missing here :(.
javascript google-maps google-maps-api-3
asked Mar 24 at 16:27
DragosHanDragosHan
125
1
I don't see this behavior.
– MrUpsidown
Mar 24 at 20:43
1
I see a small square (5px by 5px, at its upper left corner) for the marker with the "rect" shape, the other marker's click area seems to be circular and match the icon.
– geocodezip
Mar 24 at 23:43
add a comment |
I'm trying to use Google Maps Markers with circle icons. My problem is that the clickable area is a square instead of a circle.
I've tried to use Marker Shape as defined in the documentation https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerShape
As I was able to read here, you can alter the clickable area of a marker. So, I did this:
map = new google.maps.Map(document.getElementById('map'),
center: new google.maps.LatLng(47.023578942,15.368335626 ),
zoom: 8
);
m1 = new google.maps.Marker(
position: new google.maps.LatLng(47.023578942,15.368335626 ),
map: map,
icon:
path: google.maps.SymbolPath.CIRCLE,
scale: 10,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity: 1
,
shape: coords: [0,0,50,50], type: "rect"
);
m2 = new google.maps.Marker(
position: new google.maps.LatLng(47.523578942,15.368335626 ),
map: map,
icon:
path: google.maps.SymbolPath.CIRCLE,
scale: 10,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity: 1
,
shape: coords: [0,0,500], type: "circle"
);
Demo with the code: https://jsfiddle.net/6sm32nqc/1/
I've expected the clickable area to be a circle for one of the markers (the top one), but nothing is changed. The same 46x46 square clickable area is drawn (see darker area in the picture below):
I'm not sure what I'm missing here :(.
javascript google-maps google-maps-api-3
asked Mar 24 at 16:27
DragosHanDragosHan
125
I'm trying to use Google Maps Markers with circle icons. My problem is that the clickable area is a square instead of a circle.
I've tried to use Marker Shape as defined in the documentation https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerShape
As I was able to read here, you can alter the clickable area of a marker. So, I did this:
map = new google.maps.Map(document.getElementById('map'),
center: new google.maps.LatLng(47.023578942,15.368335626 ),
zoom: 8
);
m1 = new google.maps.Marker(
position: new google.maps.LatLng(47.023578942,15.368335626 ),
map: map,
icon:
path: google.maps.SymbolPath.CIRCLE,
scale: 10,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity: 1
,
shape: coords: [0,0,50,50], type: "rect"
);
m2 = new google.maps.Marker(
position: new google.maps.LatLng(47.523578942,15.368335626 ),
map: map,
icon:
path: google.maps.SymbolPath.CIRCLE,
scale: 10,
strokeColor: '#FF0000',
fillColor: '#FF0000',
fillOpacity: 1
,
shape: coords: [0,0,500], type: "circle"
);
Demo with the code: https://jsfiddle.net/6sm32nqc/1/
I've expected the clickable area to be a circle for one of the markers (the top one), but nothing is changed. The same 46x46 square clickable area is drawn (see darker area in the picture below):
I'm not sure what I'm missing here :(.
javascript google-maps google-maps-api-3
javascript google-maps google-maps-api-3
asked Mar 24 at 16:27
DragosHanDragosHan
125
asked Mar 24 at 16:27
DragosHanDragosHan
125
edited Mar 24 at 18:09
DragosHan
asked Mar 24 at 16:27
DragosHanDragosHan
125
asked Mar 24 at 16:27
DragosHanDragosHan
125
asked Mar 24 at 16:27
DragosHanDragosHan
125
125
1
I don't see this behavior.
– MrUpsidown
Mar 24 at 20:43
1
I see a small square (5px by 5px, at its upper left corner) for the marker with the "rect" shape, the other marker's click area seems to be circular and match the icon.
– geocodezip
Mar 24 at 23:43
add a comment |
1
I don't see this behavior.
– MrUpsidown
Mar 24 at 20:43
1
I see a small square (5px by 5px, at its upper left corner) for the marker with the "rect" shape, the other marker's click area seems to be circular and match the icon.
– geocodezip
Mar 24 at 23:43
1
1
I don't see this behavior.
– MrUpsidown
Mar 24 at 20:43
I don't see this behavior.
– MrUpsidown
Mar 24 at 20:43
1
1
I see a small square (5px by 5px, at its upper left corner) for the marker with the "rect" shape, the other marker's click area seems to be circular and match the icon.
– geocodezip
Mar 24 at 23:43
I see a small square (5px by 5px, at its upper left corner) for the marker with the "rect" shape, the other marker's click area seems to be circular and match the icon.
– geocodezip
Mar 24 at 23:43
add a comment |
1 Answer
1
active
oldest
votes
It seems that this problem is happening only on my OS. I tried Chrome, FF and Opera, using incognito as well and the behavior is the same, testing linked JSFiddle every time. If I try it out on different computer or in a VM, the problem disappears.
answered Mar 25 at 12:41
DragosHanDragosHan
125
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55325959%2fmarkers-shape-clickable-area%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It seems that this problem is happening only on my OS. I tried Chrome, FF and Opera, using incognito as well and the behavior is the same, testing linked JSFiddle every time. If I try it out on different computer or in a VM, the problem disappears.
answered Mar 25 at 12:41
DragosHanDragosHan
125
add a comment |
It seems that this problem is happening only on my OS. I tried Chrome, FF and Opera, using incognito as well and the behavior is the same, testing linked JSFiddle every time. If I try it out on different computer or in a VM, the problem disappears.
answered Mar 25 at 12:41
DragosHanDragosHan
125
add a comment |
It seems that this problem is happening only on my OS. I tried Chrome, FF and Opera, using incognito as well and the behavior is the same, testing linked JSFiddle every time. If I try it out on different computer or in a VM, the problem disappears.
answered Mar 25 at 12:41
DragosHanDragosHan
125
It seems that this problem is happening only on my OS. I tried Chrome, FF and Opera, using incognito as well and the behavior is the same, testing linked JSFiddle every time. If I try it out on different computer or in a VM, the problem disappears.
answered Mar 25 at 12:41
DragosHanDragosHan
125
answered Mar 25 at 12:41
DragosHanDragosHan
125
answered Mar 25 at 12:41
DragosHanDragosHan
125
answered Mar 25 at 12:41
DragosHanDragosHan
125
125
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55325959%2fmarkers-shape-clickable-area%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
I don't see this behavior.
– MrUpsidown
Mar 24 at 20:43
1
I see a small square (5px by 5px, at its upper left corner) for the marker with the "rect" shape, the other marker's click area seems to be circular and match the icon.
– geocodezip
Mar 24 at 23:43