web-dev-qa-db-ja.com

Google Maps API-マーカーツールチップ

現在、Googleマップのマーカータイトルが表示されないので、少し問題があります。これは私の最初の地図です。私が何を間違っているのかよくわかりません。

すべてが正常に機能し、マーカーが表示されます。ただし、マーカーをクリックまたはホバーすると、ツールチップまたはタイトルが表示されない場合があります。

どんな助けも素晴らしいです！

<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>
javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers
12
Keyfer Mathewson

おっと、投稿する前にもう少し調査を行うべきだったと思いますが、自分の解決策を投稿した方がいいと思いました。

タイトルの代わりに、Google Maps InfoWindowを使用しました。

うまくいけば、これは他の誰かを助けるでしょう！

    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);
    });
30
Keyfer Mathewson