J'utilise le API Google Maps pour afficher de nombreux marqueurs (des milliers). Le chargement de ces marqueurs fonctionne bien si je n'ajoute pas d'étiquette et d'icône personnalisées au marqueur (quelques secondes), mais lorsque j'ajoute une étiquette et une icône personnalisées aux marqueurs, ils se chargent très lentement sur un ordinateur de type téléphone portable (environ 25 secondes sur Android). J'ai créé un codepen pour illustrer le problème : https://codepen.io/anon/pen/qXqpjN Dans ce codepen, 5000 marqueurs sont générés de manière aléatoire. Lorsque vous ouvrez ce codepen, il se charge rapidement sur un ordinateur mais lentement sur un téléphone portable. J'utilise le code suivant pour créer chaque marqueur :
var marker = new google.maps.Marker({
position: myLatLng,
label: {
color: '#000000',
fontWeight: 'bold',
text: 'text',
},
icon: {
labelOrigin: new google.maps.Point(24, 14),
url: 'http://reistip.nl/assets/img/gmap/icon/emoticons/icongreenbigprice.png',
size: new google.maps.Size(50, 60),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(11, 40),
},
});
Si je remplace le code ci-dessus par le code ci-dessous (marqueurs sans étiquette ni icône personnalisées), le chargement se fait correctement :
var marker = new google.maps.Marker({
position: myLatLng,
title: 'Hello World!'
});
Comment charger rapidement sur un téléphone portable des marqueurs dont l'étiquette et l'icône sont personnalisées ?