alegut · March 12, 2018 16:38
diff --git a/geocoding.html b/geocoding.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>

    <style>
    html, body, #map_canvas {
      height: 100%;
      margin: 0;
      padding: 0;
    }
 #map_canvas  .gm-style-iw input{
  width: 100%;
    padding: 3px 8px;
    margin: 8px 0 8px 8px;
    box-sizing: border-box;
    border: 2px solid #13B5C7;
    border-radius: 4px;
    font-size: 18px;
    font-family: Verdana, sans-serif;
    text-align: center;
 }
 #map_canvas  .gm-style-iw input:focus {
  outline: none;
  -webkit-box-shadow: 0.1rem 0.1rem 0.1rem #13B5C7;
          box-shadow: 0.1rem 0.1rem 0.1rem #13B5C7;
 }


 #map_canvas .gm-style-iw div {
    overflow: visible !important;
  } */

    </style>
    <script
 			  src="https://code.jquery.com/jquery-3.3.1.js"
 			  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
 			  crossorigin="anonymous"></script>

    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyCu_3jn03km8FyNfMlz4rSslbI1vj3FRTY"></script>
    <!-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCu_3jn03km8FyNfMlz4rSslbI1vj3FRTY&callback=initMap" -->
    <!-- type="text/javascript"></script> -->
    <script>

    var markers = 0;

      var geocoder;
      var map;
      var mapOptions = {
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
      var marker;
      function initialize() {
        geocoder = new google.maps.Geocoder();
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        codeAddress();
        google.maps.event.addListener(map, 'click', function(event) {
          markers++;
          placeMarker(map, event.latLng);
        });

        google.maps.event.addListener(map, 'dragend', function() {
          var NewMapCenter = map.getCenter();
          var latitude = NewMapCenter.lat();
          var longitude = NewMapCenter.lng();
          document.getElementById('lat').value = latitude;
          document.getElementById('lng').value = longitude;
       });

       google.maps.event.addListener(map, 'zoom_changed', function() {
         document.getElementById('zoom').value = map.getZoom();
      });

 }
      function codeAddress() {
        var address = document.getElementById('address').value;
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            if(marker)
              marker.setMap(null);
            marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                draggable: true,
                visible: false
            });
            document.getElementById('lat').value = marker.getPosition().lat();
            document.getElementById('lng').value = marker.getPosition().lng();
            document.getElementById('zoom').value = map.getZoom();
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }


      function placeMarker(map, location) {
        var marker = new google.maps.Marker({
          position: location,
          map: map,
          animation: google.maps.Animation.DROP,
          title: 'Click again to delete marker',
          draggable: true
        });

        var infowindow = new google.maps.InfoWindow({
          content: '<input id="'+markers+'_info" type="text" data-lat="'+location.lat()+'" data-lng="'+location.lng()+'" class="marker" width="60%">',
          maxWidth: 150,
          draggable: true,
        });
        infowindow.open(map,marker);

        marker.addListener('click', function() {
           var conf = confirm('Do you really want to remove this marker?');
           if(conf == true){
             marker.setMap(null);
             markers--;
           }
        });
      }


      $( document ).ready(function() {
          $(document).on('click', '#save_markers', function(){
          var dataMap = '';
          var dataMarkers='';
            var zoom = $('#zoom').val();
            var centerlat = $('#lat').val();
            var centerlng = $('#lng').val();
            dataMap = '{zoom:'+zoom+';centerlat:'+centerlat+';centerlng:'+centerlng+'}';
            dataMarkers = '{';
            $('.marker').each(function(){
              var marker_text = $(this).val();
              var marker_lat = $(this).attr('data-lat');
              var marker_lng = $(this).attr('data-lng');

              dataMarkers += 'marker_text:'+marker_text+';';
              dataMarkers += 'marker_lat:'+marker_lat+';';
              dataMarkers += 'marker_lng:'+marker_lng+';';
            })
            dataMarkers += '}';
            console.log(dataMap);
            console.log(dataMarkers);
          })

      });

    </script>
  </head>
  <body onload="initialize()">
    <div>
      <input id="address" type="textbox" style="width:30%" value="Esfahan">
      <input type="button" value="Find My Map" onclick="codeAddress()">
      <input type="text" id="lat"/>
      <input type="text" id="lng"/>
      <input type="text" id="zoom"/>
    </div>
    <div id="map_canvas" style="top:30px"></div>
    <input id="save_markers" type="button" value="Save Markers" style="margin-top:50px">
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>

	<style>
	html, body, #map_canvas {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	#map_canvas .gm-style-iw input{
	width: 100%;
	padding: 3px 8px;
	margin: 8px 0 8px 8px;
	box-sizing: border-box;
	border: 2px solid #13B5C7;
	border-radius: 4px;
	font-size: 18px;
	font-family: Verdana, sans-serif;
	text-align: center;
	}
	#map_canvas .gm-style-iw input:focus {
	outline: none;
	-webkit-box-shadow: 0.1rem 0.1rem 0.1rem #13B5C7;
	box-shadow: 0.1rem 0.1rem 0.1rem #13B5C7;
	}


	#map_canvas .gm-style-iw div {
	overflow: visible !important;
	} */

	</style>
	<script
	src="https://code.jquery.com/jquery-3.3.1.js"
	integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
	crossorigin="anonymous"></script>

	<script src="https://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyCu_3jn03km8FyNfMlz4rSslbI1vj3FRTY"></script>
	<!-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCu_3jn03km8FyNfMlz4rSslbI1vj3FRTY&callback=initMap" -->
	<!-- type="text/javascript"></script> -->
	<script>

	var markers = 0;

	var geocoder;
	var map;
	var mapOptions = {
	zoom: 16,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var marker;
	function initialize() {
	geocoder = new google.maps.Geocoder();
	map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
	codeAddress();
	google.maps.event.addListener(map, 'click', function(event) {
	markers++;
	placeMarker(map, event.latLng);
	});

	google.maps.event.addListener(map, 'dragend', function() {
	var NewMapCenter = map.getCenter();
	var latitude = NewMapCenter.lat();
	var longitude = NewMapCenter.lng();
	document.getElementById('lat').value = latitude;
	document.getElementById('lng').value = longitude;
	});

	google.maps.event.addListener(map, 'zoom_changed', function() {
	document.getElementById('zoom').value = map.getZoom();
	});

	}
	function codeAddress() {
	var address = document.getElementById('address').value;
	geocoder.geocode( { 'address': address}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	map.setCenter(results[0].geometry.location);
	if(marker)
	marker.setMap(null);
	marker = new google.maps.Marker({
	map: map,
	position: results[0].geometry.location,
	draggable: true,
	visible: false
	});
	document.getElementById('lat').value = marker.getPosition().lat();
	document.getElementById('lng').value = marker.getPosition().lng();
	document.getElementById('zoom').value = map.getZoom();
	} else {
	alert('Geocode was not successful for the following reason: ' + status);
	}
	});
	}


	function placeMarker(map, location) {
	var marker = new google.maps.Marker({
	position: location,
	map: map,
	animation: google.maps.Animation.DROP,
	title: 'Click again to delete marker',
	draggable: true
	});

	var infowindow = new google.maps.InfoWindow({
	content: '<input id="'+markers+'_info" type="text" data-lat="'+location.lat()+'" data-lng="'+location.lng()+'" class="marker" width="60%">',
	maxWidth: 150,
	draggable: true,
	});
	infowindow.open(map,marker);

	marker.addListener('click', function() {
	var conf = confirm('Do you really want to remove this marker?');
	if(conf == true){
	marker.setMap(null);
	markers--;
	}
	});
	}


	$( document ).ready(function() {
	$(document).on('click', '#save_markers', function(){
	var dataMap = '';
	var dataMarkers='';
	var zoom = $('#zoom').val();
	var centerlat = $('#lat').val();
	var centerlng = $('#lng').val();
	dataMap = '{zoom:'+zoom+';centerlat:'+centerlat+';centerlng:'+centerlng+'}';
	dataMarkers = '{';
	$('.marker').each(function(){
	var marker_text = $(this).val();
	var marker_lat = $(this).attr('data-lat');
	var marker_lng = $(this).attr('data-lng');

	dataMarkers += 'marker_text:'+marker_text+';';
	dataMarkers += 'marker_lat:'+marker_lat+';';
	dataMarkers += 'marker_lng:'+marker_lng+';';
	})
	dataMarkers += '}';
	console.log(dataMap);
	console.log(dataMarkers);
	})

	});

	</script>
	</head>
	<body onload="initialize()">
	<div>
	<input id="address" type="textbox" style="width:30%" value="Esfahan">
	<input type="button" value="Find My Map" onclick="codeAddress()">
	<input type="text" id="lat"/>
	<input type="text" id="lng"/>
	<input type="text" id="zoom"/>
	</div>
	<div id="map_canvas" style="top:30px"></div>
	<input id="save_markers" type="button" value="Save Markers" style="margin-top:50px">
	</body>
	</html>