从 Google 地图 API v3 调用 jQuery 对话框

Question

如何从我有图片链接的 Google map API v3 信息窗口打开 jQuery 对话框，如下所示：

<a href="http://localhost:8080/files/f809ded5-7e4d-4bb5-859c-ebc48c8d4a54.JPG" class="picture" >Picture</a>

这个想法是当我单击链接时弹出对话框并从“href”显示对话框中的图片。 也许有人已经这样做了？ 谢谢！

Answer 1

DEMO

JS代码：

function initialize() {//alert('sdf');
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('mapDiv'), mapOptions);

  var contentString = '<a href="#" class="image_links" data-image="https://www.gstatic.com/webp/gallery/4.sm.jpg">Picture 1 In modal dialog</a><br>'+
      '<a href="#" class="image_links" data-image="https://www.gstatic.com/webp/gallery3/1.sm.png">Picture 2 In modal dialog</a>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

initialize();

 $(function() {
    var dialog = $( "#dialog" ).dialog();
     //$('a.image_links').on('click', function(e){
     $(document).on('click','a.image_links',function(){
         //e.preventDefault();
         //alert($(this).data('image'));
         var image_src = $(this).data('image');
         $('#image').attr("src", image_src);
         $(dialog).dialog('open');
     });

     $(dialog).dialog('close');
});

HTML：

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<div id="mapDiv" style="width: 500px; height: 375px; border: solid 2px #666;">
</div>

<div id="dialog" title="Basic dialog">
<p>
    <img src="" height="100px" width="100px" id="image"></img>
</p>
</div>