google map api 以住址查詢位置

2012-03-11

2348
0
google map api
2014-10-07

摘要:google map api 以住址查詢位置

<!DOCTYPE html>
<html DIR="LTR">
<head>
<title>Google Maps JavaScript API 第 3 版範例：地方資訊自動完成</title>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"
    type="text/javascript"></script>

<style type="text/css">
    body {
      font-family: sans-serif;
      font-size: 14px;
    }
    #map {
      height: 400px;
      width: 600px;
      margin-top: 0.6em;
    }
    input:focus {
      outline: none;
    }
</style>

<script>
    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(-33.8688, 151.2195),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);

      var input = document.getElementById('searchTextField');
      var autocomplete = new google.maps.places.Autocomplete(input);

      autocomplete.bindTo('bounds', map);

      var infowindow = new google.maps.InfoWindow();
      var marker = new google.maps.Marker({
        map: map
        // document.getElementById('searchTextField').Onclick();
      });

      google.maps.event.addListener(autocomplete, 'place_changed', function() {
        infowindow.close();
        var place = autocomplete.getPlace();
        if (place.geometry.viewport) {
          map.fitBounds(place.geometry.viewport);
        } else {
          map.setCenter(place.geometry.location);
          map.setZoom(17); // Why 17? Because it looks good.
        }
        var image = new google.maps.MarkerImage(
            place.icon, new google.maps.Size(71, 71),
            new google.maps.Point(0, 0), new google.maps.Point(17, 34),
            new google.maps.Size(35, 35));
        marker.setIcon(image);
        marker.setPosition(place.geometry.location);

        var address = '';
        if (place.address_components) {
          address = [
            (place.address_components[0] &&
             place.address_components[0].short_name || ''),
            (place.address_components[1] &&
             place.address_components[1].short_name || ''),
            (place.address_components[2] &&
             place.address_components[2].short_name || '')].join(' ');
        }

        infowindow.setContent('<div><b>' + place.name + '</b><br>' + address);
        infowindow.open(map, marker);
      });

      // Sets a listener on a radio button to change the filter type on Places
      // Autocomplete.
      var setupClickListener = function(id, types) {
        var radioButton = document.getElementById(id);
        google.maps.event.addDomListener(radioButton, 'click', function() {
          autocomplete.setTypes(types);
        });
      }

      setupClickListener('changetype-all', []);
      setupClickListener('changetype-establishment', ['establishment']);
      setupClickListener('changetype-geocode', ['geocode']);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div>
    <input id="searchTextField" type="text" value="台北市中華路二段175巷46-3號" size="50">
    <input type="radio" name="type" id="changetype-all" checked> 全部
    <input type="radio" name="type" id="changetype-establishment"> 建築物
    <input type="radio" name="type" id="changetype-geocode"> 地理編碼
</div>
<div id="map"></div>
</body>
</html>

回首頁