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>


저작자표시

댓글()

Google API geocode - 구글 맵 위경도 검색 v2

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


구글 API GeoCode를 이용한 위경도 검색 샘플 코드입니다.


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




  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
       <title>Google Map</title>
  <script src="http://maps.google.com/maps?file=api&v=2&hl=&key=" type="text/javascript"></script>
    <script type="text/javascript">
function fnAdjust()
{
var latitude = document.googleMap.latitude.value;
var longitude = document.googleMap.longitude.value;
alert(latitude);
alert(longitude);
}
  
function load() {
  if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GOverviewMapControl());
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl()); 
map.enableDoubleClickZoom();
var center = new GLatLng(35.68205, 139.76789);
map.setCenter(center, 15, G_HYBRID_MAP);
geocoder = new GClientGeocoder();
var marker = new GMarker(center, {draggable: true});  
map.addOverlay(marker);
document.getElementById("lat").value = center.lat().toFixed(5);
document.getElementById("lng").value = center.lng().toFixed(5);
  
  GEvent.addListener(marker, "dragend", function() {
   var point = marker.getPoint();
  map.panTo(point);
   document.getElementById("lat").value = point.lat().toFixed(5);
   document.getElementById("lng").value = point.lng().toFixed(5);
  
});
  
  
 GEvent.addListener(map, "moveend", function() {
  map.clearOverlays();
var center = map.getCenter();
  var marker = new GMarker(center, {draggable: true});
  map.addOverlay(marker);
  document.getElementById("lat").value = center.lat().toFixed(5);
   document.getElementById("lng").value = center.lng().toFixed(5);
  
  
 GEvent.addListener(marker, "dragend", function() {
  var point =marker.getPoint();
 map.panTo(point);
  document.getElementById("lat").value = point.lat().toFixed(5);
 document.getElementById("lng").value = point.lng().toFixed(5);
  
});
  
});
  
  }
}
  
   function showAddress(address) {
   var map = new GMap2(document.getElementById("map"));
   map.addControl(new GSmallMapControl());
   map.addControl(new GMapTypeControl());
   if (geocoder) {
geocoder.getLatLng(
  address,
  function(point) {
if (!point) {
  alert(address + " not found");
} else {
  document.getElementById("lat").value = point.lat().toFixed(5);
   document.getElementById("lng").value = point.lng().toFixed(5);
 map.clearOverlays()
map.setCenter(point, 14);
   var marker = new GMarker(point, {draggable: true});  
 map.addOverlay(marker);
  
GEvent.addListener(marker, "dragend", function() {
  var pt = marker.getPoint();
 map.panTo(pt);
  document.getElementById("lat").value = pt.lat().toFixed(5);
 document.getElementById("lng").value = pt.lng().toFixed(5);
});
  
  
 GEvent.addListener(map, "moveend", function() {
  map.clearOverlays();
var center = map.getCenter();
  var marker = new GMarker(center, {draggable: true});
  map.addOverlay(marker);
  document.getElementById("lat").value = center.lat().toFixed(5);
   document.getElementById("lng").value = center.lng().toFixed(5);
  
 GEvent.addListener(marker, "dragend", function() {
 var pt = marker.getPoint();
map.panTo(pt);
document.getElementById("lat").value = pt.lat().toFixed(5);
   document.getElementById("lng").value = pt.lng().toFixed(5);
});
  
});
  
}
  }
);
  }
}
    </script>
  </head>
  
   
<body onload="load()" onunload="GUnload()" >
<div style="padding:15px 45px 10px 45px;">
<div id="map" style="width:600px; height: 500px" style="display:block;"></div>
</div>
    
<div style="padding:5px 45px 10px 85px;">
<form name="googleMap" action="#" onsubmit="showAddress(this.address.value); return false">
 <table width="650">
  <tr>
<td colspan="5">
  <input type="text" size="70" name="address" value="" />
  <input type="submit" class="btn" value="Address Search"/>
</td>
  </tr>
  <tr height="10">
<td colspan="5"></td>
  </tr>
  <tr>
<td width="117"><b>Latitude</b></td>
<td width="117">
  <input id="lat" type="text" size="12" name="latitude" value="" />
</td>
<td width="117"><b>Longitude</b></td>
<td width="117">
  <input id="lng" type="text" size="12" name="longitude" value="" />
