Baikan kita memulai dengan beberapa plugin yang sudah banyak tersedia di google
1. Tarik plugin yang akan digunakan seperti jQuery library dan google maps Api
1 | <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
2 | <script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places&sensor=false"></script> |
2. Tarik jQuery Geocomplite sesudah jQuery library
<script src="jquery.geocomplete.js"></script> 3. Buat textbok untuk input untuk Geocoding dan place autocomplete
<input type="text">4. Buat <div> unruk input lokasi tujuan maps
1 | <div id="google-map"> |
2 | </div> |
5. Panggil fungsi di dalam textbox untuk menyalakan geocoding dan temnpat tujuan anda
1 | $('input').geocomplete({ |
2 | map:'#google-map' |
3 | }); |
6. Yang terakir masukan scrip default dibawah ini.
01 | $('input').geocomplete({ |
02 |
03 | // Whether to snap geocode search to map bounds. |
04 | bounds:true, |
05 | country:null, |
06 |
07 | // Might be a selector, an jQuery object or a DOM element |
08 | map:false, |
09 |
10 | // The container that should be populated with data. |
11 | details:false, |
12 |
13 | // The attribute's name to use as an indicator. |
14 | detailsAttribute:"name", |
15 |
16 | // Automatically selects the highlighted item or the first item from the suggestions list on Enter. |
17 | autoselect:true, |
18 |
19 | // Location to initialize the map on. |
20 | location:false, |
21 |
22 | // Options to pass to the 'google.maps.Map' constructor. |
23 | mapOptions: { |
24 |
25 | // The inital zoom level. |
26 | zoom: 14, |
27 |
28 | // Whether to enable the scrollwheel to zoom the map. |
29 | scrollwheel:false, |
30 |
31 | // The map type. |
32 | mapTypeId:"roadmap" |
33 | }, |
34 |
35 | // The options to pass to the `google.maps.Marker` constructor. |
36 | markerOptions: { |
37 |
38 | // If the marker is draggable. |
39 | draggable:false |
40 | }, |
41 |
42 | // The maximum zoom level too zoom in after a geocoding response. |
43 | max<a href="http://www.jqueryscript.net/zoom/">Zoom</a>: 16, |
44 |
45 | // An array containing one or more of the supported types for the places request. |
46 | types: ['geocode'], |
47 |
48 | // Trigger geocode when input loses focus. |
49 | blur:false, |
50 |
51 | // If blur is set to true, choose whether to geocode if user has explicitly selected a result before blur. |
52 | geocodeAfterResult:false |
53 |
54 | }); |
Jika Anda masih bingung souce code bisa di dapatkan di link berikut.
Server1 http://viahold.com/304t
Server2 http://festyy.com/q2u2Lc
Selamat mencoba Happy coding
