CODEWITHSUNDEEP
google-maps-api-3maps
Jim Cole
Jim Cole

Reputation: 64

map.setCenter and map.Panto will not shift map

I have tried to change the .onchange function multiple times to change map zoom level and center point. Zoom change takes affect, but the map does not change locations.

Any help would be appreciated. I've removed my api key, but otherwise the map will function on its own.

    <script>
    function detectBrowser() {
      var useragent = navigator.userAgent;
      var mapdiv = document.getElementById("map");

      if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
        mapdiv.style.width = '100%';
        mapdiv.style.height = '100%';
      } else {
        mapdiv.style.width = '600px';
        mapdiv.style.height = '800px';
      }
    }
      function initMap() {
        var central = {lat: 39.8282, lng: -98.5795};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 5,
          center: central
        });
        var fops = 'http://coleprojects.000webhostapp.com/sqteam.png';
      document.getElementById("FieldTeamMember").onchange = function() {
        map.setZoom(8);
        alert(this.value)
        map.setCenter(new google.maps.LatLng(this.value));
      };

Upvotes: 0

Views: 630

Answers (1)

geocodezip
geocodezip

Reputation: 161384

A clue in the javascript console:

InvalidValueError: in property lat: not a number

You need to pass a google.maps.LatLng (or google.maps.LatLngLiteral) to the map.setCenter method:

document.getElementById("FieldTeamMember").onchange = function() {
  map.setZoom(8);
  var coords=this.value.split(',');
  var latLng = new google.maps.LatLng(parseFloat(coords[0]), parseFloat(coords[1]));
  map.setCenter(latLng);
};

Upvotes: 1

Related Questions