简体   繁体   中英

Place marker and zoom using javascript and php for google maps

I have a small Php code and javascript in which I show a map or rather change the focus of the map whenever I change a dropdown but I need to place a marker and make it zoomed in. Can anyone help me with this one? Thanks in advance

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>

i hope this will work

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM