- 모바일웹에서 현재 위치좌표 확인
- 구글맵 마커 넣기 ( 현재 위치 : 사람모양 아이콘 , 식당위치 : 식당아이콘)
- 해당 내용 카카오톡 또는 카카오스토리로 내보내기 연동 기능.
- 등록된 식당 데이터를 랜덤으로 보여주는 기능. (주로 점심때 가는 식당위주로..별도 기준 없음.)
http://www.uhoon.co.kr/test/716.html
혹시 글 담아가신분들 중 수정하여 올리시는분들은 하단에 포함된 구글 통계 스크립트 삭제부탁드립니다..
(현재 본 사이트 샘플 파일에는 삭제하였습니다만... 퍼가신 분들중 그대로 사용하시는분이 계셔서 통계에 오차가 발생하고 있어 곤란한 상태입니다..)
<!doctype html> <html> <head> <title>오늘의 점심메뉴는</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <meta name="viewport" content="initial-scale=1,minimum-scale=1, maximum-scale=1"> <script type="text/javascript" src="kakao/kakao.link.js"></script> <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> <script type="text/javascript"> var menuNum = Math.floor(Math.random() * 10); var map; var lat , lng; var addr = ["서울특별시 중구 다동 192-1" ,"서울특별시 중구 다동 170-1" ,"서울특별시 중구 무교동 19" ,"무교동" ,"무교동" ,"무교동" ,"서울특별시 종로구 서린동 88" ,"서울시 종로구 무교동 58-1번지 효광빌딩 2층" ,"유느님이 계신 그 곳이 바로 맛집" ,"무교동" ]; var menu = ["산하분식" ,"중국성" ,"장군보쌈" ,"전선생" ,"아사칸" ,"손가명가" ,"다담백반" ,"미스터피자" ,"유느님의 선택" ,"맥도날드" ]; var markerArray = [ new google.maps.LatLng(37.5677882,126.9797074) , 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(37.569291140861445,126.98090027546391) , 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() { var mapOptions = { zoom: 16, mapTypeId: google.maps.MapTypeId.ROADMAP, center: markerArray[menuNum] }; map = new google.maps.Map(document.getElementById('map'),mapOptions); $("#compName").html(menu[menuNum]); $("#compAddr").html(addr[menuNum]); if (menuNum==6) { $("#map").css("display",""); navigator.geolocation.getCurrentPosition (function (pos) { lat = pos.coords.latitude; lng = pos.coords.longitude; var myIcon = new google.maps.MarkerImage("http://google-maps-icons.googlecode.com/files/walking-tour.png", null, null, null, new google.maps.Size(17,17)); var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat,lng), map: map, draggable: false, icon: myIcon }); markers.push(marker); }); viewMarker(); }else{ $("#map").css("display","none"); } } function viewMarker() { var myIcon = new google.maps.MarkerImage("http://google-maps-icons.googlecode.com/files/restaurant.png", null, null, null, new google.maps.Size(17,17)); var marker = new google.maps.Marker({ position: markerArray[menuNum], map: map, draggable: false, icon: myIcon }); markers.push(marker); } function executeKakaoStoryLink() { kakao.link("story").send({ post: "행님 식사는 하셨습니까? \n오늘의 점심메뉴는 "+menu[menuNum]+"입니다.\n주소 : "+addr[menuNum]+"\n변경불가능하니 가시죠~\nhttp://goo.gl/jtycA", appid: "uhoon.co.kr", appver: "2.0", appname: "uhoon", urlinfo: JSON.stringify({ title: "오늘 점심메뉴", desc: "매일 매일 메뉴 정하기 너무 힘이듭니다..늦게 나온사람이 고르면 좋긴한데 ...에메하죠잉", imageurl: ["http://www.uhoon.co.kr/test/kakao/lotto.jpg"], type: "article" }) }); } function executeURLLink() { kakao.link("talk").send({ msg : "식사는 하셨습니까? \n오늘의 점심메뉴는 "+menu[menuNum]+"입니다.\n주소 : "+addr[menuNum]+"\n변경불가능하니 가시죠~", url : "http://goo.gl/jtycA", appid : "uhoon.co.kr", appver : "2.0", appname : "점심메뉴", type : "link" }); } $( window ).load(function() { initialize(); }); </script> <style> body { background-color: #F7F7F0; text-align: center; } .btn { background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFB1F), to(#EBE70C)); border-radius: 10px; width:320px; height:40px; box-shadow: rgba(0, 0, 0, 0.496094) 0px 1px 1px 0px, rgba(0, 0, 0, 0.0976563) 0px -1px 0px 0px; border:0px; font-size:1.25em; text-align: center; line-height: 40px; margin:0px auto; } </style> </head> <body> <h2>무교동 점심메뉴 골라골라</h2> <h5>- 자동으로 선택된 메뉴입니다.<br/>새로고침하면 바뀌니 그냥 가시죠.<br/>현재 맵연동 상호는 다담백반뿐입니다..</h5> <br/> <label for="상호명" >상호명 : "<span id="compName"></span>"</label> <br/> <label for="상호명" >주소 : "<span id="compAddr"></span>"</label> <br/> <div id="map" style="width:100%;height:200px;display:none;"></div> <br/> <div class="btn" onclick="javascript:executeURLLink()">카카오톡으로 공지하기</div> <br/> <div class="btn" onclick="javascript:executeKakaoStoryLink()">카카오스토리 포스트하기</div> <br/> </body> </html>
- [2015/12/29] 구글맵 v3 infoBox (3021)
- [2015/12/28] 구글맵 v3 단순 다중 마커 (배열이용) (10304) *2
- [2015/02/05] 구글맵 마커 + 말풍선 - v3 (3284) *2
- [2014/08/04] 구글맵 v3 맵상에 보여지는 마커만 생성하기 (7612) *5
- [2014/07/17] 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json ) (16964) *24