<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Simple markers</title> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div class="row"> <div class="col-sm-2"> <img src="" class="update-icon" alt> <h4>HARİTA</h4> </div> <div class="col-sm-10"> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <label for="lat">Enlem</label> <input class="form-control input-sm" placeholder="Enlem / LAT" name="lat" type="text" id="lat"> </div> </div> <div class="col-sm-6"> <div class="form-group"> <label for="lng">Boylam</label> <input class="form-control input-sm" placeholder="Boylam / LNG" name="lng" type="text" id="lng"> </div> </div> </div> <div class="form-group"> <div class="input-group input-group-sm"> <span class="input-group-addon"><i class="fa fa-search"></i></span> <input class="form-control input-sm" id="geocodeSearch" placeholder="Adres ara" name="geocodeSearch" type="text"> </div> </div> <div id="map"> </div> <p> <a href="javascript:;" class="btn btn-primary btn-xs" id="mapDelete"><i class="fa fa-times fa-fw"></i> Sıfırla</a> <a href="javascript:;" class="btn btn-primary btn-xs" id="mapReset"><i class="fa fa-refresh fa-fw"></i> Geri</a> </p> </div> </div> <script> $(document).ready(function () { var latInput = $('#lat'); var lngInput = $('#lng'); var currentLat = latInput.val(); var currentLng = lngInput.val(); var geocodeSearch = $('#geocodeSearch'); var defaultPlace = new google.maps.LatLng(39.09596294, 34.93309021); var geocoder = new google.maps.Geocoder(); var map = new google.maps.Map(document.getElementById('map'), { zoom: 6, center: defaultPlace, mapTypeId: google.maps.MapTypeId.ROADMAP, panControl: false }); var marker = new google.maps.Marker({ draggable: true }); var setPosition = function (lat, lng) { var pos = new google.maps.LatLng(lat, lng); marker.setMap(map); marker.setPosition(pos); map.setZoom(14); map.panTo(pos); }; var setPositionAndInput = function (lat, lng) { setPosition(lat, lng); latInput.val(lat.toFixed(8)); lngInput.val(lng.toFixed(8)); }; var clearMap = function () { marker.setMap(null); latInput.val(null); lngInput.val(null); guessResults.html(null); geocodeSearch.val(null); map.setZoom(6); map.panTo(defaultPlace); }; var resetMap = function () { if (currentLat.length && currentLng.length) { setPosition(currentLat, currentLng); latInput.val(currentLat); lngInput.val(currentLng); } else { clearMap(); } }; // Start values if (currentLat.length && currentLng.length) { setPosition(currentLat, currentLng); } // Map click google.maps.event.addListener(map, 'click', function (event) { setPositionAndInput(event.latLng.lat(), event.latLng.lng()); }); // Marker dragdrop google.maps.event.addListener(marker, 'dragend', function (event) { setPositionAndInput(event.latLng.lat(), event.latLng.lng()); }); // Search by input with autocomplete geocodeSearch.geocomplete().bind("geocode:result", function (event, result) { setPositionAndInput(result.geometry.location.lat(), result.geometry.location.lng()); }); // Clear map $('#mapDelete').click(function () { clearMap(); }); // Reset to original values $('#mapReset').click(function () { resetMap(); }); }); </script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDwaRF0FKHWLXadWuaon_TnPwmM1uAIf-o&libraries=places"></script> <script type="text/javascript" src="https://www.rehberfx.com/assets/vendor/geocomplete/jquery.geocomplete.min.js"></script> </body> </html>