Centrer Google Maps sur le redimensionnement réactif avec le marqueur
J'essaie d'obtenir Google Maps pour garder son centre lors du redimensionnement de manière responsable.
J'ai réussi à obtenir la carte au centre, mais je ne peux pas savoir comment ajouter mon marqueur dans le JS pour le rendre aussi central. J'utilise le code à partir d'ici pour le centrage de la carte … Google maps réactive le redimensionnement
var map; //<-- This is now available to both event listeners and the initialize() function function initialize() { var mapOptions = { center: new google.maps.LatLng(LAT,LNG), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, scrollwheel: false, keyboardShortcuts: false, }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);} google.maps.event.addDomListener(window, 'load', initialize); google.maps.event.addDomListener(window, "resize", function() { var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); }); Le code que j'utilise pour centrer le plan est ci-dessus. J'ai aussi le code de marqueur ci-dessous, mais je ne sais pas trop comment l'ajouter pour que le centre soit aussi central.
var marker = new google.maps.Marker({ position: new google.maps.LatLng(LAT,LNG), map: map, title: 'Title', animation: google.maps.Animation.DROP, }) }
Quelqu'un peut-il aider?
- Bootstrap: conception responsable – exécuter JS lorsque la fenêtre est redimensionnée de 980px à 979px
- Ajout d'un bouton pour la liste dans une navigation adaptée
- Comment forcer la vue de bureau sur les appareils mobiles – Bootstrap?
- Redimensionnement automatique de taille de texte sur largeur de div
- Manipuler le menu jquery sur le redimensionnement pour une mise en page réactive
- Comment rendre le menu déroulant superfish réactif?
- Les images ne répondent pas par défaut à Twitter Bootstrap 3?
- JQuery: Comment détecter la largeur de la fenêtre à la volée?
- Diapositive de page horizontale réactive
- Hauteur égale à la largeur dynamique (disposition du fluide CSS)
DddddddddMMTMachachinaMappadMMMTMachachagesdachachéesAgraphieMotédachachachachachachachdetteadMachachachachachachachach GMMdachachachachéesdachachées
var map; //<-- This is now available to both event listeners and the initialize() function var mapCenter; // Declare a variable to store the center of the map var centerMarker; // declare your marker function initialize() { var mapOptions = { center: new google.maps.LatLng(LAT,LNG), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, scrollwheel: false, keyboardShortcuts: false, }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); // Create a new marker and add it to the map centerMarker = new google.maps.Marker({ position: new google.maps.LatLng(LAT,LNG), map: map, title: 'Title', animation: google.maps.Animation.DROP }); mapCenter = map.getCenter(); // Assign the center of the loaded map to the valiable } google.maps.event.addDomListener(window, 'load', initialize); google.maps.event.addDomListener(window, "resize", function() { // Here you set the center of the map based on your "mapCenter" variable map.setCenter(mapCenter); });
Modifier: Basé sur le commentaire @Chad Killingsworth: Vous pouvez ajouter un gestionnaire d'événements «inactif» à la carte pour définir la variable mapCenter . Vous pouvez réaliser ceci comme ceci:
google.maps.event.addListener(map,'idle',function(event) { mapCenter = map.getCenter(); });
Description de l'événement «inactif» du document:
Cet événement est déclenché lorsque la carte devient inactif après la panoramique ou le zoom.