@extends('admin.layouts.base')

@section('contents')
<div class="group" style="margin-left: 30px; width: 300px">
        ■緯度経度座標<br>
        <span id="ctl00_ContentPlaceHolder1_lblLat" style="font-weight:bold;">緯度：</span>
        <span id="ctl00_ContentPlaceHolder1_lblLatType">北緯</span>
        <input name="ctl00$ContentPlaceHolder1$txtLat1" type="text" value="35.72907551" maxlength="11" readonly="readonly" id="ctl00_ContentPlaceHolder1_txtLat1" style="background-color: rgb(224, 224, 224); width: 100px; background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=&quot;);">
        <span id="ctl00_ContentPlaceHolder1_lblLat1_d">度</span>
        
        
        
        
        
        <br>
        <span id="ctl00_ContentPlaceHolder1_lblLon" style="font-weight:bold;">経度：</span>
        <span id="ctl00_ContentPlaceHolder1_lblLonType">東経</span>
        <input name="ctl00$ContentPlaceHolder1$txtLon1" type="text" value="139.70989734" maxlength="12" readonly="readonly" id="ctl00_ContentPlaceHolder1_txtLon1" style="background-color:#E0E0E0;width:100px;">
        <span id="ctl00_ContentPlaceHolder1_lblLon1_d">度</span>
        
        
        
        
        
        
        <br>

        <input type="hidden" name="ctl00$ContentPlaceHolder1$hMapLat" id="ctl00_ContentPlaceHolder1_hMapLat" value="35.729075506974915">
        <input type="hidden" name="ctl00$ContentPlaceHolder1$hMapLon" id="ctl00_ContentPlaceHolder1_hMapLon" value="139.70989733934402">
        <input type="hidden" name="ctl00$ContentPlaceHolder1$hZoom" id="ctl00_ContentPlaceHolder1_hZoom" value="12">
        <input type="submit" name="ctl00$ContentPlaceHolder1$btnConvert" value="" id="ctl00_ContentPlaceHolder1_btnConvert" style="color:Transparent;background-color:Transparent;border-color:Transparent;">
    </div>
<div id="map" style="position: relative; overflow: hidden; height:600px;"></div>

<script language="javascript" type="text/javascript">
// <!CDATA[
    var API_KEY = "AIzaSyD_6488ihyz6QKZuaPObrWUe0teMUVfIp8";
    $.ajax({
	url: 'https://maps.googleapis.com/maps/api/geocode/json',
	type: 'GET',
	dataType: 'json',
	data: {
		key: API_KEY,
		address: '8700926',
		language: 'ja'
	}
}).done(function(data) {
	if (data.status == "OK") {
		alert(data);
	}
});

$.ajax({
	url: 'https://maps.googleapis.com/maps/api/geocode/json',
	type: 'GET',
	dataType: 'json',
	data: {
		key: API_KEY,
		address: '大分県大分市加納17組',
		language: 'ja'
	}
}).done(function(data) {
	if (data.status == "OK") {
		alert(data);
	}
});


    var map;

    var dLat = $("#ctl00_ContentPlaceHolder1_hMapLat").val();
    var dLon = $("#ctl00_ContentPlaceHolder1_hMapLon").val();
    var posNCM;
    var strTitle = "";
    
    if (dLat != ""){
        posNCM = new google.maps.LatLng(dLat,dLon);
        if (dLat >= 0){
            strTitle = strTitle + "北緯：" + dLat + "度";
        }else{
            strTitle = strTitle + "南緯：" + (-1*dLat) + "度";
        }
            strTitle = strTitle + "  ";
        if (dLon >= 0){
            strTitle = strTitle + "東経：" + dLon + "度";
        }else{
            strTitle = strTitle + "西経：" + (-1*dLon) + "度";
        }
    }else{
        posNCM = new google.maps.LatLng(35.720121604031874,139.75289851427078);
    }
    
    var nZoom =  12;
	// 地図表示
	var myOptions = {
    	zoom: nZoom,
    	center: posNCM,
    	scaleControl:true,
    	navigationControl:true,
    	mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("map"),myOptions);
	
	// イベント設定
	google.maps.event.addListener(map, 'mousemove', function() {
        setTimeout(SetMapInfo, 3000);
    });
    google.maps.event.addListener(map, 'zoom_changed', function() {
        $("#ctl00_ContentPlaceHolder1_hZoom").val(map.getZoom());
        setTimeout(SetMapInfo, 3000);
    });
    google.maps.event.addListener(map, 'click', function(event) {
        setTimeout(GetCoordinate(event), 3000);
    });

	// マーク表示
	var beachMarker = new google.maps.Marker({
		position: posNCM,
		map: map,
		navigationControl: false,
		navigationControlOptions: {style: google.maps.NavigationControlStyle.ZOOM_PAN},
		title: strTitle
	});	

function GetCoordinate(event) {
   
    var lat = event.latLng.lat();
    var lon = event.latLng.lng();
    
	marker = createMarker(lon,lat);
	
	$("#ctl00_ContentPlaceHolder1_txtLat1").val(lat);
	$("#ctl00_ContentPlaceHolder1_txtLon1").val(lon);
	$("#ctl00_ContentPlaceHolder1_btnConvert").click();
	
}

function createMarker(x,y){
	 var marker = new google.maps.Marker({
		position: new google.maps.LatLng(x,y),
    	map: map, 
    	title: "",
    	draggable: true 
	 });
	 
	return marker;    
}

function SetMapInfo() {
    var posCenter = map.getCenter();
    var strMapInfo;
       
    strMapInfo = "中心座標　"
    if (posCenter.lat() >= 0){
      strMapInfo = strMapInfo + "北緯：" + posCenter.lat() + "度";
    }else{
      strMapInfo = strMapInfo + "南緯：" + (-1*posCenter.lat()) + "度";
    }
    strMapInfo = strMapInfo + "  ";
    if (posCenter.lng() >= 0){
      strMapInfo = strMapInfo + "東経：" + posCenter.lng() + "度";
    }else{
      strMapInfo = strMapInfo + "西経：" + (-1*posCenter.lng()) + "度";
    }
    strMapInfo = strMapInfo + "　　※緯度経度座標は、世界測地系です。";
    $("#maplatlon").text(strMapInfo);
}

// ]]>
</script>

@endsection