[Google Map] Places search box 구글 자동완성을 이용한 위경도 값 가져오기

Open API/Google|2018.07.04 15:28

구글맵 위치정보를 활용한 

자동완성 기능을 적용시키는 샘플



구글의 정보는 정말 말로 할수없을 만큼 방대합니다.


그 중에서 맵데이터는 정말 놀라운데요.


기존에 장소(정확히는 도시별)별 위경도 값을 직접 데이터관리하던 부분을


구글 장소 검색 ( Places Search Box ) 기능으로 대체하게 되었습니다.


잘 구축된 API를 잘 가져다 쓰면 되기 때문에 참 편하죠.


자동완성의 반응속도도 빠르고 나름 직접 관리하는 것보다 정확하기 때문에 


여러모로 유용할것같습니다.


실제로 구현 하는 경우에는 가장 하단에 Js 참조할때 key 값을 입력해야합니다.


https://maps.googleapis.com/maps/api/js?key=여기에키값입력&libraries=places&callback=initAutocomplete

가져온 데이터에서 위경도 값을 읽어오는 부분은 
 

// place 에서 위경도 값을 읽어올 수 있음. 


▲  이라고 주석이 달린 부분을 참고하시면 될것같습니다.








◎ 실제로 구글 API의 Response값을 체크해서 데이터를 확인해보겠습니다. ( 크롬기준 )




1. 샘플 페이지를 열어서 F12를 눌러 개발자 도구를 실행하고 Network 탭으로 이동

그리고 키워드 검색을 통해 자동완성목록이 보여지는것을 확인.

그와 동시에 AutocompletionService.GetQueryPredictions 페이지를 호출하여 값을 가져옴.


(아래 이미지는 클릭하면 커집니다)




2. 목록 중 하나를 선택 했을 때 PlaceService.GetPlaceDetails 페이지를 호출하여 상세 정보를 가져옴.


(아래 이미지는 클릭하면 커집니다)



3. 해당 호출에 대한 Request


(아래 이미지는 클릭하면 커집니다)



4. 해당 호출에 대한 Response 데이터 , 이렇게 확인이 가능합니다.

실제로 Respons되는 데이터의 항목이 다양한데 이 또한 필요에 따라 활용이 가능할것같습니다.


(아래 이미지는 클릭하면 커집니다)





아래 코드의 99%는 


https://developers.google.com/maps/documentation/javascript/examples/places-searchbox


에서도 확인 하실 수 있습니다.



<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Places Searchbox</title>
	<style>
		/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

		#map {
			height: 100%;
		}

		/* Optional: Makes the sample page fill the window. */

		html,
		body {
			height: 100%;
			margin: 0;
			padding: 0;
		}

		#description {
			font-family: Roboto;
			font-size: 15px;
			font-weight: 300;
		}

		#infowindow-content .title {
			font-weight: bold;
		}

		#infowindow-content {
			display: none;
		}

		#map #infowindow-content {
			display: inline;
		}

		.pac-card {
			margin: 10px 10px 0 0;
			border-radius: 2px 0 0 2px;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			outline: none;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
			background-color: #fff;
			font-family: Roboto;
		}

		#pac-container {
			padding-bottom: 12px;
			margin-right: 12px;
		}

		.pac-controls {
			display: inline-block;
			padding: 5px 11px;
		}

		.pac-controls label {
			font-family: Roboto;
			font-size: 13px;
			font-weight: 300;
		}

		#pac-input {
			background-color: #fff;
			font-family: Roboto;
			font-size: 15px;
			font-weight: 300;
			margin-left: 12px;
			padding: 0 11px 0 13px;
			text-overflow: ellipsis;
			width: 400px;
		}

		#pac-input:focus {
			border-color: #4d90fe;
		}

		#title {
			color: #fff;
			background-color: #4d90fe;
			font-size: 25px;
			font-weight: 500;
			padding: 6px 12px;
		}

		#target {
			width: 345px;
		}
	</style>
