Google Map Location Marker

by Avinashullal

HTML

<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyAQR4WYrM7nDcvbbywhdhCqJv1cbZSs6ak&amp;amp;sensor=false"></script>
<input type="hidden" name="ctl00$MainContent$address" id="MainContent_address" value="Mangalore, India" />
<!-- <input type="hidden" name="ctl00$MainContent$txtLat" id="MainContent_txtLat" />
<input type="hidden" name="ctl00$MainContent$txtLng" id="MainContent_txtLng" />-->
<input type="hidden" name="ctl00$MainContent$txtLat" id="MainContent_txtLat" value="12.919241206343573" />
<input type="hidden" name="ctl00$MainContent$txtLng" id="MainContent_txtLng" value="74.83878135681152" />
<div id="MainContent_pnlMapEdit">
    <input name="ctl00$MainContent$txtStoreName" type="text" value="Ravi Mallya" id="MainContent_txtStoreName" class="form-control" placeholder="Enter Store Name" /> <span class="help-block"><a href="#" class="editMap">Click here</a> to edit the store
            location on Google Map.</span>

</div>
<div id="googleMap" style="width: 100%; height: 380px;"></div>
<input type="text" name="ctl00$MainContent$txtLatVal" id="MainContent_txtLatVal" />
<input type="text" name="ctl00$MainContent$txtLngVal" id="MainContent_txtLngVal" />

JavaScript

var geocoder, map, latlngstr, contentString, mapOptions;
     var markers = [];
     var marker = null;
     var latlng;
     var displayInfo = new google.maps.InfoWindow();
     var title = $('#MainContent_txtStoreName').val();
     var addr = $('#MainContent_address').val();
     var txtLat = $('#MainContent_txtLat').val();
     var txtLang = $('#MainContent_txtLng').val();

     $(document).on('click', '.editMap', function (e) {
         setLocation();
         e.preventDefault();
         e.stopPropagation();
     });

     function initialize() {
         geocoder = new google.maps.Geocoder();
         if (typeof txtLat === "undefined" || txtLat === "") {
             console.log('null');
             latlng = new google.maps.LatLng(21.1311083, 82.7792231);
             mapOptions = {
                 zoom: 14,
                 center: latlng,
                 mapTypeControl: true,
                 panControl: true,
                 zoomControl: true,
                 streetViewControl: false,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
             };
             map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
             codeAddress();
             setLocation();
         } else {
             console.log('not null');
             //   geocoder = new google.maps.Geocoder();
             latlng = new google.maps.LatLng(txtLat, txtLang);
             mapOptions = {
                 zoom: 14,
                 center: latlng,
                 mapTypeControl: true,
                 panControl: true,
                 zoomControl: true,
                 streetViewControl: false,
                 mapTypeId: google.maps.MapTypeId.ROADMAP
             };
             map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
             //  codeAddress();
             displayInfo = new google.maps.InfoWindow();
             displayInfo.setOptions({
                 content: "<div>" + title + "</div>",
 ...