2016-10-07 4 views
-1

をマッピングし、私は地図を表示というか、私がドロップダウンを変更するが、私はマーカーを配置して作成する必要があるときマップのフォーカスを変更する小さなPHPコードとJavaScriptを持っていますそれは拡大しました。誰も私にこれを手伝ってもらえますか?事前のおかげで場所マーカーとズームは

MY PHP/HTMLのCODE

<select class="form-control" name="dropdown" id="dropdown"> 
     <?php 
      $sql = "SELECT distinct lm_address FROM tbl_landmarks"; 
      $res = mysqli_query($conn,$sql); 
      echo "<option>-- Select Location --</option>"; 
      $counter = "1"; 
      while ($row = mysqli_fetch_array($res)){ 
      echo "<option value=".$counter.">" . $row['lm_address'] . "</option>"; 
      } 
     ?> 
     </select> 
    <!-- <select id="dropdown"> 
     <option value="1" selected>SM Southmall</option> 
     <option value="2">Chicago</option> 
     <option value="3">Boston</option> 
     <option value="4">Palo Alto</option> 
     <option value="5">Seattle</option> 
    </select> --> 
    <div id="info"></div> 
    <div class="map-container"> 
     <div id="map"></div> 
     <!--the google map is loaded already--> 
    </div> 

MY JAVASCRIPT私はこれが働くことを願っています

<script type="text/javascript"> 
     function initialize() { 
      var map = new google.maps.Map(document.getElementById("map")); 

      var geocoder = new google.maps.Geocoder(); 
      $("#dropdown").change(function() { 
      address = $("#dropdown :selected")[0].text; 
      geocodeAddress(address, geocoder, map); 
      }); 
      var address = $("#dropdown :selected")[0].text; 
      geocodeAddress(address, geocoder, map); 
     } 
     google.maps.event.addDomListener(window, "load", initialize); 

     function geocodeAddress(address, geocoder, resultsMap) { 
      document.getElementById('info').innerHTML = address; 
      geocoder.geocode({ 
      'address': address 
      }, function(results, status) { 
      if (status === google.maps.GeocoderStatus.OK) { 
       resultsMap.fitBounds(results[0].geometry.viewport); 
       document.getElementById('info').innerHTML += "<br>" + results[0].geometry.location.toUrlValue(6); 

      } else { 
       alert('Geocode was not successful for the following reason: ' + status); 
      } 
      }); 
     } 
    </script> 

答えて

0

var latlng = new google.maps.LatLng(latitude, longitude); 

var marker = new google.maps.Marker({position: latlng,map:map,title:title}); 

map.setCenter(latlng) 
map.setZoom(25); 
関連する問題