问从Google API v3调用jQuery对话框

EN

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');
});

 <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>