1

JavaScript API v3 を使用して、https://google-developers.appspot.com/...のように、検索ボックスが上にある Google マップを作成したいと思います。

現時点では、次のコードを使用して、URL で緯度と経度を取得して地図を表示します (php get):

<?php

$latitude = $_GET['lat'];
$longitude = $_GET['long'];


?>
<!DOCTYPE html>
<html>
  <head>
  <script type="text/javascript">  
  </script>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }

      #search-panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        width: 350px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
      #target {
        width: 345px;
      }


    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {

          var input = document.getElementById('searchTextField');
          var image = 'pin.png';
          var myLatlng = new google.maps.LatLng(<?php echo "$latitude" ?>, <?php echo "$longitude" ?>);
        var mapOptions = {
          center: myLatlng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          streetViewControl: true,
        };




        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);


            var marker = new google.maps.Marker({
      icon: image,
      position: myLatlng,
      map: map,
      animation: google.maps.Animation.DROP,
      title:"You Location"

  });


      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

しかし、名前の付いたサイトのように検索ボックスを統合するには、わかりません!!!

誰か助けてくれませんか？

コードをこれに編集しましたが、動作しません!:

<?php

$latitude = $_GET['lat'];
$longitude = $_GET['long'];


?>
<!DOCTYPE html>
<html>
  <head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }

      #search-panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        width: 350px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
      #target {
        width: 345px;
      }


    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {

          var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds // have to be defined first
});

google.maps.event.addListener(searchBox, 'places_changed', function() {
      var places = searchBox.getPlaces();
      // do your stuff here


          var input = document.getElementById('searchTextField');
          var image = 'pin.png';
          var myLatlng = new google.maps.LatLng(<?php echo "$latitude" ?>, <?php echo "$longitude" ?>);
        var mapOptions = {
          center: myLatlng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          streetViewControl: true,
        };




        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);


            var marker = new google.maps.Marker({
      icon: image,
      position: myLatlng,
      map: map,
      animation: google.maps.Animation.DROP,
      title:"You Location"

      var input = document.getElementById('target');
        var searchBox = new google.maps.places.SearchBox(input);
        var markers = [];

        google.maps.event.addListener(searchBox, 'places_changed', function() {
          var places = searchBox.getPlaces();


  });

    }); 

      }
    </script>
  </head>
  <body onload="initialize()">
  <div id="search-panel">
      <input id="target" type="text" placeholder="Search Box">
    </div>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>
4

2 に答える 2

5

Places Search Box も読み込む必要があります。

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds // have to be defined first
});

places_changed次に、イベントをリッスンできます。

google.maps.event.addListener(searchBox, 'places_changed', function() {
      var places = searchBox.getPlaces();
      // do your stuff here
});

投稿したサンプル ページのソース コードを見て、マーカーの描画など、そこで何をすべきかを理解してください。

詳細については、SearchBox API ドキュメントを参照してください。

于 2012-10-05T12:06:20.193 に答える