داینامیک کردن سورس مارک کردن رو نقشه گوگل با جی کوئری

سلام.
دوستان من یه سورس دارم برای مارک کردن روی نقشه گوگل
به این صورت:

<script>
 var map, theMarker, oldMarker;
 var myCenter = new google.maps.LatLng(36.37188479448487,59.524805545806885);
 var creator;
 var globalCityId = 207, globalDistrictId = 0;
 var theLoc;
 function initialize()
 {
 var mapProp = {
 center: myCenter,
 zoom: 16,
 zoomControl: true,
 zoomControlOptions: {
 style: google.maps.ZoomControlStyle.LARGE,
 position: google.maps.ControlPosition.LEFT_CENTER
 }
 };

 map = new google.maps.Map(document.getElementById("mapContainer"), mapProp);

 google.maps.event.addListener(map, 'click', function (event) {
 placeMarker(event.latLng, map, false);
 theLoc = ["getByLocation",[event.latLng.lat(),event.latLng.lng()]];
 triggerSelectOnValidInput=true;
 $("#districtId").autocomplete().getByLocation(theLoc);
 });
 

 google.maps.event.addListenerOnce(map, 'idle', function(){
 $("body span").last().remove();
 });

 }

 function getDistricts(location) {
 $.post("index.php?ajax=true&plugMain=district",
 {
 getDistrictsByLatLng: true,
 latLng: [location.lat(), location.lng()]
 },
 function (input) {
 var inputs = $.parseJSON(input);
 if (inputs != null) {
 if (true == inputs.result) {
 //$(".divInnerEstateTitle").find(".imgWarning").remove();
 //$(".divInnerEstateTitle").prepend("<img src='" + tplLink + "/image/warning.png?19' class='imgWarning' title='در حال بررسی' alt='در حال بررسی' />");
 }
 }
 });
 }

 function placeMarker(location, map, panToMarker) {
 if (oldMarker != null)
 oldMarker.setMap(null);
 if (theMarker != null)
 theMarker.setMap(null);
 var data = {
 position: location,
 icon: tplLink + "images/pin.png",

 map: map
 };
 if (panToMarker) {
 map.setCenter(location);
 map.setZoom(14);
 }
 //cons
 var marker = new google.maps.Marker(data);
 theMarker = marker;
 $("#estateLat").attr("value", location.lat());
 $("#estateLng").attr("value", location.lng());
 }

 function panToMap(location, map) {
 map.setCenter(location);
 map.setZoom(14);
 }

 google.maps.event.addDomListener(window, 'load', initialize);
</script> 

اگه دقت کرده باشین اون بالا یه مختصات داره
به این شکل:
36.37188479448487,59.524805545806885
مشکل منم همینجاست
من میخوام این مختصات بصورت داینامیک وارد بشه.
من یک selectتوو html نوشتم.
که به وسیله اون شهر های مختلفی داخلش قرار داره
با انتخاب هر شهر،مختصاتش هم جایگزینه اون مختصات استاتیک بشه
این کد من که نوشتم بصورت کامل،اما عمل نمیکنه:

 < select id="cat_area" class="city">
<option value="mashhd" class="54.5445,42.555555">mashhad</option>
<option value="tehran" class="54.543445,42.534555">tehran</option>

</select>
<input id="estate" name="estate" value="" />
<script>
$(document).ready(function(){
 $('.city').change(function(){
 var cs2 = $("option:selected", this).attr("class");
 console.log(cs2);
 $("#estate").attr("value",cs2)
 });
 });
 var map, theMarker, oldMarker;
 var estate = document.getElementById("estate").value;
 var myCenter = new google.maps.LatLng(estate);
 var creator;
 var globalCityId = 207, globalDistrictId = 0;
 var theLoc;
 function initialize()
 {
 var mapProp = {
 center: myCenter,
 zoom: 16,
 zoomControl: true,
 zoomControlOptions: {
 style: google.maps.ZoomControlStyle.LARGE,
 position: google.maps.ControlPosition.LEFT_CENTER
 }
 };

 map = new google.maps.Map(document.getElementById("mapContainer"), mapProp);

 google.maps.event.addListener(map, 'click', function (event) {
 placeMarker(event.latLng, map, false);
 theLoc = ["getByLocation",[event.latLng.lat(),event.latLng.lng()]];
 triggerSelectOnValidInput=true;
 $("#districtId").autocomplete().getByLocation(theLoc);
 });
 

 google.maps.event.addListenerOnce(map, 'idle', function(){
 $("body span").last().remove();
 });

 }

 function getDistricts(location) {
 $.post("index.php?ajax=true&plugMain=district",
 {
 getDistrictsByLatLng: true,
 latLng: [location.lat(), location.lng()]
 },
 function (input) {
 var inputs = $.parseJSON(input);
 if (inputs != null) {
 if (true == inputs.result) {
 //$(".divInnerEstateTitle").find(".imgWarning").remove();
 //$(".divInnerEstateTitle").prepend("<img src='" + tplLink + "/image/warning.png?19' class='imgWarning' title='در حال بررسی' alt='در حال بررسی' />");
 }
 }
 });
 }

 function placeMarker(location, map, panToMarker) {
 if (oldMarker != null)
 oldMarker.setMap(null);
 if (theMarker != null)
 theMarker.setMap(null);
 var data = {
 position: location,
 icon: tplLink + "images/pin.png",

 map: map
 };
 if (panToMarker) {
 map.setCenter(location);
 map.setZoom(14);
 }
 //cons
 var marker = new google.maps.Marker(data);
 theMarker = marker;
 $("#estateLat").attr("value", location.lat());
 $("#estateLng").attr("value", location.lng());
 }

 function panToMap(location, map) {
 map.setCenter(location);
 map.setZoom(14);
 }

 google.maps.event.addDomListener(window, 'load', initialize); 
 
</script>