오늘 :
3,617 / 73,914
어제 :
3,949 / 104,837
전체 :
7,602,168 / 241,939,934

Open API 공부

Naver, Daum, Google Open API

cyber
추천 수 : 15 / 0
조회 수 : 16467
2007.11.30 (10:47:13)


http://www.subkorea.com/api/google/MapsAPI/map-dualmap.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>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=abc...xyz" type="text/javascript"></script>
  </head>
  <body onunload="GUnload()">


    <!-- the divs where the maps will be displayed -->
    <div id="minimap" style="position:absolute;top:30px;left:10px;width:190px; height: 190px"></div>
    <div id="map" style="position:absolute;top:30px;left:220px;width:550px; height: 550px"></div>
    <a href="dualmaps.htm">Back to the tutorial page</a>

    <!-- fail nicely if the browser has no Javascript -->
    <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
      However, it seems JavaScript is either disabled or not supported by your browser.
      To view Google Maps, enable JavaScript by changing your browser options, and then
      try again.
    </noscript>


    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {

      function createMarker(point) {
        map.addOverlay(new GMarker(point));
      }
      
      // ===== Setup The Maps =====
      
      // Display the main map, with some controls and set the initial location
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(53.25,-2.35), 9);
    
      // Set up three markers on the main map
    
      createMarker(new GLatLng(53.1,-2.14));
      createMarker(new GLatLng(53.65,-2.42));
      createMarker(new GLatLng(53.15,-2.33));
      
      // create the crosshair icon, which will indicate where we are on the minimap
      // Lets not bother with a shadow
      var Icon = new GIcon();
      Icon.image = "xhair.png";
      Icon.iconSize = new GSize(21, 21);
      Icon.shadowSize = new GSize(0,0);
      Icon.iconAnchor = new GPoint(11, 11);
      Icon.infoWindowAnchor = new GPoint(11, 11);
      Icon.infoShadowAnchor = new GPoint(11, 11);

      // Create the minimap
      var minimap = new GMap2(document.getElementById("minimap"));
      minimap.setCenter(new GLatLng(53.25,-2.35), 3);
      
      // Add the crosshair marker at the centre of teh minimap and keep a reference to it
      
      var xhair = new GMarker(minimap.getCenter(), Icon);            
      minimap.addOverlay(xhair);
      
      
      // ====== Handle the Map movements ======
      
      // Variables that log whether we are currently causing the maps to be moved
    
      var map_moving = 0;
      var minimap_moving = 0;
    
      // This function handles what happens when the main map moves
      // If we arent moving it (i.e. if the user is moving it) move the minimap to match
      // and reposition the crosshair back to the centre
      function Move(){
        minimap_moving = true;
        if (map_moving == false) {
          minimap.setCenter(map.getCenter());
          xhair.setPoint(map.getCenter());
          xhair.redraw(true);
        }
        minimap_moving = false;
      }
      // This function handles what happens when the mini map moves
      // If we arent moving it (i.e. if the user is moving it) move the main map to match
      // and reposition the crosshair back to the centre
      function MMove(){
        map_moving = true;
        if (minimap_moving == false) {
          map.setCenter(minimap.getCenter());
          xhair.setPoint(minimap.getCenter());
          xhair.redraw(true);
        }
        map_moving = false;
      }
      
      // Listen for when the user moves either map
      GEvent.addListener(map, 'move', Move);
      GEvent.addListener(minimap, 'moveend', MMove);
    }

    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    // This Javascript is based on code provided by the
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/  
    // http://econym.googlepages.com/index.htm

    //]]>
    </script>
  </body>

</html>

번호 제목 닉네임 등록일 조회 추천
12 event-bind 첨부 파일
cyber
2007-11-30 18136 19
11 event-arguments 첨부 파일
cyber
2007-11-30 18065 10
10 event-closure 첨부 파일
cyber
2007-11-30 19169 15
9 event-context 첨부 파일
cyber
2007-11-30 19208 17
8 event-simple 첨부 파일
cyber
2007-11-30 17889 19
7 map-distance 첨부 파일
cyber
2007-11-30 20291 19
6 map-range 첨부 파일
cyber
2007-11-30 16821 27
Selected map-dualmap 첨부 파일
cyber
2007-11-30 16467 15
4 map-infowindow 첨부 파일
cyber
2007-11-30 16900 16
3 map-animate 첨부 파일
cyber
2007-11-30 17221 12
Tag List