都市のGoogleマップを表示するにはどうすればよいですか？

ユーザーが都市を検索して検索ボタンを押したときにGoogleマップを表示しようとしていますが、正しく実行する方法がわかりません。ここまでで私のコードが完成しました。私はユーザーの入力を受け取り、都市が配列内にあるかどうかを確認する方法を知りません。配列内にある場合は、Googleマップに表示する必要があります。たとえば、ユーザーが米国のHoustonという都市名を入力すると、その都市名がGoogleのデータベースにあるかどうかを確認した後、Googleマップに表示されます。都市のGoogleマップを表示するにはどうすればよいですか？

スクリプト：

function searchResult(cityname) { 
    var namesOfCity = ["houston,boston,newyork,florida"]; 

    //check the user input 

    //if match display it on google map  
} 

function initialize() 
{ 
     if(GBrowserIsCompatible()) { 
      var map = new GMap2(document.getElementById("map")); 
      map.setCenter(new GLatLng(37.4419, -122.1419), 13); 
      map.setUIToDefault(); 
     } 
    }

HTML

<body onload="initialize()" onunload="GUnload()"> 


<input type="text" id="cityname" value="" name=""/> 
    <input id="search" type="button" value="Search" onclick="searchResult('cityname')" /> 
    <div id="map" style="width: 100%; height: 450px; position: relative; background-color: rgb(229, 227, 223);"></div> 

</body>

出典

2012-01-10 Somi Meer

**参考までに** Google MapsはAPIバージョン3を使用しています。このバージョンでは、bodyタグ内のインラインJavaScript onloadとonunloadは必要なくなりました。緯度と経度を確認する方法については、http：//code.google.com/apis/maps/documentation/javascript/basics.html – Sparky

あなたが接近しているが、あなたは正しく配列を初期化されていません。

また、各都市の正しい座標を配列に格納していません。

代わりに、許可される都市の名前とその座標（緯度・経度）を格納するカスタムオブジェクトを使用して、ディスプレイに何を決定することを見てみてください：

function searchResult(cityname) { 
    var cities = { 
     houston: { 
      lat: /* ... */, 
      long: /* ... */ 
     }, 
     boston: { 
      lat: /* ... */, 
      long: /* ... */ 
     }, 
     'new york': { // note the quotes due to a space in the name 
      lat: /* ... */, 
      long: /* ... */ 
     }, 
     florida: { 
      lat: /* ... */, 
      long: /* ... */ 
     } 
    }; 

    //check the user input 
    var textfield = document.getElementById(cityname); 

    if (textfield) { 
     // look up the lowercase version of the value typed in 
     var coords = cities[textfield.value.toLowerCase()]; 
     //if match display it on google map 
     if (coords) { 
      var map = new GMap2(document.getElementById("map")); 
      map.setCenter(new GLatLng(coords.lat, coords.long), 13); // you could also make the zoom level a property of each city, which would allow you to customise that per city 
      map.setUIToDefault(); 
     } 
    }  
}

出典

2012-01-10 23:38:40 GregL

をご覧ください。 –

各都市のGoogleマップやGoogle Earthでルックアップし、使用可能な最高の中心点とズームレベルを決定します。これにより、最も信頼できる結果が得られます。 – GregL

しかし、自動的に取得する方法は？ –

あなたの配列を作るために多くの引用符を必要とします各インデックスそれ自身の文字列：

//instead of using the inline click handler, this will bind a click event handler to your search button 
$('#search').bind('click', searchResults); 

//this is the click event handler for the search button 
function searchResult(event) { 

    //stop the default behavior of the button 
    event.preventDefault(); 

    //cache whitelist of cities and the city that the user typed into the input 
    var namesOfCity = ["houston", "boston", "newyork", "florida"], 
     inputValue = $('#cityname').val().toLowerCase(),//notice the input has been made lower-case to attempt to match it to an index in the namesOfCity array 
     inputAccepted = false; 

    //iterate through the array of accepted city names 
    for (var i = 0, len = namesOfCity.length; i < len; i++) { 

     //check if the current index is equal to user's input 
     if (inputValue == namesOfCity[i]) { 

      //if the current index is equal to the user's input then set a flag to show that fact and stop the loop from iterating any further 
      inputAccepted = true; 
      break; 
     } 
    } 

    //if match display it on google map 
    if (inputAccepted === true) { 
     //update the map here 
    } 
}

あなたが経度/緯度に都市名を回すために、Googleのジオコーディングサービスを利用することができる座標：http://code.google.com/apis/maps/documentation/geocoding/（私はあなたがこれらの命令を試してもらおう）

出典

2012-01-10 23:38:55 Jasper

iam nt取得する方法を得ることができる例を与えてください –

都市のGoogleマップを表示するにはどうすればよいですか？

答えて

関連する問題