ตย.ฟอร์มค้นหาที่อยู่ แผนที่ และ latitude, longitude, get latitude, longitude with google API แบบง่ายๆ โดยที่เราสามารถค้นหาที่อยู่จากฟอร์มก็จะแสดง latitude, longitude และแผนที่อัตโนมัติ
ตย. code บันทึกเป็น .html ก็ได้ครับ เช่น map.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
<!doctyp html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Get Latitude and Longitude</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="http://maps.google.com/maps/api/js?libraries=places®ion=uk&language=en&sensor=true"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <h4> ตย.ฟอร์มค้นหาที่อยู่ แผนที่ และ latitude, longitude </h4> ระบุที่อยู่: <input id="searchTextField" type="text" size="50" style="text-align: left;width:500px;direction: ltr;" class="form-control"> <br> latitude:<input name="latitude" class="MapLat form-control" value="" type="text" placeholder="Latitude" style="width: 200px;" disabled> longitude:<input name="longitude" class="MapLon form-control" value="" type="text" placeholder="Longitude" style="width: 200px;" disabled> <br><br> <div id="map_canvas" style="height: 350px;width: 500px;margin: 0.6em;"></div> <script> $(function () { var lat = 13.7211037, lng = 100.49525549999998, latlng = new google.maps.LatLng(lat, lng), image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; var mapOptions = { center: new google.maps.LatLng(lat, lng), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, panControl: true, panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.LARGE, position: google.maps.ControlPosition.TOP_left } }, map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions), marker = new google.maps.Marker({ position: latlng, map: map, icon: image }); var input = document.getElementById('searchTextField'); var autocomplete = new google.maps.places.Autocomplete(input, { types: ["geocode"] }); autocomplete.bindTo('bounds', map); var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(autocomplete, 'place_changed', function (event) { infowindow.close(); var place = autocomplete.getPlace(); if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); } moveMarker(place.name, place.geometry.location); $('.MapLat').val(place.geometry.location.lat()); $('.MapLon').val(place.geometry.location.lng()); }); google.maps.event.addListener(map, 'click', function (event) { $('.MapLat').val(event.latLng.lat()); $('.MapLon').val(event.latLng.lng()); infowindow.close(); var geocoder = new google.maps.Geocoder(); geocoder.geocode({ "latLng":event.latLng }, function (results, status) { console.log(results, status); if (status == google.maps.GeocoderStatus.OK) { console.log(results); var lat = results[0].geometry.location.lat(), lng = results[0].geometry.location.lng(), placeName = results[0].address_components[0].long_name, latlng = new google.maps.LatLng(lat, lng); moveMarker(placeName, latlng); $("#searchTextField").val(results[0].formatted_address); } }); }); function moveMarker(placeName, latlng) { marker.setIcon(image); marker.setPosition(latlng); infowindow.setContent(placeName); //infowindow.open(map, marker); } }); </script> </div> </div> </div> </body> </html> |
ref : https://gist.github.com/opnchaudhary/5931600
ผลการทำงาน
อย่าลืมนำไปประยุกต์ใช้นะครับ ^___^
รวมคลิปสอนทำเว็บฟรี คลิก..