</td>
<td width="182">
  <input type="button" class="btn" value="Adjust" onclick="fnAdjust()"/>
</td>
  </tr>
</table>
</form>
</div>
  </body>
</html>


저작자표시

댓글()

Google API 막대 그래프

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




Google API를 이용한 막대 그리기 샘플 코드입니다.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>     
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>     
<title>월별 예약 통계 현황</title>    
<script type="text/javascript" src="https://www.google.com/jsapi"></script>     
<script type="text/javascript">       
google.load('visualization', '1', {packages: ['corechart']});     
</script>     
<script type="text/javascript">       
function drawVisualization() {         
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', '2011년 ', '2012년 '],
['1월',  20,      30],
['2월',  25,      30],
['3월',  45,      40],
['4월',  42,      60],
['5월',  45,      70],
['6월',  67,      70],
['7월',  55,      60],
['8월',  44,      50],
['9월',  22,      50],
['10월',  34,      40],
['11월',  56,      20],
['12월',  123,      10]         
]);
var options = {
title : '월별 예약 통계 현황',
vAxis: {title: "명"},
hAxis: {title: "월"},
seriesType: "bars",
series: {5: {type: "line"}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>  
</head>  
<body>     
<div id="chart_div" style="width: 900px; height: 500px;"></div>   
</body> 
</html>


저작자표시

댓글()

Google API 선 + 막대 그래프

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



Google API 를 이용한 선 + 막대 그래프 그리기 샘플 코드입니다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>2011년 예약일</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">    
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['날짜', '2011년', '2010년', '2009년'],
['1월 1주',  30,      40,         20],
['1월 2주',  40,      20,        30],
['1월 3주',  25,      30,        50],
['1월 4주',  50,      70,        80],
['2월 1주',  70,      70,         60],
['2월 2주',  200,      200,         150],
['2월 3주',  100,      120,         10],
['2월 4주',  25,      30,         50],
['3월 1주',  28,      50,         80],
['3월 2주',  83,      90,         80],
['3월 3주',  78,      80,         30],
['3월 4주',  120,      50,         80],
['4월 1주',  405,      350,         280],
['4월 2주',  203,      100,         120],
['4월 3주',  10,      50,         30],
['4월 4주',  11,      30,         50]
]);
 
var options = {
title : '2011년 ',
vAxis: {title: "인원"},
hAxis: {title: "날짜"},
seriesType: "bars",
series: {1: {type: "line"},2: {type: "line"}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body> 
</html>


저작자표시

댓글()

Google API 선 그래프

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



구글 API를 이용한 선 그래프 그리기 샘플 코드입니다.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>      
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>      
<title>누적 예약 현황</title>     
<script type="text/javascript" src="https://www.google.com/jsapi"></script>    
<script type="text/javascript"> 
google.load("visualization", "1" 
, {packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 
function drawChart() { 
var data = google.visualization.arrayToDataTable([ 
['month', '2011', '2012'], 
['1월 1주',  10,      0], 
['1월 2주',  30,      0], 
['1월 3주',  50,      0], 
['1월 4주',  70,      50], 
['2월 1주',  90,      100], 
['2월 2주',  110,     150], 
['2월 3주',  130,     250], 
['2월 4주',  150,     500], 
['3월 1주',  170,     600], 
['3월 2주',  190,     680], 
['3월 3주',  210,     750], 
['3월 4주',  230,     900], 
['4월 1주',  250,     900], 
['4월 2주',  270,     900], 
['4월 3주',  290,     920], 
['4월 4주',  310,     920], 
['5월 1주',  330,     930], 
['5월 2주',  350,     950], 
['5월 3주',  370,     950], 
['5월 4주',  390,     970], 
['6월 1주',  410,     970], 
['6월 2주',  500,     990], 
['6월 3주',  530,     1000], 
['6월 4주',  600,     1200], 
['7월 1주',  700,     1250], 
['8월 2주',  750,     1300], 
['9월 3주',  850,     1350], 
['9월 4주',  1000,    1350] 
]); 
var options = { 
title: '2011년 통계' 
}; 
var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
chart.draw(data, options); 
} 
</script> 
</head> 
<body> 
<div id="chart_div" style="width: 900px; height: 500px;"></div> 
</body>  
</html>


저작자표시

댓글()
이전 1 2 3 다음

티스토리툴바