My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

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

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


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


기능

  1.  기본 맵
  2.  아이콘 마커 (marker)
  3.  말풍선 (infoWindow)
  4.  주소로 위경도 검색하기 (geocoder)
  5.  거리별 중심점 기준으로 원그리기 ( Circle )

googlemapv3.png



<!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] = "www.uhoon.co.kr";
 contentArray[3] = "www.uhoon.co.kr ";
 contentArray[4] = "www.uhoon.co.kr";
 contentArray[5] = "www.goodkiss.co.kr";
 contentArray[6] = "GG";
 contentArray[7] = "www.goodkiss.co.kr";
 contentArray[8] = "II";
 contentArray[9] = "www.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
			});
			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>


?

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
20 map 구글맵 v3 infoBox file kay 2015.12.29 1341
19 map 구글맵 v3 단순 다중 마커 (배열이용) 2 file kay 2015.12.28 5718
18 map 구글맵 마커 + 말풍선 - v3 2 file kay 2015.02.05 2259
17 map 구글맵 v3 맵상에 보여지는 마커만 생성하기 5 file kay 2014.08.04 6328
16 map 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json ) 24 file kay 2014.07.17 13648
15 기타 Google 웹사이트 번역기 2 file kay 2014.04.21 5050
14 map Google Places API를 이용한 주변 지역 정보 검색 26 file kay 2013.10.18 16244
13 map GeoRSS 피드에서 KmlLayer를 생성..." geoRSS 로 레이어 마커 찍기 " 2 file kay 2013.08.28 4995
12 map 구글맵 API 적용범위 (Google Maps API Coverage) kay 2013.08.27 4762
11 map google 스트릿뷰 "Street View" file kay 2013.08.27 4458
10 map 브라우져에서 현재 위경도 읽어와서 구글맵에 마커 표시하기 ( getCurrentPosition + Googlemap marker ) file kay 2013.05.31 23368
9 map 구글맵 출발지 도착지 주소입력해서 길찾기 - v3 13 file kay 2013.05.03 22982
8 map 모바일 웹 - 위치정보(GPS) + 마커 + 카톡 + 카스 연동 file kay 2013.04.24 9091
» map 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3 file kay 2013.04.22 13962
6 map geocode - 주소로 위경도 검색 v3 file kay 2013.04.21 7487
5 map 구글맵 마커 + 말풍선 - v2 kay 2013.02.06 10747
4 map geocode - 구글 맵 위경도 검색 v2 kay 2013.02.06 6952
3 Graph 막대 그래프 kay 2013.02.06 7623
2 Graph 선 + 막대 그래프 kay 2013.02.06 5882
1 Graph 선 그래프 file kay 2013.02.06 5971
Board Pagination Prev 1 Next
/ 1