Google지도 마커에 jquery UI 대화 상자

Google지도에 여러 마커를 플롯해야합니다. 다음 코드는 정보 창과 함께하지만 팝업을 표시하는 마커에 대한 클릭 이벤트가 있어야합니다.하지만 Jquery를 사용하고 싶습니다. pop 정보 창 대신 대화 상자를 엽니 다. 팝업은 아무에게도 표시되지 않는 스타일 속성을 가진 div의 정보를 표시해야합니다. 누군가 pls im struggling을 도와 줄 수 있습니다.Google지도 마커에 jquery UI 대화 상자

enter code here 
<script> 
var myCenter=new google.maps.LatLng(51.508742,-0.120850); 

    function initialize() 
{ 
var mapProp = { 
    center:myCenter, 
    zoom:5, 
    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:"Hello World!" 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
    $("#mypopup").dialog(); 
    //infowindow.open(map,marker); 
    }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 

    <body> 
    <div id="googleMap" style="width:500px;height:380px;"></div> 

    <div id="mypopup" style="display:none"> <div> 


    </body> 
    </html>

출처

2014-06-16 Alfred Alfizo Mosima

이 시도 : http://jsfiddle.net/lotusgodkk/x8dSP/3525/

JS :

var myCenter = new google.maps.LatLng(51.508742, -0.120850); 

function initialize() { 
    var mapProp = { 
     center: myCenter, 
     zoom: 5, 
     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: "Hello World!" 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     console.log('clicked') 
     //$("#mypopup").dialog(); 
     var dialog = $("#mypopup").dialog({ 
      buttons: { 
       "Yes": function() { 
        alert('you chose yes'); 
       }, 
        "No": function() { 
        alert('you chose no'); 
       }, 
        "Cancel": function() { 
        dialog.dialog('close'); 
       } 
      } 
     }); 
     //infowindow.open(map,marker); 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize);

HTML :

<div id="googleMap"></div> 
<div id="mypopup">Hello</div>

CSS :

#googleMap { 
    height: 380px; 
    width: 500px; 
} 
#mypopup { 
    display:none; 
}

출처

2014-06-16 07:16:07

대단히 고마워요 –

바이올린 링크가 깨졌습니다 지금 업데이트하십시오 – ANinJa

Google지도 마커에 jquery UI 대화 상자

답변

관련 문제