</head>

<body> <input id="pac-input" class="controls" type="text" placeholder="Search Box">
	<div id="map"></div>
	<script>
		// This example adds a search box to a map, using the Google Place Autocomplete
		// feature. People can enter geographical searches. The search box will return a
		// pick list containing a mix of places and predicted search terms.
		// This example requires the Places library. Include the libraries=places
		// parameter when you first load the API. For example:
		// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
		function initAutocomplete() {
			var map = new google.maps.Map(document.getElementById('map'), {
				center: {
					lat: -33.8688,
					lng: 151.2195
				},
				zoom: 13,
				mapTypeId: 'roadmap'
			});
			// Create the search box and link it to the UI element.
			var input = document.getElementById('pac-input');
			var searchBox = new google.maps.places.SearchBox(input);
			map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
			// Bias the SearchBox results towards current map's viewport.
			map.addListener('bounds_changed', function() {
				searchBox.setBounds(map.getBounds());
			});
			var markers = [];
			// Listen for the event fired when the user selects a prediction and retrieve
			// more details for that place.
			searchBox.addListener('places_changed', function() {
				var places = searchBox.getPlaces();
				if (places.length == 0) {
					return;
				}
				// Clear out the old markers.
				markers.forEach(function(marker) {
					marker.setMap(null);
				});
				markers = [];
				// For each place, get the icon, name and location.
				var bounds = new google.maps.LatLngBounds();
				places.forEach(function(place) {
					if (!place.geometry) {
						console.log("Returned place contains no geometry");
						return;
					}

                                        // place 에서 위경도 값을 읽어올 수 있음. 
					console.log(place.geometry.location.lat());
					console.log(place.geometry.location.lng());

					var icon = {
						url: place.icon,
						size: new google.maps.Size(71, 71),
						origin: new google.maps.Point(0, 0),
						anchor: new google.maps.Point(17, 34),
						scaledSize: new google.maps.Size(25, 25)
					};
					// Create a marker for each place.
					markers.push(new google.maps.Marker({
						map: map,
						icon: icon,
						title: place.name,
						position: place.geometry.location
					}));
					if (place.geometry.viewport) {
						// Only geocodes have viewport.
						bounds.union(place.geometry.viewport);
					} else {
						bounds.extend(place.geometry.location);
					}
				});
				map.fitBounds(bounds);
			});
		}
	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=&libraries=places&callback=initAutocomplete" async defer></script>
</body>

</html>


댓글(0)

Javascript , Data URL을 이용한 엑셀 파일 생성하기

Open API/그 외|2018.02.21 17:12





javascript 에서 테이블 구조의 html을 전달 받아 Excel 파일을 생성하는 함수 입니다.


기본적으로 서버에서 만들어진 내용을 다운받도록 하지만 

클라이언트 쪽에서 바로 xls 파일을 생성 할 수 있도록 하는 방법입니다.

기본문법 : data:[<mediatype>][;base64],<data>



    
function fnExcelReport(cont, fileName)
{
	var ua = window.navigator.userAgent;
         
	if ( (navigator.appName == 'Netscape' && ua.search('Trident') != -1) || (ua.indexOf("msie") != -1) )       // IE
	{
		newWin = window.open();
		newWin.document.open("txt/html","replace");
		newWin.document.write(cont);
		newWin.document.close();
		newWin.focus();
		newWin.document.execCommand("SaveAs", true, fileName + ".xls");
		newWin.close();
	}
	else   //other browser
	{
		var a = document.createElement('a');
		var data_type = 'data:application/vnd.ms-excel';
		a.href = data_type + ', ' + encodeURIComponent(cont);
		a.download = fileName+'.xls';
		a.click();
		e.preventDefault();
	}
}


상세 내용은 MDN 웹 Document 를 참조하세요.


링크 : https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

댓글(0)

