Google Maps在所選城市中打開

我有This Map我正在工作，它在舊金山開幕。我想將此更改爲在我選擇的特定城鎮開放。（即倫敦，英格蘭或西班牙Javea）我的網站每個頁面上的位置變化以及「城鎮&國家」都從數據庫插入頁面。Google Maps在所選城市中打開

Example: {$listing_city} = Town {$listing_country} = Country

頂部的搜索框不需要，因爲我想顯示該地區的當地餐廳，酒吧，醫生。但是，搜索框可以留在我只想在相應的城鎮打開地圖。

我是新的聽到並想知道是否有人可以幫忙。

在此先感謝

瑪

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Google Developers</title> 
    <link rel="stylesheet" type="text/css" href="/_static/css/screen.css" /> 
    <link rel="stylesheet" href="//www.google.com/cse/style/look/default.css" type="text/css" /> 
    <link href='//fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script id="jqueryui" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" defer async></script> 
    <script src="//www.google.com/jsapi?key=AIzaSyCrlr1LScCevQ1epeHArLVww0eHlB6o1wg"></script> 
    <!--[if lt IE 9]> 
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    </head> 
    <body class="docs framebox_body"> 
      <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> 
      <script type="text/javascript"> 
      var map, places, iw; 
      var markers = []; 
      var autocomplete; 

      function initialize() { 
      var myLatlng = new google.maps.LatLng(37.783259, -122.402708); 
      var myOptions = { 
       zoom: 12, 
       center: myLatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 
      places = new google.maps.places.PlacesService(map); 
      google.maps.event.addListener(map, 'tilesloaded', tilesLoaded); 
      autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete')); 
      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
       showSelectedPlace(); 
      }); 
      } 

      function tilesLoaded() { 
      google.maps.event.clearListeners(map, 'tilesloaded'); 
      google.maps.event.addListener(map, 'zoom_changed', search); 
      google.maps.event.addListener(map, 'dragend', search); 
      search(); 
      } 

      function showSelectedPlace() { 
      clearResults(); 
      clearMarkers(); 
      var place = autocomplete.getPlace(); 
      map.panTo(place.geometry.location); 
      markers[0] = new google.maps.Marker({ 
       position: place.geometry.location, 
       map: map 
      }); 
      iw = new google.maps.InfoWindow({ 
       content: getIWContent(place) 
      }); 
      iw.open(map, markers[0]); 
      } 

      function search() { 
      var type; 
      for (var i = 0; i < document.controls.type.length; i++) { 
       if (document.controls.type[i].checked) { 
       type = document.controls.type[i].value; 
       } 
      } 

      autocomplete.setBounds(map.getBounds()); 

      var search = { 
       bounds: map.getBounds() 
      }; 

      if (type != 'establishment') { 
       search.types = [type]; 
      } 

      places.search(search, function(results, status) { 
       if (status == google.maps.places.PlacesServiceStatus.OK) { 
       clearResults(); 
       clearMarkers(); 
       for (var i = 0; i < results.length; i++) { 
        markers[i] = new google.maps.Marker({ 
        position: results[i].geometry.location, 
        animation: google.maps.Animation.DROP 
        }); 
        google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i)); 
        setTimeout(dropMarker(i), i * 100); 
        addResult(results[i], i); 
       } 
       } 
      }); 
      } 

      function clearMarkers() { 
      for (var i = 0; i < markers.length; i++) { 
       if (markers[i]) { 
       markers[i].setMap(null); 
       markers[i] == null; 
       } 
      } 
      } 

      function dropMarker(i) { 
      return function() { 
       markers[i].setMap(map); 
      } 
      } 

      function addResult(result, i) { 
      var results = document.getElementById('results'); 
      var tr = document.createElement('tr'); 
      tr.style.backgroundColor = (i% 2 == 0 ? '#F0F0F0' : '#FFFFFF'); 
      tr.onclick = function() { 
       google.maps.event.trigger(markers[i], 'click'); 
      }; 

      var iconTd = document.createElement('td'); 
      var nameTd = document.createElement('td'); 
      var icon = document.createElement('img'); 
      icon.src = result.icon.replace('http:', ''); 
      icon.setAttribute('class', 'placeIcon'); 
      var name = document.createTextNode(result.name); 
      iconTd.appendChild(icon); 
      nameTd.appendChild(name); 
      tr.appendChild(iconTd); 
      tr.appendChild(nameTd); 
      results.appendChild(tr); 
      } 

      function clearResults() { 
      var results = document.getElementById('results'); 
      while (results.childNodes[0]) { 
       results.removeChild(results.childNodes[0]); 
      } 
      } 

      function getDetails(result, i) { 
      return function() { 
       places.getDetails({ 
       reference: result.reference 
       }, showInfoWindow(i)); 
      } 
      } 

      function showInfoWindow(i) { 
      return function(place, status) { 
       if (iw) { 
       iw.close(); 
       iw = null; 
       } 

       if (status == google.maps.places.PlacesServiceStatus.OK) { 
       iw = new google.maps.InfoWindow({ 
        content: getIWContent(place) 
       }); 
       iw.open(map, markers[i]); 
       } 
      } 
      } 

      function getIWContent(place) { 
      var content = '<table style="border:0"><tr><td style="border:0;">'; 
      content += '<img class="placeIcon" src="' + place.icon + '"></td>'; 
      content += '<td style="border:0;"><b><a href="' + place.url + '">' + place.name + '</a></b>'; 
      content += '</td></tr></table>'; 
      return content; 
      } 

      google.maps.event.addDomListener(window, 'load', initialize); 
      </script> 

      <style type="text/css"> 
      html, body { 
       margin: 0; 
       padding: 0; 
       height: 100%; 
       font-family: arial; 
       font-size: 13px; 
       overflow: hidden; 
      } 

      #map_canvas { 
       float: left; 
       width: 420px; 
       height: 406px; 
      } 

      #listing { 
       float: left; 
       margin-left: 1px; 
       width: 210px; 
       height: 406px; 
       overflow: auto; 
       cursor: pointer; 
      } 
      #controls { 
       padding: 5px; 
      } 
      .placeIcon { 
       width: 16px; 
       height: 16px; 
       margin: 2px; 
      } 
      #results { 
       border-collapse: collapse; 
       width: 184px; 
      } 
      #locationField { 
       margin-left: 1px; 
      } 
      #autocomplete { 
       width: 516px; 
       border: 1px solid #ccc; 
      } 
      </style> 
      <div id="locationField"> 
      <input id="autocomplete" type="text"> 
      </div> 
      <div id="map_canvas"></div> 
      <div id="listing"> 
      <div id="controls"> 
       <form name="controls"> 
       <!--<input type="radio" name="type" value="establishment" onclick="search()" checked="checked"/>All<br/>--> 
       <input type="radio" name="type" value="restaurant" onclick="search()" />Restaurants<br/> 
        <input type="radio" name="type" value="police" onclick="search()" />Police Station<br/> 
        <input type="radio" name="type" value="church" onclick="search()" />Churches<br/> 
        <input type="radio" name="type" value="doctor" onclick="search()" />Doctor<br/> 
        <input type="radio" name="type" value="bar" onclick="search()" />Bars<br/> 
        <input type="radio" name="type" value="bank" onclick="search()" />Banks<br/> 
       </form> 
      </div> 
      <table id="results"></table> 
      </div> 
     </body> 
</html>

來源

2012-12-15 Mal

你必須知道你想要的城鎮緯度。不是每一頁上，你需要從

var myLatlng = new google.maps.LatLng(37.783259, -122.402708);

在初始化（）功能改變這一行

var myLatlng = new google.maps.LatLng(changeTHIS, andTHIS);

我這裏是倫敦

var myLatlng = new google.maps.LatLng(51.507222, -0.1275);

來源

2012-12-18 14:31:04 paka

感謝帕卡感謝你的幫助。有沒有辦法從頁面變量自動執行此操作？每個頁面都有一個唯一的變量，從數據庫提供，即「城鎮」，「城市」，「郵政編碼」和國家。 – Mal

@Mal你能爲你的數據庫添加經度和緯度嗎？如果是的話，那麼你需要修改你的頁面模板，使得這個變量出現在頁面中作爲javascript變量： '' 然後修改初始化函數： 'var myLatlng = new google.maps.LatLng（lat，lng）;' – paka

Google Maps在所選城市中打開

回答

相關問題