CODEWITHSUNDEEP
jqueryhtmljquery-uigoogle-maps-api-3jquery-ui-dialog
user3484926
user3484926

Reputation: 47

Call jQuery dialog box from Google map API v3

How can I open jQuery dialog box from Google map API v3 info window where i have link to picture, like this:

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

The idea of this is when I click on link pops out dialog box and shows the picture in dialog box from "href". Maybe someone already have did that? Thanks!

Upvotes: 1

Views: 2319

Answers (1)

Rahul Gupta
Rahul Gupta

Reputation: 10141

DEMO

JS code:

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>

Upvotes: 1

Related Questions