중국에서 Google map 실행이 안되는 경우 해결 방법

Open API/Google|2018.10.23 14:42

중국내에서 Google map 실행이 안되는 경우 해결 방법


원인은 https 접속이 안되기 때문이고 

이 문제는 Google map FAQ에서 해결 방법을 제시해주고 있습니다.



아래 내용은 Google Map FAQ의 일부 발췌한 내용입니다.


Google Maps Platform products are served within China from the domain maps.google.cn. This domain does not support https. When making requests to Google Maps Platform products from China, please replace https://maps.googleapis.com with http://maps.google.cn.



중국에서 https://maps.googleapis.com 접속이 정상적으로 이뤄지지 않기 때문에


http 통신을 해야하고 중국내에서 이용할 수있는 도메인은 http://maps.google.cn 


아래와 같이 Google Map API javascript 파일 참조시에 도메인을 변경해줍니다.



<script src="http://maps.google.cn/maps/api/js?key=YOUR_API_KEY"
type="text/javascript">
</script>



내용이 변경될 수 있기 때문에 Google Map FAQ 링크를 함께 남깁니다.


https://developers.google.com/maps/faq#china_ws_access

댓글()

PHP + Google Translate API 연동하기

Progmming/PHP|2018.05.04 13:19

PHP + Google Translate API 연동하기



Google translate document site

https://cloud.google.com/translate/docs/?hl=ko



Google 에서 제공되는 샘플 소스

https://github.com/GoogleCloudPlatform/php-docs-samples/tree/master/translate


 

하지만 그냥 최소한의 코딩으로 처리를 하고자 했기 때문에..


php 함수를하나 만듬.


function translate($content) { $handle = curl_init(); curl_setopt($handle, CURLOPT_URL,'https://www.googleapis.com/language/translate/v2'); curl_setopt($handle, CURLOPT_RETURNTRANSFER, 1); curl_setopt($handle, CURLOPT_SSL_VERIFYPEER, false); $data = array('key' => "API Key", 'q' => $content, 'source' => "ko", 'target' => "en"); curl_setopt($handle, CURLOPT_POSTFIELDS, preg_replace('/%5B(?:[0-9]|[1-9][0-9]+)%5D=/', '=', http_build_query($data))); curl_setopt($handle,CURLOPT_HTTPHEADER,array('X-HTTP-Method-Override: GET')); $response = curl_exec($handle); $responseDecoded = json_decode($response, true); $responseCode = curl_getinfo($handle, CURLINFO_HTTP_CODE); curl_close($handle); return $responseDecoded['data']['translations'][0]['translatedText']; }


사용을 위해 신용카드 등록이 필요하지만 처음 등록 할 경우 300달러가 제공되니 참고해주세요.

댓글()

[Google API] 구글맵 v3 infoBox

Open API/Google|2016.12.14 23:13



구글맵 infoWindow 만으로는 html 사용에 제약이 많습니다.

디자인 소스 적용이 어렵기 때문입니다.


해결을 위해 플러그인이 제공되고 있습니다.

그 이름 " infoBox" !!


좀더 자유롭게 디자인 소스를 입힐 수 있는데요.


사용하기 위해서는 infobox.js 를 추가해야 합니다.

JS : 다운로드



샘플 코드 :   http://www.uhoon.co.kr/test/6502.html


** 기본 infoWindow에서는 불가능 했던 각종 옵션들이 무궁무진합니다. ** 


API Reference :  

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
	function initialize() {
		var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

		var myMapOptions = {
			 zoom: 15
			,center: secheltLoc
			,mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


		var marker = new google.maps.Marker({
			map: theMap,
			draggable: true,
			position: new google.maps.LatLng(49.47216, -123.76307),
			visible: true
		});

		var boxText = document.createElement("div");
		boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
		boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

		var myOptions = {
			 content: boxText
			,disableAutoPan: false
			,maxWidth: 0
			,pixelOffset: new google.maps.Size(-140, 0)
			,zIndex: null
			,boxStyle: { 
			  background: "url('tipbox.gif') no-repeat"
			  ,opacity: 0.75
			  ,width: "280px"
			 }
			,closeBoxMargin: "10px 2px 2px 2px"
			,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
			,infoBoxClearance: new google.maps.Size(1, 1)
			,isHidden: false
			,pane: "floatPane"
			,enableEventPropagation: false
		};

		google.maps.event.addListener(marker, "click", function (e) {
			ib.open(theMap, this);
		});

		var ib = new InfoBox(myOptions);

		ib.open(theMap, marker);
	}
</script>

<title>Creating and Using an InfoBox</title>
</head>
<body onload="initialize()">
	<div id="map_canvas" style="width: 100%; height: 400px"></div>
	<p>
	This example shows the "traditional" use of an InfoBox as a replacement for an InfoWindow.
</body>

</html>


댓글()

구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json )

