0

画面にGoogleマップを設定しましたが、できるようにしたいのは、ユーザーが場所を入力して、この場所にリダイレクトできるようにすることです。次のページに例がありますhttps://developers.google.com/maps/location-based-appsは、場所を入力する最初のマップにあります。私が現在持っているコードはこれですが、テキストボックスに入力して新しい場所でマップを更新できるようにする方法に関する情報が見つかりません。

<script type="text/javascript">

    //Javascript used to add Elements to the maps
    // Arguments latitude, longitude, name
    function addMarkersToMap(eventTitle,eventLongitude,eventLatitude)
    {
        markers.push({ lat: eventLatitude, lng: eventLongitude, name: eventTitle });
    }

    function initialize() 
    {
        // Create the map
        var lat, lon, myOptions;
        if(navigator.geolocation)
        {
            navigator.geolocation.getCurrentPosition(function(position)
            {           
                lat = <%= @event.latitude %>;
                lon = <%= @event.longitude %>;
                myOptions = 
                {
                    center: new google.maps.LatLng(lat, lon),
                    zoom: 12,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

                // Create the markers ad infowindows.
                for (index in markers) addMarker(markers[index]);
                function addMarker(data) 
                {
                    // Create the marker
                    var marker = new google.maps.Marker(
                    {
                        position: new google.maps.LatLng(data.lat, data.lng),
                        map: map,
                        title: data.name
                    });

                    // Create the infowindow with two DIV placeholders
                    // One for a text string, the other for the StreetView panorama.
                    var content = document.createElement("DIV");
                    var title = document.createElement("DIV");
                    title.innerHTML = data.name;
                    content.appendChild(title);
                    var streetview = document.createElement("DIV");
                    streetview.style.width = "200px";
                    streetview.style.height = "200px";
                    content.appendChild(streetview);
                    var infowindow = new google.maps.InfoWindow(
                    {
                        content: content
                    });

                    // Open the infowindow on marker click
                    google.maps.event.addListener(marker, "click", function() 
                    {
                        infowindow.open(map, marker);
                    });

                    // Handle the DOM ready event to create the StreetView panorama
                    // as it can only be created once the DIV inside the infowindow is loaded in the DOM.
                    google.maps.event.addListenerOnce(infowindow, "domready", function() 
                    {
                        var panorama = new google.maps.StreetViewPanorama(streetview, 
                        {
                            navigationControl: false,
                            enableCloseButton: false,
                            addressControl: false,
                            linksControl: false,
                            visible: true,
                            position: marker.getPosition()
                        });
                    });
                }
            },
            function(error)
            {
                alert('Error: An error occur while fetching information from the Google API');
            });
        }
        else 
        {
            alert("Your browser doesn't support geolocations, please consider downloading Google Chrome");
        }
    }

</script>

<div id="map_canvas" style="width:100%; height:400px"></div>
4

2 に答える 2

3

あなたが探しているのは、 GeolocationではなくGeocodingです。

以下の関数findLocation()は、 Geocoding を使用して textbox から場所を見つけますaddress。受け入れられた回答のV2とは対照的に、API のバージョン 3を使用します。Maps API のバージョン 2は非推奨であり、2013 年 5 月 19 日までのみ保証され、新しいアプリケーションでは使用しないでください。

function findLocation() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert('Location not found: ' + status);
      }
    });
  }
于 2013-02-11T21:41:30.350 に答える
0

このように試すことができます...

<html>
<head>
    <title>Google Maps API Example: Simple Geocoding</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"
  type="text/javascript"></script>
<script type="text/javascript">

var map = null;
var geocoder = null;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(17.445824,78.377395), 1);
    map.setUIToDefault();
    geocoder = new GClientGeocoder();
  }
}

function showAddress(address) {
  if (geocoder) {
    geocoder.getLatLng(
      address,
      function(point) {
        if (!point) {
          alert(address + " not found");
        } else {
          map.setCenter(point, 15);
          var marker = new GMarker(point, {draggable: true});
          map.addOverlay(marker);
          GEvent.addListener(marker, "dragend", function() {
            marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
          });
          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
          });
      GEvent.trigger(marker, "click");
        }
      }
    );
 }
}
</script>
</head>

<body onload="initialize()" onunload="GUnload()">
<form action="#" onsubmit="showAddress(this.address.value); return false">

  <p>
    <input type="text" style="width:350px" name="address" value="hitech city,         Hyderabad"/>
    <input type="submit" value="Search" />
  </p>
  <div id="map_canvas" style="width: 600px; height: 400px"></div>
</form>

</body>
</html>

それに応じて変更を加えます..///

于 2013-02-11T06:21:42.963 に答える