jquery ajax 동기처리가 안되는 경우.. async 옵션이 적용 안될 때.

Open API/Jquery|2017.09.20 18:59

jQuery ajax 옵션중에는 async 옵션이 있습니다.

이것은 기본적으로 ajax가 비동기 처리를 하지만 필요에 따라 동기 요청을 하기 위한 옵션이지만

최근 경험상 적용이 되지 않는 것이 확인되어 api 사이트를 확인해보니 

아래와 같은 내용이 확인이 됩니다.


크로스 도메인일 경우 데이터 타입이 jsonp라면 지원되지 않는다. 

위의 조건 외에도 1.8 버전 이후부터 지원되지 않음이라고 명시되어있고 

콜백 함수를 이용하도록 명시가 되어있으니 

1.8버전 혹은 최신 버전을 사용하는 경우 문제가 될 것같습니다.


그런데...되는 경우도 있고..안되는 경우도 있고...모호하네요.


확실하게 그냥 콜백 함수를 사용해야겠습니다.


 

  async (default: true)
  Type: Boolean
By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp"requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done().


http://api.jquery.com/jQuery.ajax/

댓글(0)

modal 팝업창에서 datepicker 사용 시 연도 월 Select box가 열리지 않는 문제 해결 방법

Open API/Jquery|2017.09.18 13:51


Bootstrap modal 팝업창에서 datepicker 사용 시 


changeMonth , changeYear 옵션을 true 로 사용할 경우 정상적으로 펼쳐지지 않고


바로 닫히는 버그가 있는데 꽤 오래된 상황임에도 업데이트가 되어지지 않고 있습니다.




하지만,  역시 스택오버플로우 


https://stackoverflow.com/questions/22050641/month-select-in-datepicker-inside-a-bootstrap-modal-wont-work-in-firefox


해결 방안을 제시해줍니다.


$('#modal').on('show', function () {
    $.fn.modal.Constructor.prototype.enforceFocus = function () { };
});




위와 같이 Show 혹은 modal 팝업 활성화 이후에

    $.fn.modal.Constructor.prototype.enforceFocus = function () { };

위와 같은 코딩을 실행해주면 정상적으로 연도 및 월 변경이 가능합니다.


댓글(0)

카카오링크 보내기 ( Kakao.Link )

Open API/kakao|2017.01.18 15:20



동적으로 바뀌는 내용의 카카오링크를 보내는 예제입니다.



카카오 Developers 페이지에서도 확인 하실 수 있습니다.

https://developers.kakao.com/docs/js



추가적인 함수들은 아래 링크에서 확인가능합니다.

https://developers.kakao.com/docs/js-reference#kakao_link



적용하기 위해서는 api 와 url 정보 변경이 필요합니다.


샘플 Url : http://www.uhoon.co.kr/dev/kakao/83.html



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>
<title>KakaoLink Demo(Dynamic) - Kakao JavaScript SDK</title>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>

</head>
<body>
<h3>카카오톡 앱이 설치되어 있는 모바일 기기라면 아래의 링크가 동작합니다.</h3>
<a id="kakao-link-btn" href="javascript:sendLink()">
<img src="//dev.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png"/>
</a>
<script type='text/javascript'>
  //<![CDATA[
    // 사용할 앱의 JavaScript 키를 설정해 주세요.
    Kakao.init('eb3c1b62b32108278b664b7fc35d5174');

    function sendLink() {
		Kakao.Link.sendTalkLink({
			label: '카카오톡 내보내기',
			webLink: {
				text:'http://dev.uhoon.co.kr',
				url:'dev.uhoon.co.kr'
			}
		});
    }
  //]]>
</script>

</body>
</html>


댓글(0)

카카오톡 개발자 등록 및 애플리케이션 등록

Open API/kakao|2017.01.18 15:14

카카오 API도 버전이 올라가며 많이 바뀌었네요.


밑바닥 부터 천천히 하나씩 짚어봐야겠습니다.


