구글맵 마커 + 말풍선 - v3

Open API/Google|2016. 12. 12. 18:30
반응형

구글맵 V3 + 마커 샘플입니다.


일반적으로 기본 구글맵에서 가장 많이쓰는것이기도 한데요..


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



<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Info windows</title>
	<style>
		html,
		body,
		#map-canvas {
			height: 400px;
			width:600px;
			margin: 0px;
			padding: 0px
		}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
		function initialize() {
			var myLatlng = new google.maps.LatLng(37.55544,127.07590);		// 위경도 수정
			var mapOptions = {
				zoom: 17,
				center: myLatlng
			};

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

                        // 말풍선 내용 수정
			var contentString = '<div style="width:100px;height:50px;">군자동 주민센터</div>';		

			var infowindow = new google.maps.InfoWindow({
				content: contentString,
				size: new google.maps.Size(200,100)
			});

			var marker = new google.maps.Marker({
				position: myLatlng,
				map: map
			});
			google.maps.event.addListener(marker, 'click', function() {
				infowindow.open(map, marker);
			});
		}

		google.maps.event.addDomListener(window, 'load', initialize);
	</script>
</head>

<body>
	<div id="map-canvas"></div>
</body>

</html>

* Info Window :  https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple?hl=ko* Info Window Options : https://developers.google.com/maps/documentation/javascript/reference?hl=ko#InfoWindowOptions

저작자표시

댓글()

Google Places API를 이용한 주변 지역 정보 검색

Open API/Google|2016. 11. 22. 16:39
반응형



간만에 구글 API를 보던 중 재미난 샘플이 있어서 살짝 들여다 봤습니다.. 맛만..;;

화면 ui 및 기능 정리가 잘되어있어서 활용 범위가 클것같습니다.

Google Places 대신 자체 디비를 사용해서 쓰게되도 멋질것 같다는 생각이 듭니다.

( 메인은 Google Places 인데...어째 딴 생각이 드네요.)



아직 자세히 보지는 못해서 조만간 뜯어보고 싶네요.

복합적인 기능이다 보니 좀 단순화시켜서 개별 샘플화 하기!!

당장 하고 싶지만 일은 해야 하니까요 ㅠㅠ


보면 볼수록 구글의 방대한 데이터는..후덜덜하네요


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



대략 적인 기능은 


지역명 자동완성 기능 - Autocomplete

좌표 이동시 getBounds() 를 이용하여 화면내에 위치한 마커만 표시

PlacesService 로 지역정보 검색 등등.....   


API Url : https://developers.google.com/places/?hl=ko


참고 Url : https://developers.google.com/maps/documentation/javascript/examples/place-search?hl=ko




2014.06.06 추가 내용 :


기본 검색에 대해서 

 : https://developers.google.com/places/documentation/search?hl=ko


 

검색키워드는... 

 : https://developers.google.com/places/documentation/supported_types?hl=ko








저작자표시

댓글()

Google API GeoRSS 피드에서 KmlLayer를 생성..." geoRSS 로 레이어 마커 찍기 "

Open API/Google|2016. 11. 22. 16:35
반응형




GeoRss 포맷을 이용해서 레이어 마커를 생성하는 예제입니다..


TestUrl : http://www.uhoon.co.kr/test/1972.html


Google API Url : https://developers.google.com/maps/documentation/javascript/layers?hl=ko



용어 : 


* KML ( wiki 에서 : KMLViewer )
- 키홀 마크업 언어(Keyhole Markup Language, KML)은 구글 어스, 구글 지도 및 기타 응용 프로그램에 쓰이는 XML 기반의 마크업 언어 스키마이다.



*GeoRSS ( wiki 에서 : GeoRSSViewer )

- 위치를 인코딩하기위한 새로운 표준 웹 피드 





<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>GeoRSS Layers</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, #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>
		function initialize() {
			var myLatlng = new google.maps.LatLng(49.496675, -102.65625);
			var mapOptions = {
				zoom: 4,
				center: myLatlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			}
			var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
			var georssLayer = new google.maps.KmlLayer({
				url: 'http://www.uhoon.co.kr/test/1972/georss.xml'
			});
			georssLayer.setMap(map);
		}
		google.maps.event.addDomListener(window, 'load', initialize);
	</script>
</head>

<body>
	<div id="map-canvas"></div>
</body>

</html>


저작자표시

댓글()
이전 1 2 3 4 5 다음

티스토리툴바