사용자가 gmap3에서 포인트를 클릭 할 때 팝업 창으로로드하십시오.

Question

그 외에도, 나는 페이드 인을 정말 좋아할 것입니다. 내 코드를 사용하면 모든 작업을 수행 할 수 있지만 PHP 페이지가로드 될 때 즉시 박쥐에서로드되므로 효율적이 아닙니다. 사용자가 gmap상의 포인트를 클릭하면 .php 페이지가 처음로드되기를 바랍니다. 문제입니다

<?php include("locations/clinton.php"); ?> 

나는 "포함"알지만, 전혀 그렇지 작동하지 않습니다

다음은 소화에 대한 내 코드의 일부입니다.

latLng: [38.763711, -76.895458], 
    data: "<div class='sum'><img src='images/clintonicon.png' width='144' height='144' alt='Clinton' /><p>Clinton, MD 20735<br>Churches: 0<br>Population: 36,208</p></div>", 
    options: { 
     icon: "images/clintonpin.png" 
    }, 
    events: { 
     click: function (marker, event, context) { 
      $('#clinton').fadeIn('fast'); 
      $('.overlay').fadeIn('fast'); 
     }, 
     mouseover: function (marker, event, context) { 
      var map = $(this).gmap3("get"), 
       infowindow = $(this).gmap3({ 
        get: { 
         name: "infowindow" 
        } 
       }); 
      if (infowindow) { 
       infowindow.open(map, marker); 
       infowindow.setContent(context.data); 
      } else { 
       $(this).gmap3({ 
        infowindow: { 
         anchor: marker, 
         options: { 
          content: context.data 
         } 
        } 
       }); 
      } 
     }, 
     mouseout: function() { 
      var infowindow = $(this).gmap3({ 
       get: { 
        name: "infowindow" 
       } 
      }); 
      if (infowindow) { 
       infowindow.close(); 
      } 
     } 
    } 
} 

지금 나는 내 자신에 일을 해결하기 위해 최선을 노력하지만, 내가 도움을 필요로 할 때, 내가 여기 온 다음은 jQuery의. 사전 stackoverflow 하이브 마음에 감사드립니다.

Answer 1

몇 가지 옵션이 있습니다. 전통적인 "팝업"창에서 뭔가를 열려면 간단히 window.open()을 사용하고 원하는 서버 측 리소스를 가리 키기 만하면됩니다. 위와 같은 내용 :

click: function (marker, event, context) { 
    window.open('http://www.yourserver.com/locations/clinton.php'); 
} 

위의 의견에서 AJAX와 더 친숙한 것으로 들릴지 모르겠다. 모달 부문에서 더 많이 보여주는 것. jQuery .load() function은 이미 가지고있는 요소로이를 처리 할 수 ​​있어야합니다. 나는 당신의 마크 업을 모른 채 정확하지 않을 수 있지만, 그것은 다음과 같이 보일 수 있습니다

click: function (marker, event, context) { 
    $('#clinton').load('http://www.yourserver.com/locations/clinton.php', function() { 
     $('#clinton').fadeIn('fast'); 
     $('.overlay').fadeIn('fast'); 
    }); 
} 

당신이 마크 업에 맞게 조정할 수있다, 그러나 일반적인 생각은 다음과 같습니다

• #clinton 요소 (div?)가 이미 페이지에 있지만 비어 있고 숨겨져 있습니다.
• locations/clinton.php 리소스에는 해당 요소 내부에 있어야하는 마크 업만 포함되어 있습니다.

이러한 요소가 많은 경우 DOM은 다양한 마커를 클릭 할 때 동적으로 생성됩니다.

$('#clinton').empty(); 

클라이언트 측 많은 콘텐츠와 AJAX의 많은 사이의 균형을 얼마나 그것은 정말 당신에게 달려가 다시 호출이 다음 페이지가 너무 큰 만들기 시작하면 당신은 또한 필요에 따라 이러한 요소를 제거 할 수 있습니다 동일한 내용을 다시 가져 오는 서버