Mixing
Changing the anchor point of marker after it's added
2
When creating a google maps marker, the performance may differ, when using icon parameter as object or as string.
load of:
new google.maps.Marker({
position: { lat: this.lat, lng: this.lng },
map: this.map,
icon: {url: iconUrl, anchor: anchor: new google.maps.Point(8, 8)
});
is much slower than load of this:
new google.maps.Marker({
position: { lat: this.lat, lng: this.lng },
map: this.map,
icon: iconUrl
});
It can be visible when loading big amount of points which gives 4500ms vs 400ms.
As the icon used above is 16x16px circle, the anchor should be set in google.maps.Point(8, 8).
Is it possible, to set anchor in different way or after the marker init?
The only way, I could find in google maps docs, is the way of passing anchor parameter in icon objects which requires url parameter.
Example (check the generation time in console): https://jsfiddle.net/ur76jckb/
No matter if icons is in base64, stored locally, extensions it has and the size of it. Just setting the field as object or as string makes a difference.
Google maps v3.34.16
Bug reported.
javascript google-maps google-maps-api-3 google-maps-markers
asked Nov 22 '18 at 13:12
TukkanTukkan
8031126
add a comment |
2
When creating a google maps marker, the performance may differ, when using icon parameter as object or as string.
load of:
new google.maps.Marker({
position: { lat: this.lat, lng: this.lng },
map: this.map,
icon: {url: iconUrl, anchor: anchor: new google.maps.Point(8, 8)
});
is much slower than load of this:
new google.maps.Marker({
position: { lat: this.lat, lng: this.lng },
map: this.map,
icon: iconUrl
});
It can be visible when loading big amount of points which gives 4500ms vs 400ms.
As the icon used above is 16x16px circle, the anchor should be set in google.maps.Point(8, 8).
Is it possible, to set anchor in different way or after the marker init?
The only way, I could find in google maps docs, is the way of passing anchor parameter in icon objects which requires url parameter.
Example (check the generation time in console): https://jsfiddle.net/ur76jckb/
No matter if icons is in base64, stored locally, extensions it has and the size of it. Just setting the field as object or as string makes a difference.
Google maps v3.34.16
Bug reported.
javascript google-maps google-maps-api-3 google-maps-markers
asked Nov 22 '18 at 13:12
TukkanTukkan
8031126
Strange. Never noticed that before. You could use thesetIcon()method after the marker is created but I get roughly the same results doing it that way. Couldn't find an open issue either. You might want to open one in the issue tracker.
– MrUpsidown
Nov 22 '18 at 15:54
@MrUpsidown i created one. I tried to workaround it in multiple ways, including setIcon after marker init but no luck unfortunately. This gets more problematic for larger applications with 50k+ points. the marker load just freezes the app for couple of seconds. Loading markers in chunks in timeouts, clusterer and loading markers in visible bounds helps in a way but you always have to sacrifice something other that way.
– Tukkan
Nov 22 '18 at 16:04
TBH, 50K markers at once sounds too much anyway so yes, you should think about clustering and/or only loading markers from a certain zoom level and only for the current bounds to avoid longer load times. Or maybe let your users choose via some setting, warning them that load times will be longer.
– MrUpsidown
Nov 22 '18 at 16:10
1
@MrUpsidown we already use that amount of elements. After marker creation actually it unexpectedly works fast. We also use clustering and other improvements. We can use api for loading markers in bounds, however, we often have dense marker areas and users may often move the map. This creates some unhandy situations. Marker loading/creation during map usage may create small freezes during map usage. Making marker creation time faster would enhance UX a lot. For example in app I'm working on now it's ~11seconds vs 900ms for 40K markers. Thank you for your help!
– Tukkan
Nov 22 '18 at 16:26
add a comment |
2
2
2
When creating a google maps marker, the performance may differ, when using icon parameter as object or as string.
load of:
new google.maps.Marker({
position: { lat: this.lat, lng: this.lng },
map: this.map,
icon: {url: iconUrl, anchor: anchor: new google.maps.Point(8, 8)
});
is much slower than load of this:
new google.maps.Marker({
position: { lat: this.lat, lng: this.lng },
map: this.map,
icon: iconUrl
});
It can be visible when loading big amount of points which gives 4500ms vs 400ms.
As the icon used above is 16x16px circle, the anchor should be set in google.maps.Point(8, 8).
Is it possible, to set anchor in different way or after the marker init?
The only way, I could find in google maps docs, is the way of passing anchor parameter in icon objects which requires url parameter.
Example (check the generation time in console): https://jsfiddle.net/ur76jckb/
No matter if icons is in base64, stored locally, extensions it has and the size of it. Just setting the field as object or as string makes a difference.
Google maps v3.34.16
Bug reported.
javascript google-maps google-maps-api-3 google-maps-markers
asked Nov 22 '18 at 13:12
TukkanTukkan
8031126
When creating a google maps marker, the performance may differ, when using icon parameter as object or as string.
load of:
new google.maps.Marker({
position: { lat: this.lat, lng: this.lng },
map: this.map,
icon: {url: iconUrl, anchor: anchor: new google.maps.Point(8, 8)
});
is much slower than load of this:
new google.maps.Marker({
position: { lat: this.lat, lng: this.lng },
map: this.map,
icon: iconUrl
});
It can be visible when loading big amount of points which gives 4500ms vs 400ms.
As the icon used above is 16x16px circle, the anchor should be set in google.maps.Point(8, 8).
Is it possible, to set anchor in different way or after the marker init?
The only way, I could find in google maps docs, is the way of passing anchor parameter in icon objects which requires url parameter.
Example (check the generation time in console): https://jsfiddle.net/ur76jckb/
No matter if icons is in base64, stored locally, extensions it has and the size of it. Just setting the field as object or as string makes a difference.
Google maps v3.34.16
Bug reported.
javascript google-maps google-maps-api-3 google-maps-markers
javascript google-maps google-maps-api-3 google-maps-markers
asked Nov 22 '18 at 13:12
TukkanTukkan
8031126
asked Nov 22 '18 at 13:12
TukkanTukkan
8031126
edited Nov 23 '18 at 14:37
Tukkan
asked Nov 22 '18 at 13:12
TukkanTukkan
8031126
asked Nov 22 '18 at 13:12
TukkanTukkan
8031126
asked Nov 22 '18 at 13:12
TukkanTukkan
8031126
8031126
Strange. Never noticed that before. You could use thesetIcon()method after the marker is created but I get roughly the same results doing it that way. Couldn't find an open issue either. You might want to open one in the issue tracker.
– MrUpsidown
Nov 22 '18 at 15:54
@MrUpsidown i created one. I tried to workaround it in multiple ways, including setIcon after marker init but no luck unfortunately. This gets more problematic for larger applications with 50k+ points. the marker load just freezes the app for couple of seconds. Loading markers in chunks in timeouts, clusterer and loading markers in visible bounds helps in a way but you always have to sacrifice something other that way.
– Tukkan
Nov 22 '18 at 16:04
TBH, 50K markers at once sounds too much anyway so yes, you should think about clustering and/or only loading markers from a certain zoom level and only for the current bounds to avoid longer load times. Or maybe let your users choose via some setting, warning them that load times will be longer.
– MrUpsidown
Nov 22 '18 at 16:10
1
@MrUpsidown we already use that amount of elements. After marker creation actually it unexpectedly works fast. We also use clustering and other improvements. We can use api for loading markers in bounds, however, we often have dense marker areas and users may often move the map. This creates some unhandy situations. Marker loading/creation during map usage may create small freezes during map usage. Making marker creation time faster would enhance UX a lot. For example in app I'm working on now it's ~11seconds vs 900ms for 40K markers. Thank you for your help!
– Tukkan
Nov 22 '18 at 16:26
add a comment |
Strange. Never noticed that before. You could use thesetIcon()method after the marker is created but I get roughly the same results doing it that way. Couldn't find an open issue either. You might want to open one in the issue tracker.
– MrUpsidown
Nov 22 '18 at 15:54
@MrUpsidown i created one. I tried to workaround it in multiple ways, including setIcon after marker init but no luck unfortunately. This gets more problematic for larger applications with 50k+ points. the marker load just freezes the app for couple of seconds. Loading markers in chunks in timeouts, clusterer and loading markers in visible bounds helps in a way but you always have to sacrifice something other that way.
– Tukkan
Nov 22 '18 at 16:04
TBH, 50K markers at once sounds too much anyway so yes, you should think about clustering and/or only loading markers from a certain zoom level and only for the current bounds to avoid longer load times. Or maybe let your users choose via some setting, warning them that load times will be longer.
– MrUpsidown
Nov 22 '18 at 16:10
1
@MrUpsidown we already use that amount of elements. After marker creation actually it unexpectedly works fast. We also use clustering and other improvements. We can use api for loading markers in bounds, however, we often have dense marker areas and users may often move the map. This creates some unhandy situations. Marker loading/creation during map usage may create small freezes during map usage. Making marker creation time faster would enhance UX a lot. For example in app I'm working on now it's ~11seconds vs 900ms for 40K markers. Thank you for your help!
– Tukkan
Nov 22 '18 at 16:26
Strange. Never noticed that before. You could use the
setIcon() method after the marker is created but I get roughly the same results doing it that way. Couldn't find an open issue either. You might want to open one in the issue tracker.– MrUpsidown
Nov 22 '18 at 15:54
Strange. Never noticed that before. You could use the
setIcon() method after the marker is created but I get roughly the same results doing it that way. Couldn't find an open issue either. You might want to open one in the issue tracker.– MrUpsidown
Nov 22 '18 at 15:54
@MrUpsidown i created one. I tried to workaround it in multiple ways, including setIcon after marker init but no luck unfortunately. This gets more problematic for larger applications with 50k+ points. the marker load just freezes the app for couple of seconds. Loading markers in chunks in timeouts, clusterer and loading markers in visible bounds helps in a way but you always have to sacrifice something other that way.
– Tukkan
Nov 22 '18 at 16:04
@MrUpsidown i created one. I tried to workaround it in multiple ways, including setIcon after marker init but no luck unfortunately. This gets more problematic for larger applications with 50k+ points. the marker load just freezes the app for couple of seconds. Loading markers in chunks in timeouts, clusterer and loading markers in visible bounds helps in a way but you always have to sacrifice something other that way.
– Tukkan
Nov 22 '18 at 16:04
TBH, 50K markers at once sounds too much anyway so yes, you should think about clustering and/or only loading markers from a certain zoom level and only for the current bounds to avoid longer load times. Or maybe let your users choose via some setting, warning them that load times will be longer.
– MrUpsidown
Nov 22 '18 at 16:10
TBH, 50K markers at once sounds too much anyway so yes, you should think about clustering and/or only loading markers from a certain zoom level and only for the current bounds to avoid longer load times. Or maybe let your users choose via some setting, warning them that load times will be longer.
– MrUpsidown
Nov 22 '18 at 16:10
1
1
@MrUpsidown we already use that amount of elements. After marker creation actually it unexpectedly works fast. We also use clustering and other improvements. We can use api for loading markers in bounds, however, we often have dense marker areas and users may often move the map. This creates some unhandy situations. Marker loading/creation during map usage may create small freezes during map usage. Making marker creation time faster would enhance UX a lot. For example in app I'm working on now it's ~11seconds vs 900ms for 40K markers. Thank you for your help!
– Tukkan
Nov 22 '18 at 16:26
@MrUpsidown we already use that amount of elements. After marker creation actually it unexpectedly works fast. We also use clustering and other improvements. We can use api for loading markers in bounds, however, we often have dense marker areas and users may often move the map. This creates some unhandy situations. Marker loading/creation during map usage may create small freezes during map usage. Making marker creation time faster would enhance UX a lot. For example in app I'm working on now it's ~11seconds vs 900ms for 40K markers. Thank you for your help!
– Tukkan
Nov 22 '18 at 16:26
add a comment |
1 Answer
1
active
oldest
votes
0
In order to change anchor of the marker icon after marker creation you can use the setOptions() method of the marker.
Have a look at the following example that creates a marker and changes its anchor after 3 second delay.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.88, 151.28),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-33.781552, 151.274846),
map: map,
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
});
window.setTimeout(function() {
marker.setOptions({
icon: { url:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
anchor: new google.maps.Point(16,16)
}
});
}, 3000);
}html, body, #map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" type="text/javascript"></script>I hope this helps!
answered Nov 22 '18 at 20:10
xomenaxomena
18.4k44070
I did performance tests for 20K markers and it seems that with timeout after marker init it takes 3800ms to generate markers with anchor. It's still using icon object so that may be the problem. With url object it's 4500ms, with url string 450ms. So indeed there seems to be 700ms gain. However, the difference between this solution and init by icon string is still huge.
– Tukkan
Nov 23 '18 at 8:32
You may also try to use setOptions and just set the same icon without anchor (so actually no real change at all) and it will still take such time - 450ms for marker with icon string + 3350ms for setOptions with same icon but as object with url parameter.
– Tukkan
Nov 23 '18 at 8:41
3
It sounds like an API issue. Hopefully somebody from Google will look into this. I starred your bug report in Google issue tracker.
– xomena
Nov 23 '18 at 9:39
1
I did as well. I don't know what is going on with Google though. Seems like everyone is on holidays since a few months... I have legitimate bug reports in there since mid-August that are still in "new" status and nobody had a look at it yet. Really wonder what's going on as in the past they used to at least assign it to someone. Just look at the open issues list...
– MrUpsidown
Nov 23 '18 at 10:15
Oh wow... your issue was assigned right away. I must be very unlucky then :(
– MrUpsidown
Nov 23 '18 at 11:42
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
});
}
});
draft saved
draft discarded
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%2f53431809%2fchanging-the-anchor-point-of-marker-after-its-added%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
0
In order to change anchor of the marker icon after marker creation you can use the setOptions() method of the marker.
Have a look at the following example that creates a marker and changes its anchor after 3 second delay.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.88, 151.28),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-33.781552, 151.274846),
map: map,
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
});
window.setTimeout(function() {
marker.setOptions({
icon: { url:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
anchor: new google.maps.Point(16,16)
}
});
}, 3000);
}html, body, #map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" type="text/javascript"></script>I hope this helps!
answered Nov 22 '18 at 20:10
xomenaxomena
18.4k44070
I did performance tests for 20K markers and it seems that with timeout after marker init it takes 3800ms to generate markers with anchor. It's still using icon object so that may be the problem. With url object it's 4500ms, with url string 450ms. So indeed there seems to be 700ms gain. However, the difference between this solution and init by icon string is still huge.
– Tukkan
Nov 23 '18 at 8:32
You may also try to use setOptions and just set the same icon without anchor (so actually no real change at all) and it will still take such time - 450ms for marker with icon string + 3350ms for setOptions with same icon but as object with url parameter.
– Tukkan
Nov 23 '18 at 8:41
3
It sounds like an API issue. Hopefully somebody from Google will look into this. I starred your bug report in Google issue tracker.
– xomena
Nov 23 '18 at 9:39
1
I did as well. I don't know what is going on with Google though. Seems like everyone is on holidays since a few months... I have legitimate bug reports in there since mid-August that are still in "new" status and nobody had a look at it yet. Really wonder what's going on as in the past they used to at least assign it to someone. Just look at the open issues list...
– MrUpsidown
Nov 23 '18 at 10:15
Oh wow... your issue was assigned right away. I must be very unlucky then :(
– MrUpsidown
Nov 23 '18 at 11:42
add a comment |
0
In order to change anchor of the marker icon after marker creation you can use the setOptions() method of the marker.
Have a look at the following example that creates a marker and changes its anchor after 3 second delay.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.88, 151.28),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-33.781552, 151.274846),
map: map,
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
});
window.setTimeout(function() {
marker.setOptions({
icon: { url:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
anchor: new google.maps.Point(16,16)
}
});
}, 3000);
}html, body, #map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" type="text/javascript"></script>I hope this helps!
answered Nov 22 '18 at 20:10
xomenaxomena
18.4k44070
I did performance tests for 20K markers and it seems that with timeout after marker init it takes 3800ms to generate markers with anchor. It's still using icon object so that may be the problem. With url object it's 4500ms, with url string 450ms. So indeed there seems to be 700ms gain. However, the difference between this solution and init by icon string is still huge.
– Tukkan
Nov 23 '18 at 8:32
You may also try to use setOptions and just set the same icon without anchor (so actually no real change at all) and it will still take such time - 450ms for marker with icon string + 3350ms for setOptions with same icon but as object with url parameter.
– Tukkan
Nov 23 '18 at 8:41
3
It sounds like an API issue. Hopefully somebody from Google will look into this. I starred your bug report in Google issue tracker.
– xomena
Nov 23 '18 at 9:39
1
I did as well. I don't know what is going on with Google though. Seems like everyone is on holidays since a few months... I have legitimate bug reports in there since mid-August that are still in "new" status and nobody had a look at it yet. Really wonder what's going on as in the past they used to at least assign it to someone. Just look at the open issues list...
– MrUpsidown
Nov 23 '18 at 10:15
Oh wow... your issue was assigned right away. I must be very unlucky then :(
– MrUpsidown
Nov 23 '18 at 11:42
add a comment |
0
0
0
In order to change anchor of the marker icon after marker creation you can use the setOptions() method of the marker.
Have a look at the following example that creates a marker and changes its anchor after 3 second delay.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.88, 151.28),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-33.781552, 151.274846),
map: map,
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
});
window.setTimeout(function() {
marker.setOptions({
icon: { url:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
anchor: new google.maps.Point(16,16)
}
});
}, 3000);
}html, body, #map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" type="text/javascript"></script>I hope this helps!
answered Nov 22 '18 at 20:10
xomenaxomena
18.4k44070
In order to change anchor of the marker icon after marker creation you can use the setOptions() method of the marker.
Have a look at the following example that creates a marker and changes its anchor after 3 second delay.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.88, 151.28),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-33.781552, 151.274846),
map: map,
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
});
window.setTimeout(function() {
marker.setOptions({
icon: { url:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
anchor: new google.maps.Point(16,16)
}
});
}, 3000);
}html, body, #map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" type="text/javascript"></script>I hope this helps!
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.88, 151.28),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-33.781552, 151.274846),
map: map,
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
});
window.setTimeout(function() {
marker.setOptions({
icon: { url:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
anchor: new google.maps.Point(16,16)
}
});
}, 3000);
}html, body, #map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" type="text/javascript"></script>function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.88, 151.28),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-33.781552, 151.274846),
map: map,
icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
});
window.setTimeout(function() {
marker.setOptions({
icon: { url:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
anchor: new google.maps.Point(16,16)
}
});
}, 3000);
}html, body, #map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap" type="text/javascript"></script>answered Nov 22 '18 at 20:10
xomenaxomena
18.4k44070
answered Nov 22 '18 at 20:10
xomenaxomena
18.4k44070
answered Nov 22 '18 at 20:10
xomenaxomena
18.4k44070
answered Nov 22 '18 at 20:10
xomenaxomena
18.4k44070
18.4k44070
I did performance tests for 20K markers and it seems that with timeout after marker init it takes 3800ms to generate markers with anchor. It's still using icon object so that may be the problem. With url object it's 4500ms, with url string 450ms. So indeed there seems to be 700ms gain. However, the difference between this solution and init by icon string is still huge.
– Tukkan
Nov 23 '18 at 8:32
You may also try to use setOptions and just set the same icon without anchor (so actually no real change at all) and it will still take such time - 450ms for marker with icon string + 3350ms for setOptions with same icon but as object with url parameter.
– Tukkan
Nov 23 '18 at 8:41
3
It sounds like an API issue. Hopefully somebody from Google will look into this. I starred your bug report in Google issue tracker.
– xomena
Nov 23 '18 at 9:39
1
I did as well. I don't know what is going on with Google though. Seems like everyone is on holidays since a few months... I have legitimate bug reports in there since mid-August that are still in "new" status and nobody had a look at it yet. Really wonder what's going on as in the past they used to at least assign it to someone. Just look at the open issues list...
– MrUpsidown
Nov 23 '18 at 10:15
Oh wow... your issue was assigned right away. I must be very unlucky then :(
– MrUpsidown
Nov 23 '18 at 11:42
add a comment |
I did performance tests for 20K markers and it seems that with timeout after marker init it takes 3800ms to generate markers with anchor. It's still using icon object so that may be the problem. With url object it's 4500ms, with url string 450ms. So indeed there seems to be 700ms gain. However, the difference between this solution and init by icon string is still huge.
– Tukkan
Nov 23 '18 at 8:32
You may also try to use setOptions and just set the same icon without anchor (so actually no real change at all) and it will still take such time - 450ms for marker with icon string + 3350ms for setOptions with same icon but as object with url parameter.
– Tukkan
Nov 23 '18 at 8:41
3
It sounds like an API issue. Hopefully somebody from Google will look into this. I starred your bug report in Google issue tracker.
– xomena
Nov 23 '18 at 9:39
1
I did as well. I don't know what is going on with Google though. Seems like everyone is on holidays since a few months... I have legitimate bug reports in there since mid-August that are still in "new" status and nobody had a look at it yet. Really wonder what's going on as in the past they used to at least assign it to someone. Just look at the open issues list...
– MrUpsidown
Nov 23 '18 at 10:15
Oh wow... your issue was assigned right away. I must be very unlucky then :(
– MrUpsidown
Nov 23 '18 at 11:42
I did performance tests for 20K markers and it seems that with timeout after marker init it takes 3800ms to generate markers with anchor. It's still using icon object so that may be the problem. With url object it's 4500ms, with url string 450ms. So indeed there seems to be 700ms gain. However, the difference between this solution and init by icon string is still huge.
– Tukkan
Nov 23 '18 at 8:32
I did performance tests for 20K markers and it seems that with timeout after marker init it takes 3800ms to generate markers with anchor. It's still using icon object so that may be the problem. With url object it's 4500ms, with url string 450ms. So indeed there seems to be 700ms gain. However, the difference between this solution and init by icon string is still huge.
– Tukkan
Nov 23 '18 at 8:32
You may also try to use setOptions and just set the same icon without anchor (so actually no real change at all) and it will still take such time - 450ms for marker with icon string + 3350ms for setOptions with same icon but as object with url parameter.
– Tukkan
Nov 23 '18 at 8:41
You may also try to use setOptions and just set the same icon without anchor (so actually no real change at all) and it will still take such time - 450ms for marker with icon string + 3350ms for setOptions with same icon but as object with url parameter.
– Tukkan
Nov 23 '18 at 8:41
3
3
It sounds like an API issue. Hopefully somebody from Google will look into this. I starred your bug report in Google issue tracker.
– xomena
Nov 23 '18 at 9:39
It sounds like an API issue. Hopefully somebody from Google will look into this. I starred your bug report in Google issue tracker.
– xomena
Nov 23 '18 at 9:39
1
1
I did as well. I don't know what is going on with Google though. Seems like everyone is on holidays since a few months... I have legitimate bug reports in there since mid-August that are still in "new" status and nobody had a look at it yet. Really wonder what's going on as in the past they used to at least assign it to someone. Just look at the open issues list...
– MrUpsidown
Nov 23 '18 at 10:15
I did as well. I don't know what is going on with Google though. Seems like everyone is on holidays since a few months... I have legitimate bug reports in there since mid-August that are still in "new" status and nobody had a look at it yet. Really wonder what's going on as in the past they used to at least assign it to someone. Just look at the open issues list...
– MrUpsidown
Nov 23 '18 at 10:15
Oh wow... your issue was assigned right away. I must be very unlucky then :(
– MrUpsidown
Nov 23 '18 at 11:42
Oh wow... your issue was assigned right away. I must be very unlucky then :(
– MrUpsidown
Nov 23 '18 at 11:42
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53431809%2fchanging-the-anchor-point-of-marker-after-its-added%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
Strange. Never noticed that before. You could use the
setIcon()method after the marker is created but I get roughly the same results doing it that way. Couldn't find an open issue either. You might want to open one in the issue tracker.– MrUpsidown
Nov 22 '18 at 15:54
@MrUpsidown i created one. I tried to workaround it in multiple ways, including setIcon after marker init but no luck unfortunately. This gets more problematic for larger applications with 50k+ points. the marker load just freezes the app for couple of seconds. Loading markers in chunks in timeouts, clusterer and loading markers in visible bounds helps in a way but you always have to sacrifice something other that way.
– Tukkan
Nov 22 '18 at 16:04
TBH, 50K markers at once sounds too much anyway so yes, you should think about clustering and/or only loading markers from a certain zoom level and only for the current bounds to avoid longer load times. Or maybe let your users choose via some setting, warning them that load times will be longer.
– MrUpsidown
Nov 22 '18 at 16:10
1
@MrUpsidown we already use that amount of elements. After marker creation actually it unexpectedly works fast. We also use clustering and other improvements. We can use api for loading markers in bounds, however, we often have dense marker areas and users may often move the map. This creates some unhandy situations. Marker loading/creation during map usage may create small freezes during map usage. Making marker creation time faster would enhance UX a lot. For example in app I'm working on now it's ~11seconds vs 900ms for 40K markers. Thank you for your help!
– Tukkan
Nov 22 '18 at 16:26