GoogleMap API

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

SNOWFLAKES DRAWING PAPER

GoogleMap API 본문

개발/GoogleMap

GoogleMap API

눈송2 2015. 1. 20. 18:01

googlemap.ht

[미리보기]

<!DOCTYPE html>

<head>
    <title>GoogleMap API Sample</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script>
      var currPos = {lat:37.3683451,lng:127.119556};
      var myCenter=new google.maps.LatLng(currPos.lat, currPos.lng);
      function initialize() {
        var mapOptions = {
          zoom: 16,
          center: myCenter,
          mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        /*
        Turn On All Controls
        var mapProp = {
          center: new google.maps.LatLng(51.508742,-0.120850),
          zoom:7,
          panControl:true,
          zoomControl:true,
          mapTypeControl:true,
          scaleControl:true,
          streetViewControl:true,
          overviewMapControl:true,
          rotateControl:true,    
          mapTypeId: google.maps.MapTypeId.ROADMAP /* google.maps.MapTypeId.HYBRID */
        };
        */

var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
            
        var marker=new google.maps.Marker({
          position:myCenter,
          animation:google.maps.Animation.DROP
          /*
          마커 통통 튀는 애니메이션 적용
          animation:google.maps.Animation.BOUNCE
          animation:google.maps.Animation.DROP
          */
          /*
          마커 이미지 적용
          icon:'pinkball.png'
          */
        });

marker.setMap(map);
        
        /*********************
          Polyline
        **********************/
        var pos1 = new google.maps.LatLng(37.3693451,127.119556);
        var pos2 = new google.maps.LatLng(37.3683451,127.129556);
        var pos3 = new google.maps.LatLng(37.3613451,127.139556);
        var myTrip=[pos3,pos2,pos1,myCenter];
        var flightPath=new google.maps.Polyline({
          path:myTrip,
          strokeColor:"#FF0000",
          strokeOpacity:0.8,
          strokeWeight:2
          });

flightPath.setMap(map);
        
        /* 시작지점 마커 생성 */
        var EndMarker=new google.maps.Marker({
          position:pos3
        });
        EndMarker.setMap(map);
        
        
        /*********************
          Polygon
        *********************
        var flightPathG = new google.maps.Polygon({
          path:myTrip,
          strokeColor:"#0000FF",
          strokeOpacity:0.8,
          strokeWeight:2,
          fillColor:"#0000FF",
          fillOpacity:0.4
        });
        flightPathG.setMap(map);
        */
        
        /*********************
          Circle
        *********************
        var myCity = new google.maps.Circle({
          center:myCenter,
          radius:20,
          strokeColor:"#FF0000",
          strokeOpacity:0.8,
          strokeWeight:2,
          fillColor:"#FF0000",
          fillOpacity:0.3
          });
        myCity.setMap(map);
        */
        /* 경로마다 작은 원 표시 (flightPath) */
        var cirOpt = {
          radius:20,
          strokeColor:"#AA0C86",
          strokeOpacity:0.8,
          strokeWeight:2,
          fillColor:"#AA0C86",
          fillOpacity:0.3
          };
        for (var i=0; i<myTrip.length; i++)
        {
          cirOpt.center = myTrip[i];
          cir = new google.maps.Circle(cirOpt);
          cir.setMap(map);
        }
        
        
        /*********************
          Circle
        **********************/
        var infowindow = new google.maps.InfoWindow({
          content:"Hello World!"
          });

//infowindow.open(map,marker);
        
        
        /*********************
          Overlays Reference
        *********************
        http://www.w3schools.com/googleAPI/google_maps_ref.asp
        https://developers.google.com/maps/documentation/javascript/3.exp/reference
        */
        
        
        /**********************************
          (현재)마커 클릭시 한단계 줌 처리
        ***********************************/
        google.maps.event.addListener(marker,'click',function() {
          map.setZoom(17);
          map.setCenter(marker.getPosition());
        });
        
        /**********************************
          센터 변경시 3초후 다시 원래대로 ..
        **********************************
        google.maps.event.addListener(map,'center_changed',function(){
          window.setTimeout(function(){
            map.panTo(marker.getPosition());
          },3000);
        });
        */
        
        /**********************************
          현재 마커 클릭시 InfoWindow 보여주기
        ***********************************/
        google.maps.event.addListener(marker,'click',function(){
          infowindow.open(map,marker);
        });
        
        
        /**********************************
          클릭한 위치에 마커 새로 달기
        ***********************************/
        google.maps.event.addListener(map, 'click', function(event) {
          placeMarker(event.latLng);
        });
        function placeMarker(location) {
          var marker = new google.maps.Marker({
            position:location,
            map:map
          });
          var infowindow = new google.maps.InfoWindow({
            content:'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
          });
          infowindow.open(map,marker);
        }
        
        
        /*********************
          Events Reference
        *********************
        http://www.w3schools.com/googleAPI/google_maps_ref.asp
        */
        
        
        /*********************
          Custom Control
        **********************/
        // Create a DIV to hold the control and call HomeControl()
        var homeControlDiv = document.createElement('div');
        var homeControl = new HomeControl(homeControlDiv, map);
        //  homeControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
  
  
      }

/*
      function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
            'callback=initialize';
        document.body.appendChild(script);
      }
*/
      google.maps.event.addDomListener(window, 'load', initialize);
      //window.onload = loadScript;

function HomeControl(controlDiv, map) {
  controlDiv.style.padding = '5px';
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'yellow';
  controlUI.style.border='1px solid';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Set map to London';
  controlDiv.appendChild(controlUI);
  var controlText = document.createElement('div');
  controlText.style.fontFamily='Arial,sans-serif';
  controlText.style.fontSize='12px';
  controlText.style.paddingLeft = '4px';
  controlText.style.paddingRight = '4px';
  controlText.innerHTML = '<b>Home<b>'
  controlUI.appendChild(controlText);

// Setup click-event listener: simply set the map to London
  google.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(myCenter)
  });
}
    </script>
  </head>
  
    <div id="map-canvas"></div>

저작자표시 비영리

Comments

SNOWFLAKES DRAWING PAPER

GoogleMap API 본문

GoogleMap API

티스토리툴바