使用javascript和php为谷歌地图放置标记和缩放

时间:2016-10-07 05:09:39

标签: javascript php jquery google-maps google-maps-api-3

我有一个小的Php代码和javascript,我在其中显示地图或者更改地图的焦点,每当我更改下拉菜单时,我需要放置一个标记并使其放大。任何人都可以帮助我这个?提前致谢

我的PHP / HTML代码

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

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

1 个答案:

答案 0 :(得分: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);