Open API/Google|2016.12.12 18:19

메일로 어느분이 재미난 아이디어를 주셔서 만들어본 샘플인데 아마 가장 활용도가 높지 않을까 합니다.


기존 포스팅 했던 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3 와 다른점은 

Ajax+Json 를 통해 동적 마커 생성이 가능하다는 점과 GPS 연동되는 부분이 추가되었다는 점입니다.

10원짜리 팁인 마커 삭제 버튼도 넣었습니다.

 

Test Url : http://www.uhoon.co.kr/test/3300.html



기능 요약 


- 구글맵 V3

- GPS 연동 현재 위치 표시

- 현재 위치 반경 원 그리기

- 현재 위치 마커를 제외한 마커 일괄 삭제

- Ajax를 통해 가져온 위치 데이터(json)를 동적으로 마커 생성.



간단히 말로 풀어서 기능설명을 하면 


Ajax를 통한 데이터 연동으로 지정범위내에 위치한 데이터를 뽑아내서 동적 마커 생성이 되는 기능이기 때문에

광범위한 부분에서 응용이 가능하리라 봅니다.


기본적으로 현재 위치(GPS) 값을 읽어와서 마커(남자사람아이콘)를 생성하고 10km 원을 그려줍니다.

그리고 Ajax를 통해 가져온 위경도 값 / 말풍선 내용으로 마커를 생성합니다.


삭제 버튼을 눌러 현재 위치를 제외한 마커를 삭제하기도하고 마커읽어오기를 통해 다시 불러오기도 합니다.

(마커 생성시 현재 위경도값은 새로 읽어옵니다.)


샘플 예제에서 Ajax로 가져온 위경도 데이터는 임의의 데이터를 가져오도록 하였으나 현재위치 및 반경 범위를 계산한 데이터를 가져와서 사용하는 등 

활용 방법은 정말 많을 것 같습니다!




댓글()

Google 웹사이트 번역기

Open API/Google|2016.11.30 10:23

구글 플러그인을 이용해서 내 블로그 , 웹사이트에 번역기능을 추가하는 방법입니다.



사이트 등록 및 스크립트 가져오는 방법 


1. 등록 Url : https://translate.google.com/manager/website/add




2. 플러그인 설정하기 .


 



3. 스크립트 얻기.




4. 등록 후 화면




 




5. 적용 화면.


 

댓글()

Google API 구글맵 출발지 도착지 주소입력해서 길찾기 - v3

Open API/Google|2016.11.21 18:18



지명 또는 주소를 입력해서 

이동 수단 별 이동 경로를 알려주는 기능


국내 Driving , Walking 은 잘 안되는듯함...Transit 은 잘 됨..


Test Url : http://www.uhoon.co.kr/test/872.html



<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <style type="text/css">
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
 
        #map-canvas, #map_canvas {
          height: 100%;
        }
 
        @media print {
          html, body {
            height: auto;
          }
 
          #map_canvas {
            height: 650px;
          }
        }
 
        #panel {
          position: absolute;
          top: 5px;
          left: 50%;
          margin-left: -180px;
          z-index: 5;
          background-color: #fff;
          padding: 5px;
          border: 1px solid #999;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
 
    function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer();
      var chicago = new google.maps.LatLng(41.850033, -87.6500523);
      var mapOptions = {
        zoom:7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: chicago
      }
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      directionsDisplay.setMap(map);
    }
 
    function calcRoute() {
      var start = document.getElementById('start').value;
      var end = document.getElementById('end').value;
      var mode = document.getElementById('mode').value;
 
      var request = {
          origin:start,
          destination:end,
          travelMode: eval("google.maps.DirectionsTravelMode."+mode)
      };
      directionsService.route(request, function(response, status) {
        alert(status);  // 확인용 Alert..미사용시 삭제
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
      });
    }
 
    google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
    </head>
    <body>
        <div id="panel" >
            <b>Start: </b>
            <input type="text" id="start" />
            <b>End: </b>
            <input type="text" id="end" />
            <div>
                <strong>Mode of Travel: </strong>
                <select id="mode">
                <option value="DRIVING">Driving</option>
                <option value="WALKING">Walking</option>
                <option value="BICYCLING">Bicycling</option>
                <option value="TRANSIT">Transit</option>
                </select>
                <input type="button" value="길찾기" onclick="Javascript:calcRoute();" />
            </div>
        </div>
        <div id="map-canvas"></div>
    </body>
