2011-04-14 5 views
0

내 웹 사이트에 기부 섹션이 있습니다. 다음 기능이 가능한지 여부에 관심이 있습니다. Google지도를 통합하려는 사이트의 기부자 부분이 있습니다. 핀이 모든 기부금에서 나온 핀을 가지고 있습니다.이 위치는 정확하지 않아야합니다 (IP 주소는 잘 작동 할 것입니다).Google지도에 데이터 또는 가능하면 IP 주소를 지정합니다.

기부 활동을 실시간으로 표시하는 Google지도를 만들 수 있는지 궁금합니다. 실제 데이터 (도시, 주)가 필요한 경우 해당 정보를 수집 할 수 있습니다. 웹 사이트는 현재 다음과 같은 방식으로 설정되어 있기 때문에 사용자가 기부 할 금액을 선택하고 페이팔 버튼을 클릭 한 다음 paypal을 통해 기부를 제출하고, 이름, 도시 및 주를 묻는 감사 페이지로 다시 라우팅하십시오.이 정보는 mySQL을 통해 저장됩니다. 사용자가이 데이터를 제공하고 제출하면 (감사 페이지에서) 제출 된 페이지는 기부자 페이지로 재 라우팅됩니다. 여기는 기부자 및 기부자를 대표하는 핀이있는 Google지도가있는 곳입니다. 그들이 사는 도시. 또한 데이터가 SQL 데이터베이스에로드되기 때문에이 데이터를 기반으로 모든 핀을 가진 맵을로드 할 수 있으며 새로운 데이터로 실시간 업데이트 할 수 있습니까? 마지막으로 PHP를 사용하고 있습니다.

누구나 어떤 포인터를 제공 할 수 있다면 너무 감사 할 것입니다. Google API는 초보자이기 때문에 기능에 대해 잘 모르겠습니다. 나는 또한 그들의 문서 및 포럼을 보려고했지만 매우 도움이되는 것을 찾지 못했습니다. 시간 내 주셔서 감사 드리며 어떤 도움을 주셔서 감사합니다!

이반

답변

1

사용자의 브라우저의 위치 정보는 W3C 위치 정보 API를 사용하여 검색 할 수 있습니다. 꽤 심층적인데, 만약 당신이 독서를 듣지 않았다면 나는 함께 놀고있는 프로토 타입 코드를 포함 시켰습니다. 현재 브라우저 위치에 마커가 표시되어야합니다.

http://dev.w3.org/geo/api/spec-source.html

당신은 당신의 데이터베이스에 위도와 경도 정보를 저장하고 나중에 분석하고 구글이 자바 스크립트와 함께지도에 마커를 삽입 할 수 있습니다.

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="http://maps.google.com/maps/api/js?sensor=true"> 
</script> 
<script type="text/javascript"> 
    function initialize(location) { 
    var latlng = new google.maps.LatLng(location.coords.latitude,location.coords.longitude); 
    var myOptions = { 
     zoom: 19, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     title:"Hello World!" 
    }); 
    } 

</script> 
</head> 
<body onload="navigator.geolocation.getCurrentPosition(initialize);"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html> 
+0

이 코드를 이용해 주셔서 감사합니다. 그러나 그것은 내가 찾고있는 것이 아니지만 좋은 시작입니다. 필자는 기증자 페이지에 액세스하는 사용자가 아닌지도에 기증 한 사람들 만 배치하는 코드를 찾고 있습니다. 나는이 코드가 누군가를지도 위에 올려 놓는 것을 두려워하며 기부 한 사람들 만 보여 주려고합니다. 나는 나의 초기 질문이 문제라고 생각한다. 당신의 대답이 아닙니다. 그러므로 도시와 국가 데이터 (SQL을 통해)가 있다고 가정하면 데이터를 Google지도에 전달하여 사이트에 표시 할 수 있습니까? 또한 몇 초마다 Googlemap을 새로 고칠 수 있습니까? 감사합니다. –

+0

내가 제공 한 코드는 사용자가 기증 할 때 양식의 필드를 채울 수있게합니다. 이 필드는 양식이 제출 될 때 데이터베이스에 저장 될 수있는 사용자의 경도 및 위도로 자동 채워집니다. javascript 명령 setInterval()을 사용하여 새 도너에게 AJAX 요청을 보낼 수 있습니다. http://www.w3schools.com/jsref/met_win_setinterval.asp Google Map Javascript API를 사용하여 새로운 기부자에게 새로운 장소 아이콘을 추가하십시오. (오버레이 추가) http://code.google.com/apis/maps/documentation/javascript/overlays.html#AddingOverlays – zer0bit

관련 문제