Google Map V3 | Galaxy

<!DOCTYPE html>
<html>
	<head>
		<title>Maps Project</title>
		<style>
			#map-canvas { width: 500px; height: 400px; background-color: #CCC; }
		</style>
		<script src="https://maps.googleapis.com/maps/api/js"></script>
		<script>
			function initialize() {
				var mapCanvas = document.getElementById('map-canvas');
				var myLatlng = new google.maps.LatLng(35.1466317,129.0596543);		// 위경도 설정
				var mapOptions = {			// 구글 맵 옵션
					center: myLatlng, 
					zoom: 16, 
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};

				// 구글 맵 생성
				var map = new google.maps.Map(mapCanvas, mapOptions);
			
				var contentString = '<div style="width:100px;height:50px;">SSM</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, 
				    draggable:true,			// 마커 드래그 가능
					title: 'Hello World!'	// 마커 : 도움말 풍선(마우스 오버 시)
				});
				google.maps.event.addListener(marker, 'click', function() {
					infowindow.open(map, marker);

					if (marker.getAnimation() != null) {
						marker.setAnimation(null);
					} else {
						marker.setAnimation(google.maps.Animation.BOUNCE);
					}
				});

				marker.setMap(map);
			}
			
			google.maps.event.addDomListener(window, 'load', initialize);
		</script>
	</head>
	<body>
		<div id="map-canvas"></div>
	</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Maps Project</title>

<style>

#map-canvas { width: 500px; height: 400px; background-color: #CCC; }

</style>

function initialize() {

var mapCanvas = document.getElementById('map-canvas');

var myLatlng = new google.maps.LatLng(35.1466317,129.0596543); // 위경도 설정

var mapOptions = { // 구글 맵 옵션

center: myLatlng,

zoom: 16,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

// 구글 맵 생성

var map = new google.maps.Map(mapCanvas, mapOptions);

var contentString = '<div style="width:100px;height:50px;">SSM</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,

draggable:true, // 마커 드래그 가능

title: 'Hello World!' // 마커 : 도움말 풍선(마우스 오버 시)

});

google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map, marker);

if (marker.getAnimation() != null) {

marker.setAnimation(null);

} else {

marker.setAnimation(google.maps.Animation.BOUNCE);

}

});

marker.setMap(map);

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body>

</body>

</html>

기본적인 구글 맵 셋팅 입니다.

<!DOCTYPE html>
<html>
	<head>
		<title>Maps Project</title>
		<style>
			#map-canvas { width: 500px; height: 400px; background-color: #CCC; }
		</style>
		<script src="https://maps.googleapis.com/maps/api/js"></script>
		<script>
			function initialize() {
				var mapCanvas = document.getElementById('map-canvas');
				var mapOptions = {
					center: new google.maps.LatLng(35.1466317,129.0596543), 
					zoom: 16, 
					mapTypeId: google.maps.MapTypeId.ROADMAP
				}
				var map = new google.maps.Map(mapCanvas, mapOptions);
			}
			google.maps.event.addDomListener(window, 'load', initialize);
		</script>
	</head>
	<body>
		<div id="map-canvas"></div>
	</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Maps Project</title>

<style>

#map-canvas { width: 500px; height: 400px; background-color: #CCC; }

</style>

function initialize() {

var mapCanvas = document.getElementById('map-canvas');

var mapOptions = {

center: new google.maps.LatLng(35.1466317,129.0596543),

zoom: 16,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(mapCanvas, mapOptions);

}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

</head>

<body>

</body>

</html>

옵션으로 zoom은 “0~22″ 사이의 레벨로 설정 할수 있고, mapTypeId는 “ROADMAP, SATELLITE, HYBRID, TERRAIN”으로 지정 할 수 있습니다.

Galaxy

Great hopes make great men.

Category Archives: Google Map V3

구글맵 마커 + 마커 애니메이션 + 말풍선

Google Map V3 시작하기