GaramX

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== 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>
GaramX

사용자 도구

사이트 도구

문서 도구
