In this section, I have integrated a map with markers and infoBoxes. My goal now is to replace the infoBoxes with jquery dialog() and modal window functionalities. How can I achieve this effectively?
Below is the code snippet that includes the implementation of infobox:
google.maps.event.addListener(marker,'click',function(){
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var contentStr = '<div class="m_tooltip"><h5>'+place.name+'</h5><p>'+place.formatted_address+'</p>';
if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
if (!!place.photos) contentStr += '<img src='+place.photos[0].getUrl({ 'maxWidth': 300, 'maxHeight': 300 })+'></img>';
contentStr += '<br>'+place.types+'</p>';
//contentStr += '<h5">'+place.reviews[0].text+'</h5></div>';
ib.setContent(contentStr);
ib.open(map,marker);
} else {
var contentStr = "<h5>No Result, status="+status+"</h5>";
ib.setContent(contentStr);
ib.open(map,marker);
}
});
});
gmarkers.push(marker);
My aim is to substitute this functionality with a dialog...
I attempted using the following approach:
$(function() {
$( ".m_tooltip" ).dialog({
resizable: false,
height:140,
modal: true
});
});
Unfortunately, this method did not yield the desired outcome. Any assistance or guidance would be greatly appreciated.