Javascript Girl
  1. Javascript Girl
  3. API Google Maps – info-bulle
Intereting Posts
Passer le paramètre URL dans le script de l'application Web Backbone js, vue de mise à jour sur le changement de modèle Date Javascript: débutant 0 pour les jours et les mois, le cas échéant Pourquoi utiliser si (!! err)? Trouver le nombre de nœuds entre deux éléments avec jquery? Qu'est-ce que Dojo considère comme une erreur de demande XHR? Comment puis-je obtenir cet appel eval () pour travailler dans IE? Cacher la barre de défilement mais capable de faire défiler avec la souris Ajout et suppression de classes dans angularJs en utilisant ng-click JS: comment coder un image.png en code base64 pour l'intégration d'URI de données? Angularfire ne peut pas lire la propriété 'push' of null Ouvrir la page dans une nouvelle fenêtre sans blocage contextuel Quelle est la différence entre les méthodes isPresent et isDisplayed Comment désactiver la fonctionnalité de mise en miroir d'actions multi-périphériques de BrowserSync? (Mode fantôme) Erreur: fournisseur inconnu: translateFilterProvider <- translateFilter angularjs

API Google Maps – info-bulle

J'ai un peu de problème en ce moment avec mes titres de google maps qui ne sont pas affichés. C'est ma première carte, je ne suis pas trop sur ce que je fais mal.

Tout fonctionne bien, et le marqueur apparaît, sauf lorsque vous cliquez / basculez sur le marqueur, l'info-bulle ou le titre ne s'affiche pas, quand il devrait.

Toute aide est excellente! 

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> <script> function initialize() { // set mapOptions var mapOptions = { center: new google.maps.LatLng(40, -20), zoom: 3, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}] }; // set min and max zoom var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var opt = { minZoom: 3, maxZoom: 21 }; map.setOptions(opt); // bounds of the desired area var allowedBounds = new google.maps.LatLngBounds( new google.maps.LatLng(-79.00, -180.00), new google.maps.LatLng(79.00, 180.00) ); var boundLimits = { maxLat : allowedBounds.getNorthEast().lat(), maxLng : allowedBounds.getNorthEast().lng(), minLat : allowedBounds.getSouthWest().lat(), minLng : allowedBounds.getSouthWest().lng() }; var lastValidCenter = map.getCenter(); var newLat, newLng; google.maps.event.addListener(map, 'center_changed', function() { center = map.getCenter(); if (allowedBounds.contains(center)) { // still within valid bounds, so save the last valid position lastValidCenter = map.getCenter(); return; } newLat = lastValidCenter.lat(); newLng = lastValidCenter.lng(); if(center.lng() > boundLimits.minLng && center.lng() < boundLimits.maxLng){ newLng = center.lng(); } if(center.lat() > boundLimits.minLat && center.lat() < boundLimits.maxLat){ newLat = center.lat(); } map.panTo(new google.maps.LatLng(newLat, newLng)); }); // set markers var point = new google.maps.LatLng(40, -20); var marker = new google.maps.Marker({ position: point, title:"Hello World!" }); // To add the marker to the map, call setMap(); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script>

Woops, j'aurais probablement dû faire un peu plus de recherches avant de publier, mais j'ai pensé que je pourrais aussi publier quelle est ma propre solution.

Au lieu d'un titre, j'ai utilisé Google Maps InfoWindow:

Espérons que cela aidera quelqu'un d'autre! 

  var point = new google.maps.LatLng(40, -20); var data = "Hello World!"; var infowindow = new google.maps.InfoWindow({ content: data }); var marker = new google.maps.Marker({ position: point, title:"Hello World!" }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); });