javascript - change centre of google map with change in city name from action method in controller -
i have simple java script code this---
<script type="text/javascript"> $(document).ready(function () { var localityurl = '@url.action("fetchlocalities")'; var sublocalityurl = '@url.action("fetchsublocalities")'; var localities = $('#selectedlocality'); var sublocalities = $('#selectedsublocality'); $('#selectedcity').change(function () { codeaddress(); localities.empty(); sublocalities.empty(); $.getjson(localityurl, { id: $(this).val() }, function (data) { if (!data) { // codeaddress(); return; } localities.append($('<option></option>').val('').text('please select')); $.each(data, function (index, item) { localities.append($('<option></option>').val(item.value).text(item.text)); }); }); })
and codeaddress function this--
function codeaddress() { var lat = document.getelementbyid('selectedcity').latitude; var lng = document.getelementbyid('selectedcity').longitude; var mylatlng = new google.maps.latlng(lat, lng); var myoptions = { zoom: 13, center: mylatlng, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions);
and fetchcities action method is---
public list<city> fetchcities() { list<city> cities = new list<city>(); cities.add(new city() { id = 1 , name = "--select city--" }); cities.add(new city() { id = 2, name = "faridabaad", latitude = 28.4211m, longitude = 77.3078m }); cities.add(new city() { id = 3, name = "greater noida", latitude = 28.4962m, longitude = 77.5360m }); return cities; }
i want change google map change in city name calling codeaddress function. problem google map loading fine there no change in google map city name changing.you can have @ full code here http://pastebin.com/6hwcpg9a , controller is--http://pastebin.com/2zy7fntj plzz tell me codeaddress function correct or not???will work inside selectedcity.change(function).what changes made if plzz me**
right now, have tried geocoding feature of google map , tried pass latitude longitude failed once again---the code it's not working it's showing other places on google map--
var address = document.getelementbyid('selectedcity').value; geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.geocoderstatus.ok) { var latitude = results[0].geometry.location.lat(); var longitude = results[0].geometry.location.lng(); var latlng = new google.maps.latlng(latitude, longitude); var myoptions = { zoom: 13, center: latlng, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); geocoder = new google.maps.geocoder();
as far see there few errors:
- there no methods nor properties latitude , longitude.
- you're not populating element none of data.
replace line:
$.each(data, function (index, item) { localities.append($('<option></option>').val(item.value).text(item.text)); });
with that:
$.each(data, function (index, item) { localities.append($('<option data-lat='+item.latitude +' data-lng='+item.longitude+'></option>').text(item.text)); });
and this:
var lat = document.getelementbyid('selectedcity').latitude; var lng = document.getelementbyid('selectedcity').longitude;
with that:
var lat = $('#selectedcity').data('lat'), lng = $('#selectedcity').data('lng');
and 1 more thing. there nice field in mssql called dbgeography storing coordinates few nice properties. google ;-)
Comments
Post a Comment