첫발을 내딛기 위해서는 등록부터..




▼  https://developers.kakao.com/


Kakao Developers에 로그인 합니다.





▼ https://developers.kakao.com/apps


내 애플리케이션 메뉴에서 앱 만들기를 선택합니다.





▼ 앱 이름을 적고 앱 만들기를 클릭



▼ 필요한 경우 앱 아이콘을 업로드 할수도 있습니다.





▼ 등록하면 인증키가 바로 발급됩니다.






▼ 키가 발급되었어도 플랫폼 등록을 해야 실제 사용이 가능합니다.






▼  당분간은 어플 사용할 계획이 없으므로 웹으로 등록해봅니다.




▼ 실제로 키가 유출되어도 플랫폼 등록이 안되어있게되면 인증 오류가 발생하므로 걱정없습니다..ㅎㅎ




이렇게하면 카카오 API를 이용할 준비가 되었습니다.


하나씩 이용해봐야겠습니다.

태그 : API, 카카오

댓글(0)

네이버 맵 (기본 맵 + 마커) v3

Open API/Naver|2016.12.20 17:59

네이버 기본 맵 ( 마커 찍기 + 라벨 넣기 )


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

네이버 API 키 발급 Url : https://dev.naver.com/openapi/register


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
  <title>네이버 맵 마커 </title>
  <style>v\:* { behavior: url(#default#VML); }</style>
  <!-- prevent IE6 flickering -->
  <script type="text/javascript">
   try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}
  </script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=네이버맵키"></script>
 </head>
 <body>
 <div id = "naverMap" style="border:1px solid #000; width:700px; height:400px; margin:20px; display:block;"></div>
 <script type="text/javascript">
    var oPoint = new nhn.api.map.LatLng(37.7396101, 127.0623053);
    nhn.api.map.setDefaultPoint('LatLng');
    oMap = new nhn.api.map.Map('naverMap', {
        center : oPoint,
        level : 10, // 줌 초기 값 10.
        enableWheelZoom : true,
        enableDragPan : true,
        enableDblClickZoom : false,
        mapMode : 0,
        activateTrafficMap : false,
        activateBicycleMap : false,
        activateRealtyMap : true,
        minMaxLevel : [ 1, 14 ],
        size : new nhn.api.map.Size(500, 400)
    });
 
    var oSize = new nhn.api.map.Size(28, 37);
    var oOffset = new nhn.api.map.Size(14, 37);
    var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
 
    // 마커 찍기
    var oMarker1 = new nhn.api.map.Marker(oIcon, { title : '유느님이 계신 곳 ' });  //마커 생성
    oMarker1.setPoint(oPoint); //마커 표시할 좌표 선택
    oMap.addOverlay(oMarker1); //마커를 지도위에 표현
 
    //라벨 넣기
    var oLabel1 = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
    oMap.addOverlay(oLabel1); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
    oLabel1.setVisible(true, oMarker1); // 마커 라벨 보이기
 
  </script>
 </body>
</html>


댓글(0)

네이버 스마트 에디터 ( 이미지 업로드 포함 )

Open API/Naver|2016.12.14 23:21

스마트 에디터에 이미지 업로드 기능을 추가된 샘플 소스입니다..

jimmy1775 님께서 asp 업로드 모듈을 개발해주시고  idtong 님께서 jsp 모듈을 개발해주셨습니다..


감사드립니다.


Test UIrl : http://www.uhoon.co.kr/test/988/SmartEditor/SEditorDemo.html



DownLoad :  SmartEditor.zip


  smart Editor PHP Upload module.zip(2013.06.30 추가)



ps. 추가로 이미지 업로드 가능한 mimetype 을 일부 추가하였습니다..( png 등...)


 



적용 방법 : 

1. 압축 해제 후 SEditorDemo.html 파일을 제외한 나머지 파일은 에디터가 삽입될 페이지와 같은 경로에 업로드하거나

 또는 임의의 위치에 압축 해제 후 include된 경로를 수정하여 업로드 합니다.

( 아래 설명은 같은 경로에 업로드한 기준입니다.)


2. SEditorDemo.html 파일을 참고하여 에디터가 삽입될 페이지내에 소스를 추가합니다.




-include

<link href="css/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/HuskyEZCreator.js" charset="utf-8"></script>

- Javascript
<script>
//form변수로 지정하여 이미지업로드 페이지에서 호출하여 사용됨. form.filepath.value
var form = document.w_form;   // 사용할 폼 이름으로 수정.
 
//에디터호출 - <table> 안에 넣으면 안됨.
var oEditors = [];
nhn.husky.EZCreator.createInIFrame(oEditors, "ir1", "SEditorSkin.html", "createSEditorInIFrame", null, true);
 
//이미지삽입 - 업로드 완료페이지에서 호출됨.
function insertIMG(fname){
  var filepath = form.filepath.value;
  var sHTML = "<img src='" + filepath + "/" + fname + "' style='cursor:hand;' border='0'>";  
    // filepath 는 변수처리 혹은 직접 코딩해도 상관없음. 
    // imageUpload.asp 에서 insertIMG 호출시 경로를 포함하여 넣어주는 방법을 추천.
  oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);
}
 