</html>


댓글()

Google API 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3

Open API/Google|2016.11.21 18:16



구글맵 V3 기본 기능입니다..

다음번에는 길찾기 등...animation 쪽으로..


Test Url : http://www.uhoon.co.kr/test/613.html



* 기능

 기본 맵

 아이콘 마커 (marker)

 말풍선 (infoWindow)

 주소로 위경도 검색하기 (geocoder)

 거리별 중심점 기준으로 원그리기 ( Circle )



<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>googlemap v3 </title>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<SCRIPT LANGUAGE="JavaScript">
<!--
var contentArray = [];
var iConArray = [];
var markers = [];
var iterator = 0;
var map;
var geocoder;

// infowindow contents 배열
 contentArray[0] = "Kay";
 contentArray[1] = "uhoons blog";
 contentArray[2] = "blog.uhoon.co.kr";
 contentArray[3] = "www.suvely.com";
 contentArray[4] = "www.babbabo.com";
 contentArray[5] = "blog.goodkiss.co.kr";
 contentArray[6] = "GG";
 contentArray[7] = "blog.goodkiss.co.kr";
 contentArray[8] = "II";
 contentArray[9] = "blog.goodkiss.co.kr";

// marker icon 배열
 iConArray[0] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[1] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[2] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[3] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[4] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[5] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[6] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[7] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[8] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";
 iConArray[9] = "http://google-maps-icons.googlecode.com/files/walking-tour.png";

// 위경도 배열
var markerArray = [ new google.maps.LatLng(40.3938,-3.7077)
, new google.maps.LatLng(40.45038,-3.69803)
, new google.maps.LatLng(40.45848,-3.69477)
, new google.maps.LatLng(40.40672,-3.68327)
, new google.maps.LatLng(40.43672,-3.62093)
, new google.maps.LatLng(40.46725,-3.67443)
, new google.maps.LatLng(40.43794,-3.67228)
, new google.maps.LatLng(40.46212,-3.69166)
, new google.maps.LatLng(40.41926,-3.70445)
, new google.maps.LatLng(40.42533,-3.6844)
];

function initialize() {
	geocoder = new google.maps.Geocoder();

	var mapOptions = {
		zoom: 11,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: new google.maps.LatLng(40.4167754,-3.7037901999999576)
	};

	map = new google.maps.Map(document.getElementById('map'),mapOptions);

	var populationOptions = {
		strokeColor: '#000000',
		strokeOpacity: 0.8,
		strokeWeight: 2,
		fillColor: '#808080',
		fillOpacity: 0.5,
		map: map,
		center: new google.maps.LatLng(40.4167754,-3.7037901999999576) ,
		radius: $("#radius").val()*1000
	};
	cityCircle = new google.maps.Circle(populationOptions);
}

// 주소 검색
function showAddress() {
	var address = $("#address").val();
	geocoder.geocode( { 'address': address}, function(results, status) {
		if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);
			var marker = new google.maps.Marker({
				map: map,
				position: results[0].geometry.location,
				draggable: true
			});

			google.maps.event.addListener(marker, "dragend", function(event) {
				var point = marker.getPosition();
				$("#latitude").val(point.lat());
				$("#longitude").val(point.lng());

				var populationOptions = {
					strokeColor: '#000000',
					strokeOpacity: 0.8,
					strokeWeight: 2,
					fillColor: '#808080',
					fillOpacity: 0.5,
					map: map,
					center: new google.maps.LatLng($("#latitude").val(),$("#longitude").val()) ,
					radius: $("#radius").val()*1000
				};
				if (cityCircle)
				{
					cityCircle.setMap(null);
				}
				cityCircle = new google.maps.Circle(populationOptions);
			});

			var lat = results[0].geometry.location.lat();
			var lng = results[0].geometry.location.lng();

			$("#latitude").val(lat);
			$("#longitude").val(lng);

			var populationOptions = {
				strokeColor: '#000000',
				strokeOpacity: 0.8,
				strokeWeight: 2,
				fillColor: '#808080',
				fillOpacity: 0.5,
				map: map,
				center: new google.maps.LatLng(lat,lng) ,
				radius: $("#radius").val()*1000
			};
			if (cityCircle)
			{
				cityCircle.setMap(null);
			}
			cityCircle = new google.maps.Circle(populationOptions);

		} else {
			alert('Geocode was not successful for the following reason: ' + status);
		}
	});
}

