Google Maps API文本搜索位置

我在屏幕上設置了谷歌地圖，但我想要的是允許用戶輸入一個位置，然後重定向到該位置。我在下面的頁面https://developers.google.com/maps/location-based-apps的第一個地圖中有一個示例，您可以在其中輸入位置。我目前的代碼是這樣的，但我找不到有關如何輸入文本框以允許刷新新位置的地圖的信息。Google Maps API文本搜索位置

<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>

來源

2013-02-11 Jseb

你在找什麼是Geocoding沒有地理位置。

以下功能findLocation()使用地理編碼從文本框address中查找位置。它使用API的版本3，而不是在接受的答案中的V2。 Maps API的Version 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-11 21:41:30

你可以嘗試這樣的...

<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-11 06:21:42 NewBee

-1使用V2。 Maps API的[Version 2]（https://developers.google.com/maps/documentation/javascript/v2/reference）已棄用，並且僅在2013年5月19日之前有效。您應該使用[版本3]（https://developers.google.com/maps/documentation/javascript/reference） – 2013-02-11 20:40:20

Google Maps API文本搜索位置

回答

相關問題