Google API 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3

Open API/Google|2016. 11. 21. 18:16
반응형



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

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


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



* 기능

 기본 맵

 아이콘 마커 (marker)

 말풍선 (infoWindow)

 주소로 위경도 검색하기 (geocoder)

 거리별 중심점 기준으로 원그리기 ( Circle )



<!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] = "blog.uhoon.co.kr";
 contentArray[3] = "www.suvely.com";
 contentArray[4] = "www.babbabo.com";
 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://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,
				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);
			});

			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>


저작자표시

댓글()

Google API 구글맵 마커 + 말풍선 - v2

Open API/Google|2016. 11. 18. 12:11
반응형



Google API를 이용한 구글맵 마커(Marker) 표시 및 말풍선(infowindow) 기본 샘플 코드입니다.


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




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> Google map </title>
 </head>
 
 <body onload="onLoad();">
   
<script src="http://maps.google.com/maps?file=api&v=2&hl=en&key=" type="text/javascript"></script>
<script type="text/javascript">
 
var gmarkers = [];
var htmls = [];
 
// global "map" variable
var map;
 
// This function picks up the side_bar click and opens the corresponding info window
function myclick(i) {
  gmarkers[i].openInfoWindowHtml(htmls[i]);
}
 
// This function zooms in or out
// its not necessary to check for out of range zoom numbers, because the API checks
function myzoom(a) {
  map.setZoom(map.getZoom() + a);
}
 
function onLoad() {
 if (GBrowserIsCompatible()) {
  // this variable will collect the html which will eventualkly be placed in the side_bar
  var side_bar_html = "";
  var i = 0;
 
  var baseIcon = new GIcon();
  baseIcon.iconSize=new GSize(15,24);
  baseIcon.shadowSize=new GSize(24,24);
  baseIcon.iconAnchor=new GPoint(0,12);
  baseIcon.infoWindowAnchor=new GPoint(12,0);
 
  var martini = new GIcon(baseIcon, "http://labs.google.com/ridefinder/images/mm_20_gray.png", null);
  //var martini = new GIcon(baseIcon, "/img/hotel/check.png", null, "/img/hotel/check.png");
 
  function createMarker(point,html,icon) {
var marker = new GMarker(point,icon);
GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowHtml(html);
});
return marker;
  }
  
  // create the map using the global "map" variable
  map = new GMap2(document.getElementById("map"));
  map.addControl(new GOverviewMapControl());
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.addControl(new GScaleControl());
  map.enableDoubleClickZoom();
  map.setCenter(new GLatLng(37.55544,127.07590), 15, G_NORMAL_MAP);
  //Map Type : G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP by Ribbie
 
  // add the points
  var point = new GLatLng(37.55544,127.07590);
  var marker = createMarker(point,"<div align='left' style='font-size:12px;width:300px;'>군자동 주민센터</div>",martini)
  map.addOverlay(marker);
   
 
}
 
else {
  alert("Sorry, the Google Maps API is not compatible with this browser");
}
   } // end of onLoad function
 </script>
 
 
<div id="map" style="width:450px; height: 300px" ></div> 
 
 </body>
</html>


저작자표시

댓글()
이전 1 다음

티스토리툴바