Google Maps/Search

Google Map API Search example

Soul-Learner 2015. 3. 3. 13:55

Google Map API 를 사용하여 지도상에서 검색기능 예

참조: https://developers.google.com/maps/documentation/javascript/examples/places-searchbox?hl=ko


<!DOCTYPE html>
<html>
  <head>
    <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
      }
      .controls {
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
        margin-left: -1px;
        padding-left: 14px;  /* Regular padding-left + 1. */
        width: 401px;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

    </style>
    <title>Places search box</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.

function initialize() {

  var markers = [];
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // 검색 전에 화면에 보여줄 지도의 영역좌표
  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(41.0, 125.0),	//좌상단 지리좌표
      new google.maps.LatLng(35.0, 129.0));	//우하단 지리좌표
  map.fitBounds(defaultBounds);

  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var searchBox = new google.maps.places.SearchBox(
    /** @type {HTMLInputElement} */(input));

  // [START region_getplaces]
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  //검색결과를 추출하여 검색된 각 지점에 Marker를 설정하고 검색된 모든 지점이 한꺼번에
  //지도에 보여지도록 지도의 크기를 맞춘다
  google.maps.event.addListener(searchBox, 'places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }
    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    // For each place, get the icon, place name, and location.
    markers = [];
    // 검색결과를 보여줄 지도의 영역좌표 설정
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {

      marker = new google.maps.Marker({map: map, position: place.geometry.location});
      markers.push(marker);
	
      //bounds 배열에 원소추가
      bounds.extend(place.geometry.location);
      //alert(i+" "+place.name);
    } // end of for()
	//검색된 다수개의 지점을 모두 보여줄 수 있는 크기로 지도를 맞춘다
    map.fitBounds(bounds);
  });
  // [END region_getplaces]

  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  //검색박스를 현재 보여지는 지도상에 보여지도록 다시 설정한다
  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });
}

//페이지 로드시 initialize()호출
google.maps.event.addDomListener(window, 'load', initialize);

   </script>
   <style>
     #target {
       width: 345px;
     }
   </style>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map-canvas"></div>
  </body>
</html>


저작자표시