구글지도 오류. 부탁드립니다

배꾸이 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016.11.16 16:46:24 3370 (221.♡.♡.253)

답변 1

본문

처음에는 잘 됬는데 지금은

"죄송합니다. 문제가 발생했습니다.

Google 지도가 제대로 로드되지 않았습니다. 자바스크립트 콘솔에서 자세한 기술 정보를 확인하세요"

라고 뜹니다 문제가 API키 때문인거 같아서 API키를 발급받고 키도 스크립트로 해서 넣었습니다.

그런데 잘 되지 않습니다...

어떻게 해결해야 하나요? (http://cnuconsortium.ac.kr/inc/sub01_5.php)

키 스크립트는 안되길래 3개를 우장창 넣어본것입니다 ㅠㅠ 키는 일부 지웠습니다


<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>
<script src="//maps.google.com/maps/api/js?sensor=true&key=AIzaSyADJ8gPw61_ic__"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADJ8gPw61_ic__=initMap"
  type="text/javascript"></script>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyADJ8gPw61_ic__" async="" defer="defer" type="text/javascript"></script>
		<div id="con_area">
			<span class="vert_line"></span>
			<h3>오시는 길</h3>
			<div class="gap"></div>
<script type='text/javascript'>
$(function() {
	var seoul = new google.maps.LatLng(36.370264, 127.345933),  //첫 실행됐을때 위치(목록 첫번째 좌표와 동일하게)
		pointToMoveTo, 
		first = true,
		curMarker = new google.maps.Marker({}),
		$el;
		
		var myOptions = {
			zoom: 14,  //1~20  (숫자가 클수록 zommin)
			center: seoul,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
 
var map = new google.maps.Map($("#map_canvas")[0], myOptions);
 
$("#locations li").mouseenter(function() {
	$el = $(this);
	if (!$el.hasClass("hover")) {
		$("#locations li").removeClass("hover");
		$el.addClass("hover");
 
		if (!first) { 
			curMarker.setMap(); 
		}
 
		pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
		map.panTo(pointToMoveTo);
 
		curMarker = new google.maps.Marker({
		position: pointToMoveTo,
		map: map,
			icon: "../img/marker.png"  //마커 이미지 경로
		});
 
 
		google.maps.event.addListener(curMarker, 'click', function() {
			map.setZoom(14);
		});
 
 
		$("#more-info").find("h2").html($el.find("h3").html()).end().find("p").html($el.find(".longdesc").html());   //텍스트 정보 more-info에 출력
		first = false; 
	}
});
 
$("#locations li:first").trigger("mouseenter");
});
</script>
 
</head>
 
<body>
 
<div id="page-wrap">
 
		   
	<ul id="locations">
		<li data-geo-lat="36.370264" data-geo-long="127.345933">
			<h4>충남대학교</h4>
			<div class="longdesc">
			<h4 class="s-tit01">대전광역시 유성구 대학로 99</h4>
			</div>
		</li>
		<li class="loli" data-geo-lat="36.3356492" data-geo-long="127.4531131">
			<h4>우송대학교</h4>
			<div class="longdesc">
			<h4 class="s-tit01">대전광역시 동구 동대전로 171</h4>
			</div>
		</li>
		<li class="loli" data-geo-lat="36.3507993" data-geo-long="127.3006108">
			<h4>한밭대학교</h4>
			<div class="longdesc">
			<h4 class="s-tit01">대전광역시 유성구 동서대로 125</h4>
			</div>
		</li>
		<li class="loli" data-geo-lat="36.1826203" data-geo-long="127.111405">
			<h4>건양대학교</h4>
			<div class="longdesc">
			<h4 class="s-tit01">충청남도 논산시 대학로 121</h4>
			</div>
		</li>
		<li class="loli" data-geo-lat="36.7989522" data-geo-long="127.0749307">
			<h4>선문대학교</h4>
			<div class="longdesc">
			<h4 class="s-tit01">충청남도 아산시 탕정면 선문로 221번길 70</h4>
			</div>
		</li>
		<li class="loli" data-geo-lat="36.4442848" data-geo-long="127.1187091">
			<h4>공주교육대학교</h4>
			<div class="longdesc">
			<h4 class="s-tit01">충청남도 공주시 웅진로 27</h4>
			</div>
		</li>
 
	</ul>
 
	<div id="map_canvas"></div>
 
	<div id="more-info">
		<div>
			<h2></h2>
			<p></p>
		</div>
	</div>
 
</div>