изменить карту google с меняющимся названием города в выпадающем списке

Question

Я включил городскую широту, долготу в файле city.js, и я получаю содержимое города из этого файла.

Теперь я хочу передать эту информацию в свой код javaScript, чтобы изменить карту с изменением названия города.

Я пытался что-то подобное, но не получил успеха -----

$(document).ready(function() 
    { 
     $.get('City.js', function(data){ 
      var jsonObject = JSON.parse(data); 
      var lat = jsonObject[1].latitude; 
      var lng = jsonObject[1].longitude; 
      var latlng = new google.maps.LatLng(lat, lng); 
      $("#City").change(function() { 
       var marker = new google.maps.Marker({ 
        position: latlng, 
        map: map, 
        draggable: true 
       }); 
      }); 
    }); 

здесь city.js это ява скрипт file.The содержимое файла Java Script является ---

var jsonObject = [{ "CityId": "1", "CityName": "Faridabaad", "latitude": "28.4211", "longitude": "77.3078" }, 
        { "CityId": "2", "CityName": "Greater Noida", "latitude": "28.4962", "longitude": "77.5360" }];  

Моего выпадающий список, который меняет название местонахождения как название города меняется работает fine.Now, я только хочу, чтобы изменить карту Google, как изменения названия города в списке ---- Мой работать в г код, как это ----

  $("#City").change(function() { 
      $("#Locality").empty(); 
      $.ajax({ 
       type: 'POST', 
       url: '@Url.Action("LoadLocalities","Project")', 
       dataType: 'json', 
       data: { id: $("#City").val() }, 
       success: function (localities) { 
        $.each(localities, function (i, locality) { 
         $("#Locality").append('<option value="' + locality.Value + '">' + 
          locality.Text + '</option>'); 

        }); 
       }, 
       error: function (ex) { 
        alert('Failed to retreive Locality.' + ex); 
       } 
      }); 
      return false; 
     }) 
    }); 

Моего код JavaScript для загрузки Google Map как ----

  var map; 

      function initialize() { 
      var myLatlng = new google.maps.LatLng(28.713956, 77.006653); 

    var myOptions = { 
     zoom: 8, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    var marker = new google.maps.Marker({ 
     draggable: true, 
     animation:google.maps.Animation.BOUNCE, 
     position: myLatlng, 
     map: map, 
     title: "Project location" 
    }); 

    google.maps.event.addListener(marker, 'dragend', function (event) { 


     //document.getElementById("lat").value = event.latLng.lat(); 
     //document.getElementById("long").value = event.latLng.lng(); 
     document.getElementById("Geolongitude").value = event.latLng.lng(); 
     document.getElementById("Geolatitude").value = event.latLng.lat(); 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     map.setZoom(9); 
     map.setCenter(marker.getPosition()); 
    }); 

} 
google.maps.event.addDomListener(window, "load", initialize); 

Моей форма есть два выпадающих список, как это ---

  @using (Html.BeginForm()) 
       { 
        @Html.AntiForgeryToken() 
        @Html.ValidationSummary(true) 

    <fieldset> 
     <legend>Enter the Project Details</legend> 
      <div class="editor-label"> 
      @Html.LabelFor(model => model.City) 
      </div> 
      <div class="editor-field"> 

      @if (ViewData.ContainsKey("City")){ 
      @Html.DropDownListFor(model => model.City, ViewData["City"] as List<SelectListItem>, new { style = "width:250px", @class = "DropDown1"}) @Html.ValidationMessageFor(model => model.City) 
      } 
     </div> 

         <div class="editor-label"> 
         @Html.LabelFor(model => model.Locality) 
         </div> 
         <div class="editor-field"> 
      @Html.DropDownList("Locality", new SelectList(string.Empty,"Value","Text"),"Please Select a locality", new { style = "width:250px", @class = "DropDown1" }) 

Answer 1

Если вы хотите установить центр карты сделать это;

var mapOptions = { 
zoom: 12, 
center: new google.maps.LatLng(-27.793949,-52.348643), 
mapTypeId: google.maps.MapTypeId.ROADMAP }; 

// Save map as global variable. 
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

На вашей смене Городская функция;

// Catch center; 
center = map.getCenter(); 

// .. insert your code here to change center object lat/long 
// center.lat = -50.00 (I do not remember the atribute name) 


map.setCenter(center);