viewinfowindowを使用してGoogleマップマーカーに画像を表示

-1

ユーザーがマーカーをクリックしても作成できないときに画像を表示しようとしています。地図のIDが表示され、マーカーも表示されますが、マーカーをクリックすると画像は表示されません。誰でも画像を表示するには私を助けることができます：それはgoogle.maps.InfoWindowをする必要がありますviewinfowindowを使用してGoogleマップマーカーに画像を表示

<html> 
     <body> 
    <head> 
<script src="http://maps.googleapis.com/maps/api/js"> 
     </script> 
<script> 
     var x=12.35; 
     var y=14.25; 
     var myCenter=new google.maps.LatLng(x,y); 

     function initialize() 
     { 
     var mapProp = { 
         center:myCenter, 
         zoom:10, 
         mapTypeId:google.maps.MapTypeId.ROADMAP 
         }; 

     var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

     var marker=new google.maps.Marker({ 
         position:myCenter, 
              }); 

     marker.setMap(map); 

     var infowindow=new google.maps.Infowindow({ 
                content:'<div><img src="download.png"></img></div>' 
               }); 
     infowindow.open(map,marker); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 
     <div id="googleMap" style="width:500px;height:500px;"></div> 
</body> 
</body> 
</html>

出典

2017-06-03 rahul reddy

？ – geocodezip

まず問題はgoogle.maps.Infowindowである：ここに私のコードです。大文字の問題！

これは、開いていないウィンドウの問題を解決します。

マウスクリックでポップアップを開いたり閉じたりするには、クリックハンドラをに追加する必要があります。

 var currentPopup; 

     google.maps.event.addListener(marker, "click", function() { 
      if (currentPopup != null) { 
       currentPopup.close(); 
       currentPopup = null; 
      } 
      infowindow.open(map, marker); 
      currentPopup = infowindow; 
     }); 

     google.maps.event.addListener(infowindow, "closeclick", function() { 
      map.panTo(center); 
      currentPopup = null; 
     });

第一の方法は、にイベントリスナーを追加しInfoWindowsが生成されない複数のを確実にするために、変数に代入し、次にポップアップを開きます。 closeclickメソッドは、ポップアップを閉じる変数をnullにします。 viewinfowindowは何

 var x=12.35; 
 
     var y=14.25; 
 
     var myCenter=new google.maps.LatLng(x,y); 
 

 
     function initialize() 
 
     { 
 
      var mapProp = { 
 
       center:myCenter, 
 
       zoom:10, 
 
       mapTypeId:google.maps.MapTypeId.ROADMAP 
 
      }; 
 

 
      var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 
 

 
      var marker=new google.maps.Marker({ 
 
       position:myCenter, 
 
      }); 
 

 
      marker.setMap(map); 
 

 
      var infowindow=new google.maps.InfoWindow({ 
 
       content:'<div><img src="icon.png"></img></div>' 
 
      }); 
 

 
      var currentPopup; 
 

 
      google.maps.event.addListener(marker, "click", function() { 
 
       if (currentPopup != null) { 
 
        currentPopup.close(); 
 
        currentPopup = null; 
 
       } 
 
       infowindow.open(map, marker); 
 
       currentPopup = infowindow; 
 
      }); 
 

 
      google.maps.event.addListener(infowindow, "closeclick", function() { 
 
       map.panTo(center); 
 
       currentPopup = null; 
 
      }); 
 

 
     } 
 
     google.maps.event.addDomListener(window, 'load', initialize);

<html> 
 
<body> 
 
<head> 
 
    <script src="http://maps.googleapis.com/maps/api/js"></script> 
 
</head> 
 
<body> 
 
<div id="googleMap" style="width:500px;height:500px;"></div> 
 
</body> 
 
</body> 
 
</html>

出典

2017-06-03 18:53:53 jswaldon

viewinfowindowを使用してGoogleマップマーカーに画像を表示

答えて

関連する問題