function pasteHTMLDemo(){
  sHTML = "<span style='color:#FF0000'>이미지 등도 이렇게 삽입하면 됩니다.</span>";
  oEditors.getById["ir1"].exec("PASTE_HTML", [sHTML]);
}
 
function showHTML(){
  alert(oEditors.getById["ir1"].getIR());
}
 
function onSubmit(){
  // 에디터의 내용을 에디터 생성시에 사용했던 textarea에 넣어 줍니다.
  oEditors.getById["ir1"].exec("UPDATE_IR_FIELD", []);
 
  // 에디터의 내용에 대한 값 검증은 이곳에서 document.getElementById("ir1").value를 이용해서 처리하면 됩니다.
  form.content.value = document.getElementById("ir1").value;
 
  if(form.content.value == ""){
    alert("\'내용\'을 입력해 주세요");
    return;
  }
 
  var msg = "전송 하시겠습니까?"
  if(confirm(msg)){
    form.submit();
  }
  return;
}
</script>


- html
<form name="w_form" action="sample.asp" method="post">
<input type="hidden" name="filepath" value="/file"> <!-- 이미지업로드 경로 변수처리 혹은 직접 코딩.. -->
  <p>
    <input type="button" onclick="pasteHTMLDemo()" value="본문에 HTML 삽입"></input>
    <input type="button" onclick="showHTML()" value="본문 HTML 보기"></input>
    <input type="button" onclick="onSubmit()" value="서버에 전송"></input>
  </p>
  <textarea name="ir1" id="ir1" style="width:700px; height:400px"><p>에디터에 기본으로 삽입할 글(수정 모드)이 없다면 이 값을 지정하지 않으시면 됩니다.</p></textarea>
  <textarea id="content" name="content" style="display:none"></textarea>
</form>



위와 같이 적용하면 에디터는 뜹니다..

에디터 내에 값 넣기 , 가져오기 등은 pasteHTMLDemo() , showHTML() 함수를 참고하세요.

관련하여 이미지 업로드는 imgUpload.html 과 imgUpload.asp 파일을 수정하시면 됩니다.
jsp 와 asp 업로드 샘플 소스파일은 upModule 폴더안에 있으니 참고하세요


