обновление google map on form submit

Question

Я искал решение в течение нескольких часов, но не могу найти его, я надеюсь, что кто-то может мне помочь, поскольку я новичок в API Google, так вот что я пытаюсь сделать : У меня есть форма с динамическим выпадающим списком для региона и города и на основе выбора пользователя, это будет обновлять маркер на карте Google с помощью infowindow с указанием адреса, lat и long .. моя проблема заключается в отправке формы, карта показывает пустое .. вот мой код:

var Latlong = new google.maps.LatLng(61.10802786270912, 8.883177374999718); 
var map; 
var geocoder; 
var marker; 

function initialize() { 
    geocoder = new google.maps.Geocoder(); 
      var mapOptions = { 
      zoom: 5, 
      center: Latlong 
      } 
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

      marker = new google.maps.Marker({ 
       position: Latlong, 
       map: map, 
       draggable:true, 
       title: "Drag Me!" 
      }); 

      infowindow=new google.maps.InfoWindow(); 
      infowindow.setOptions({ 
       content: "<strong>Drag Marker</strong>"  
      }); 

      infowindow.open(map,marker);   

} 

function newmap(selectedregion, selectedcity){ 
    var address = selectedregion+ "," +selectedcity; 

    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      map.setZoom(18); 
      marker.setMap(null); 
      marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location, 
       draggable:true 
      }); 
     infowindow=new google.maps.InfoWindow(); 
     infowindow.setOptions({ 
      content: "test" 
     }); 
     infowindow.open(map,marker); 

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

} 

так что этот код будет вызван перезагрузки страницы:

$(window).load(function() { 
var selectedregion = document.getElementById('region').value; 
var selectedcity = document.getElementById('city').value; 

if(selectedregion == "" && selectedcity == ""){ 
    initialize(); 
}else{ 
    newmap(selectedregion, selectedcity); 
} 
}); 

это SucceS sfully вызывает функцию инициализации при первой загрузке, но она не успешно обрабатывает функцию newmap. Я не использую это: google.maps.event.addDomListener (окно, «загрузка», инициализация); потому что каждый раз, когда форма отправляется, googlemap переходит к своему стандарту LatLng (61.10802786270912, 8.883177374999718). Может ли кто-нибудь помочь мне в этом, пожалуйста.

Answer 1

Вы звоните либо initialize, либо newmap в свою onload функцию.

newmap зависит от инициализации, выполняемой сначала, чтобы создать экземпляр геокодера и карты.

Это работает для меня:

$(window).load(function() { 
    var selectedregion = document.getElementById('region').value; 
    var selectedcity = document.getElementById('city').value; 
    initialize(); 

    if(selectedregion == "" && selectedcity == ""){ 

    }else{ 
    newmap(selectedregion, selectedcity); 
    } 
}); 

proof of concept fiddle