Je développe des sites mobiles avec Google Maps intégré via l'API Google Maps. J'ai pu arrêter certains types de comportement, mais je n'ai pas trouvé de moyen d'arrêter le défilement de la carte lorsque je fais défiler la page avec le doigt vers le bas sur l'iPhone. Voici le code que j'utilise:
<script>
function initialize() {
var mapElem = document.getElementById("map"),
myOptions = {
zoom: 13,
center: new google.maps.LatLng(41.8965,-84.063),
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
},
streetViewControl: false,
mapTypeControl: false,
disableDoubleClickZoom: true,
scrollwheel: false,
backgroundColor: '#f2efe9',
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(mapElem, myOptions);
}
</script>
<script src='http://maps.google.com/maps/api/js?sensor=false&callback=initialize'></script>
Merci d'avance.
Validez si ontouchend
est disponible dans document
.
var myOptions = {
// your other options...
draggable: !("ontouchend" in document)
};
map = new google.maps.Map(mapElem, myOptions);
draggable: false
Dans votre css:
pointer-events: none;
Vous pouvez également essayer A. Une détection mobile côté serveur que vous avez mentionnée ici puis b) incluez-la dans votre fichier .php (par exemple, header.php ou footer.php), comme suit:
function isMobile() {
return preg_match("/(Android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|Palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}
Intégrez-le dans votre code:
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(12.345, 12.345),
scrollwheel: false,
<?php echo(isMobile()) ? 'draggable: false' : ''; ?>
};
Notez que cela ne fonctionne bien entendu que si le code Javascript de Google Maps est intégré à votre fichier php.
Ajoutez ceci à votre liste myOptions:
gestureHandling: 'cooperative'
Cela provient de la documentation de Google Maps JS API. J'ai mis en œuvre une fonctionnalité similaire sur mon application Web de cartes mobiles.
je suis un noob, alors je donne une réponse noob:
essayez de mettre la largeur à 90%, de manière à laisser de la place pour le doigt sans toucher la carte.
Pour moi ça a marché :)
J'ai eu le même problème et j'ai trouvé la réponse dans une autre question StackOverflow. Cette solution fonctionnait pour moi avec ma carte sur Android en utilisant au moins Chrome.
Intégrez Google Maps à la page sans modifier le comportement de défilement de l'iPhone
Voici comment je l'ai résolu avec des techniques réactives d'interrogation des médias.
HTML au bas de la page (juste au-dessus de </body>
):
<div class="jrespond"></div>
CSS:
.jrespond{
width: 30px;
}
@media only screen and (max-width: 991px){
.jrespond{
width: 20px;
}
}
@media only screen and (max-width: 767px){
.jrespond{
width: 10px;
}
}
JavaScript:
if(jrespond == 10){
// Do mobile function
}
if(jrespond == 20){
// Do tablet function
}
if(jrespond >= 30){
// Do desktop function
}
**/// Google** map snippet
var isDraggable = true;
if(jrespond == 10){
var isDraggable = false;
}
var myOptions = {
zoom: 12,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: isDraggable
}