タグ:Google Maps
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=【取得したAPIキー】&libraries=places" charset="utf-8"></script>
<input type="text" size="55" id="search" value="ダイバーシティ東京付近のカフェ" /> <input type="button" size="55" value="検索" onClick="SearchGo()" /> <div id="map_canvas" style="width: 980; height: 720px;"></div>
// マップの初期設定 var mayMap; var service; var latlng = new google.maps.LatLng(【主軸施設の緯度・軽度】); var icon = new google.maps.MarkerImage('【主軸施設のマーカーピン画像のパス】',new google.maps.Size(65,57),new google.maps.Point(0,0)); function initialize() { // googleマップ表示設定 var initPos = latlng; var opts = { zoom: 16, center: initPos, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: true, scaleControl: true, panControl:true, }; var myMap = new google.maps.Map(document.getElementById("gmapBlock"), opts); // googleマップマーカー設定 var markerOptions = { position: initPos, map: myMap, icon: icon, title: '【主軸施設名】' }; var marker = new google.maps.Marker(markerOptions); // 検索の条件を指定(緯度経度、半径、検索の分類) var request = { location: initPos, radius: 500, types: ['cafe','food','restaurant'] }; var service = new google.maps.places.PlacesService(myMap); service.search(request, Result_Places); } // 検索結果を受け取る function Result_Places(results, status){ if(status == google.maps.places.PlacesServiceStatus.OK) { for (var i = 0; i < results.length; i++) { var place = results[i]; createMarker({ text : place.name, position : place.geometry.location }); } } } // 入力キーワードと表示範囲を設定 function SearchGo() { var initPos = latlng; var mapOptions = { center : initPos, zoom: 15, mapTypeId : google.maps.MapTypeId.ROADMAP }; myMap = new google.maps.Map(document.getElementById("gmapBlock"), mapOptions); service = new google.maps.places.PlacesService(myMap); // input要素に入力されたキーワードを検索の条件に設定 var myword = document.getElementById("search"); var request = { query : myword.value, radius : 5000, location : myMap.getCenter() }; service.textSearch(request, result_search); } // 検索の結果を受け取る function result_search(results, status) { console.log(results) var bounds = new google.maps.LatLngBounds(); // 取得施設情報を解体 for(var i = 0; i < (results.length + 1); i++){ var gpmarker = new google.maps.MarkerImage(results[i].icon, null, null, null, new google.maps.Size(25, 25)); if(i == results.length - 1){ createMarker({ icon : icon, position : latlng, text : '<span style="font-weight: bold;">【主軸施設名】</span><br>【主軸施設の住所】', map : myMap }); }else{ createMarker({ icon : gpmarker, position : results[i].geometry.location, text : '<span style="font-weight: bold;">' + results[i].name + '</span><br>' + results[i].formatted_address, map : myMap }); } bounds.extend(results[i].geometry.location); } myMap.fitBounds(bounds); } // 該当する位置にマーカーを表示 function createMarker(options) { //console.log(options); var marker = new google.maps.Marker(options); var infoWnd = new google.maps.InfoWindow(); infoWnd.setContent(options.text); google.maps.event.addListener(marker, 'click', function(){ infoWnd.open(myMap, marker); }); return marker; } // ページ読み込み完了後、Googleマップを表示 google.maps.event.addDomListener(window, 'load', initialize);