2012-11-21 7 views
0

맞춤형 Google지도 둘러보기 유형 애플리케이션에서 작업 중이며 Google지도 마커 내 링크를 클릭하면 미디어를 팝업으로 가져 오는 방법이 궁금합니다. 이상적으로 이것은 내가 무엇을하고 싶은지입니다. 1. 사용자가 마커를 클릭하면 실제 Google지도처럼 일반 흰색 상자가 나타납니다. 2. 해당 텍스트 상자 안에는 어딘가에 SQL 서버에 저장된 미디어를 시작하는 버튼이 있습니다. 이 미디어는 오디오, 그림 또는 비디오 일 수 있습니다.google에서 맞춤 미디어 마커 맞춤 마커

코드는 다음과 같습니다. 누구든지 내게이 일을하는 방법을 알려주거나, 옳은 방향으로 나를 가리켜 줄 수 있다면 그것은 굉장 할 것입니다!

감사

<!doctype html> 

<html> 
<head> 
    <title>HuskyWalk Application Demo</title> 
    <meta name="viewport" conmtent="width=device-width, initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
     <style> 
      html, body, #mapcanvas { 
       margin: 0; 
       padding: 0; 
       height: 98%; 
       } 
     </style> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
     <script> 
    var map; 
    var iteCoords = new google.maps.LatLng(41.806501, -72.252769); 
    //var mapCoords = new google.maps.LatLng(navigator.getCurrentPosition().coords.latitude, navigator.getCurrentPosition().coords.longitude); 
    //var mapCoords = new navigator.getCurrentPosition().coords; 

    function initialize() { 
    //var position = new navigator.geolocation.getCurrentLocation(showPosition); 
    var mapOptions = { 
     zoom: 18, 
     center: iteCoords, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
     }; 
    map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions); 
    google.maps.event.addListenerOnce(map, "bounds_changed", watchStart); 
    var marker = createMarker(); //creates marker 
    } 

    function watchStart() { 
     if (navigator.geolocation) { 
     navigator.geolocation.watchPosition(showPosition); 
     } else { 
     alert("Geolocation is not supported by this browser."); 
     } 
    } 

    function createMarker() { 
     var marker = new google.maps.Marker({ 
      position: iteCoords, 
      map: map, 
      title: 'ITEB', 
      });   
     google.maps.event.addListener(marker, "click", onMarker_clicked); 
     return marker; 
    } 

    function onMarker_clicked() { 
     alert(this.get('id')); 
     } 

</script> 
</head> 
<body onload="initialize()"> 
    <div id="mapcanvas"></div> 
    <div> 
     <p>Maps provided by Google Maps</p> 
     </div> 
    </body> 
</html> 

내가 가장 가능성이 onMarker_Clicked() 메소드에서 몇 가지 물건을 할 필요가있을거야 알고는, 난 그냥 모르겠어요.

+0

이 나는 ​​사용자가 마커를 클릭하면 팝업 할 상자의 종류의 섹션을 참조하십시오. 그런 다음 미디어를 시작하는 링크가 있어야합니다. http://i.imgur.com/8hFMs.png – intA

답변

관련 문제