// 드롭 마커 보기
function viewMarker() {
	for (var i = 0; i < markerArray.length; i++) {
		setTimeout(function() {
			addMarker();
		}, i * 300);
	}

	var marker = new google.maps.Marker ({
			position: new google.maps.LatLng(40.4167754,-3.7037901999999576),
			map: map,
			draggable: true
		});

	google.maps.event.addListener(marker, "dragend", function(event) {
		var point = marker.getPosition();
		$("#latitude").val(point.lat());
		$("#longitude").val(point.lng());

		var populationOptions = {
			strokeColor: '#000000',
			strokeOpacity: 0.8,
			strokeWeight: 2,
			fillColor: '#808080',
			fillOpacity: 0.5,
			map: map,
			center: new google.maps.LatLng($("#latitude").val(),$("#longitude").val()) ,
			radius: $("#radius").val()*1000
		};
		if (cityCircle)
		{
			cityCircle.setMap(null);
		}
		cityCircle = new google.maps.Circle(populationOptions);
	});
}

// 마커 추가
function addMarker() {

	var marker = new google.maps.Marker({
		position: markerArray[iterator],
		map: map,
		draggable: false,
		icon: iConArray[iterator],
		animation: google.maps.Animation.DROP
	});
	markers.push(marker);

	var infowindow = new google.maps.InfoWindow({
      content: contentArray[iterator]
	});

	google.maps.event.addListener(marker, 'click', function() {
		infowindow.open(map,marker);
	});
	iterator++;
}

// 중심 이동
function fnLocation(lat, lng) {
	myLocation = new google.maps.LatLng(lat, lng);
	map.setCenter(myLocation);
}

//google.maps.event.addDomListener(window, 'load', initialize);

$( window ).load(function() {
	initialize();
	viewMarker();
});

//-->
</SCRIPT>
<body>
radius : <select id="radius" >
	<option value="10" selected="selected">10Km</option>
	<option value="5">5Km</option>
</select>
latitude : <input type="text" id="latitude" value="40.4167754"/>
longitude: <input type="text" id="longitude" value="-3.7037901999999576"/>
<div id="map" style="width:760px;height:400px;margin-top:20px;"></div>
<label style="margin:3px 0 0 0;" for="address">address</label>
<input type="text" id="address" name="address" style="margin:3px 0 0 5px;" value=""/>
<input type="button" value="search" onclick="Javascript:showAddress();" />
</body>
</html>


댓글()

Google API geocode - 주소로 위경도 검색 v3

Open API/Google|2016.11.21 18:12



geocode - 주소를 통한 위경도 조회하기 입니다. 

  

Test Url : http://www.uhoon.co.kr/test/602.html




<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>googlemap v3 geocoder</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<script type="text/javascript">
<!--
    $(function() {
        $("#getBtn").on("click", function(){ 
            var geocoder = new google.maps.Geocoder(); 
            var address = $("#address").val();
            geocoder.geocode( { 'address': address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    //var latLng = results[0].geometry.location;   
                    var lat = results[0].geometry.location.lat();
                    var lng = results[0].geometry.location.lng();
                    $("#lat").html(lat);
                    $("#lng").html(lng);
                }
            });
        });
    });
//-->
</script>
<body> 
<div>
    <input type="text" id="address" /><input type="button" value="get Lat,Lng" id="getBtn" />
</div>
<div>
    lat : <span id="lat"></span>
</div>
<div>
    lng : <span id="lng"></span>
</div>
</body>
</html>


댓글()