댓글(5)
  1. 궁그미2017 2017.12.14 23:22 신고 댓글주소  수정/삭제  댓글쓰기

    저기 이거 textarea부분에서 유효성 테스트를 해봤는데 포커스가 안먹히는데요 구글링해서 해볼거 거의다 해봤는데 잘 안되네요 ㅠㅠ 어떻게 해야할까요? 방법있나요?

    • 궁그미2017 2017.12.15 17:44 신고 댓글주소  수정/삭제

      아무래도 네이버스마트에디터 말고 다른 에디터를 써야할것 같네요 버전때도 오래된거같고 보안성도 떨어져서... 무엇보다 해결보기가 어렵네요

    • 910F 2017.12.15 17:48 신고 댓글주소  수정/삭제

      방금 푸시가 와서 알았네요.
      제가 알기로도 포커스를 넣을 수는 없는 걸로 알고 있습니다. 현재 버전3가 나왔지만 오픈되지 않아있고 버전2의 경우 나온지 3년?이 넘은걸로 알고있는데 추가적인 업데이트가 없어서 그리 느끼실수도있겠네요.

      개인적으로는

      summernote WYSIWYG editor

      추천드립니다.

  2. asdf 2018.04.16 17:53 신고 댓글주소  수정/삭제  댓글쓰기

    대부분의 블로거가 이미지에 관해서는관련하여
    이미지 업로드는 imgUpload.html 과 imgUpload.asp 파일을 수정하시면 됩니다.
    jsp 와 asp 업로드 샘플 소스파일은 upModule 폴더안에 있으니 참고하세요
    식으로 말하는데 이유가 있는건가여??

    • 910F 2018.04.16 18:15 신고 댓글주소  수정/삭제

      그외에 소스는 html 과 Javascript 이기 때문에 개발 언어에 상관없이 작동합니다.

      하지만 업로드 관련된 소스의 경우는 개발 언어의 영향을 받기 때문에 기존에 샘플소스 혹은 사용하시는 언어에 따라 사용하셔야하기 때문입니다. asp 와 jsp는 그저 흔히 돌고있는(?) 샘플 소스일뿐 크게 의미는 없습니다.

[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>


댓글(0)

구글맵 v3 단순 다중 마커 (배열이용)

Open API/Google|2016.12.12 18:36

종종 단순 배열 마커가 필요한 

경우가 있을때 사용하기 위한 샘플입니다.


많은 기능이 들어간 샘플에서 기능 걷어내는것도 일인지라..


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



<!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 markerArray = []; var map; // infowindow contents 배열 contentArray[0] = "Kay"; contentArray[1] = "uhoons blog"; contentArray[2] = "blog.uhoon.co.kr"; contentArray[3] = "blog.uhoon.co.kr "; contentArray[4] = "blog.uhoon.co.kr"; 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://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[1] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[2] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[3] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[4] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[5] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[6] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[7] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[8] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[9] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.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) ]; */ markerArray[0] = new google.maps.LatLng(40.3938,-3.7077); markerArray[1] = new google.maps.LatLng(40.45038,-3.69803); markerArray[2] = new google.maps.LatLng(40.45848,-3.69477); markerArray[3] = new google.maps.LatLng(40.40672,-3.68327); markerArray[4] = new google.maps.LatLng(40.43672,-3.62093); markerArray[5] = new google.maps.LatLng(40.46725,-3.67443); markerArray[6] = new google.maps.LatLng(40.43794,-3.67228); markerArray[7] = new google.maps.LatLng(40.46212,-3.69166); markerArray[8] = new google.maps.LatLng(40.41926,-3.70445); markerArray[9] = new google.maps.LatLng(40.42533,-3.6844); function initialize() { 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); for (var i = 0; i < markerArray.length; i++) { addMarker(); } } // 마커 추가 function addMarker() { var marker = new google.maps.Marker({ position: markerArray[iterator], map: map, draggable: false, icon: iConArray[iterator] }); markers.push(marker); var infowindow = new google.maps.InfoWindow({ content: contentArray[iterator] }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); iterator++; } google.maps.event.addDomListener(window, 'load', initialize); //--> </SCRIPT> <body> <div id="map" style="width:760px;height:400px;margin-top:20px;"></div> </body> </html>


댓글(2)
  1. 2017.08.17 14:13 댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다