GaramX

사용자 도구

사이트 도구

현재 위치: home » study » googlemap
추적: • tablespace • property-binding • robot • style-binding
study:googlemap

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판		이전 판
study:googlemap [2023/11/29 02:29] – 만듦 taekgustudy:googlemap [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 1: 줄 1:
 +====== Google Map ======
  
 +Content-Security-Policy를 설정해야 됨.
 +CSRF, CORS와는 다른 보안정책임.
 +<code java> 
 + response.setHeader("Content-Security-Policy", "default-src *; style-src 'self' fonts.googleapis.com 'unsafe-inline'; script-src 'self' www.gstatic.com maps.googleapis.com api64.ipify.org 'unsafe-inline' 'unsafe-eval';frame-ancestors 'self';img-src * data: 'unsafe-inline' blob:; worker-src 'self' blob:;");
 +</code>
 +
 +<code html>
 +<script>
 +function initMap() {
 +  if("<%=S_GPS_LOC_LAT%>" == "" || "<%=S_GPS_LOC_LNG%>" == "")
 +  {
 +    var lat = null;
 +    var lng = null;
 +    if (navigator.geolocation) 
 +    { // GPS를 지원하면
 +      navigator.geolocation.getCurrentPosition(function(position) 
 +      {
 +        //pos = {lat: position.coords.latitude, lng: position.coords.longitude};
 +        lat = Number(position.coords.latitude);
 +        lng = Number(position.coords.longitude);
 +
 +        HCG.inputSetValueAuto("F_GPS_LOC_LAT",   lat);
 +        HCG.inputSetValueAuto("F_GPS_LOC_LNG",   lng);
 +        
 +        initGoogleMarker(lat, lng);
 +      }
 +      , function(error) 
 +      {
 +        alert(error.message);
 +      }
 +      , 
 +      {
 +        enableHighAccuracy: true, //배터리 소모를 줄이려면 false로
 +        maximumAge: 0,
 +        timeout: Infinity
 +      });
 +    }
 +    else
 +    {
 +      alert('GPS를 지원하지 않습니다');
 +    }
 +  }
 +
 +    var lat = Number("<%=S_GPS_LOC_LAT%>");
 +    var lng = Number("<%=S_GPS_LOC_LNG%>");
 +    initGoogleMarker(lat, lng);
 +}
 +
 +var lo_marker;
 +var lo_map;
 +function initGoogleMarker(lat, lng) {
 +
 +   var radius = 100;
 +   if("<%=S_GPS_RADIUS%>" == "")
 +   {
 +     radius = Number("100");
 +     $("#F_GPS_RADIUS").val(radius);
 +   }
 +   else
 +   {
 +     radius = Number("<%=S_GPS_RADIUS%>");
 +   }
 +   
 +   lo_map = new google.maps.Map(document.getElementById('map'), {
 +     zoom: 17,
 +     center: {lat: lat, lng: lng}
 +   });
 +   lo_marker = new google.maps.Marker({
 +   position: {lat: lat, lng: lng}, 
 +   label: {
 +   text:"<%= S_WORK_AREA_NM %>",
 +   color: "#4682B4",
 +       fontSize: "24px",
 +       fontWeight: "bold"
 +       },
 +   map: lo_map,
 +   draggable: true
 +   });
 +     
 +   var circle = new google.maps.Circle({
 +       map: lo_map,
 +       radius: radius,    // metres
 +       fillColor: '#AA0000',
 +       strokeWeight: 0
 +   });
 +     
 +   circle.bindTo('center', lo_marker, 'position');
 +   
 +   var geocoder = new google.maps.Geocoder();
 +   
 +   <%--마커이동--%>
 +   google.maps.event.addListener(lo_marker,'mouseup',function() {
 +     var slatlang = lo_marker.getPosition();
 +     $("#F_GPS_LOC_LAT").val(slatlang.lat());
 +     $("#F_GPS_LOC_LNG").val(slatlang.lng());
 +     lo_map.setCenter(lo_marker.getPosition());
 +   });
 +   
 +   <%--주소검색--%>
 +   document.getElementById('submit').addEventListener('click', function() {
 +     geocodeAddress(geocoder, lo_map);
 +   });
 +   <%--반경변경--%>
 +   document.getElementById('F_GPS_RADIUS').addEventListener('blur', function() {
 +     circle.setRadius(Number(document.getElementById('F_GPS_RADIUS').value));
 +   });
 +}
 +
 +function geocodeAddress(geocoder, resultsMap) {
 +  var address = document.getElementById('address').value;
 +  
 +  geocoder.geocode({'address': address}, function(results, status) {
 +    if (status === 'OK') {
 +      var slatlang = results[0].geometry.location;
 +      
 +      $("#F_GPS_LOC_LAT").val(slatlang.lat());
 +      $("#F_GPS_LOC_LNG").val(slatlang.lng());
 +      
 +      if( lo_marker ){
 +      lo_marker.setPosition(slatlang);
 +      lo_map.setCenter(slatlang);
 +      }
 +      
 +    } else {
 +      alert('Geocode was not successful for the following reason: ' + status);
 +    }
 +  });
 +}
 +
 +/* https://api.ipify.org에서 Call  */
 +function getIP(out_addr){
 + if("<%=S_GPS_LOC_LAT%>" == "" || "<%=S_GPS_LOC_LNG%>" == "")
 + {
 +       $("#S_IP_ADDR").val(out_addr['ip']));
 + }
 +}
 +<script>
 +<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDptKIesTrZb9ozLxolpS0ZsZVPgKeLzU8&callback=initMap" async defer></script>
 +<script type="application/javascript" src="https://api64.ipify.org?format=jsonp&callback=getIP" defer></script>
 +</code>

문서 도구