SHARE
TWEET

Untitled

a guest Jun 26th, 2019 85 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <button class="btn btn-success" data-target="#us6-dialog" data-toggle="modal" style="padding-left:77px;padding-right:77px">Gunakan Google Maps Pick</button>
  2.                          <button class="btn btn-warning" data-target="#us5-dialog" data-toggle="modal" >?</button>
  3.                          <div id="us5-dialog" class="modal fade">
  4.                             <div class="modal-dialog">
  5.                                 <div class="modal-content">
  6.                                     <div class="modal-header">
  7.                                         <h4 class="modal-title">Cara Pakai Google Maps Pick</h4>
  8.                                     </div>
  9.                                     <div class="modal-body">
  10.                                         <div class="form-horizontal" style="width: 550px">
  11.                                             1. Buka menu</br>
  12.                                             2. Gunakan search untuk mencari alamat daerah terdekat</br>
  13.                                             3. Zoom (perkecil & perbesar) gunakan ctrl+scroll</br>
  14.                                             4. Pindahkan "Pin Merah" (marker) ke lokasi peroperty yang dijual</br>
  15.                                             5. Klik "Save changes" lalu latitude & longitude akan terisi otomatis
  16.                                         </div>
  17.                                     </div>
  18.                                     <div class="modal-footer">
  19.                                         <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
  20.                                     </div>
  21.                                 </div> 
  22.                             </div>
  23.                         </div>
  24.                        
  25.                          <div id="us6-dialog" class="modal fade">
  26.                             <div class="modal-dialog">
  27.                                 <div class="modal-content">
  28.                                     <div class="modal-header">
  29.                                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  30.                                         <h4 class="modal-title" id="judulModel">Pick Location of Property</h4>
  31.                                     </div>
  32.                                     <div class="modal-body">
  33.                                         <div class="form-horizontal" style="width: 550px">
  34.                                             <input class="form-control" id="search" name="search" type="text" placeholder="Search..." ></br>
  35.                                             <div id="map" style="width: 100%; height: 400px;"></div>
  36.                                             <script>
  37.                                                 function initMap() {
  38.                                                     var input = document.getElementById('search');
  39.                                                     var autocomplete = new google.maps.places.Autocomplete(input);
  40.                                                 }
  41.                                      
  42.                                                 google.maps.event.addDomListener(window, 'load', init);
  43.                                             </script>
  44.                                             <script>
  45.                                             function initMap() {
  46.                                                 var myLatLng = {lat: -7.257472, lng: 112.752090};
  47.  
  48.                                                 var map = new google.maps.Map(document.getElementById('map'), {
  49.                                                   zoom: 15,
  50.                                                   center: myLatLng,
  51.                                                   mapTypeId: google.maps.MapTypeId.ROADMAP
  52.                                                 });
  53.  
  54.                                                 var marker = new google.maps.Marker({
  55.                                                   map: map,
  56.                                                   draggable: true,
  57.                                                   animation:google.maps.Animation.DROP,
  58.                                                   position: myLatLng
  59.                                                 });
  60.                                                
  61.                                                 geocodePosition(marker.getPosition());
  62.                                                
  63.                                                 google.maps.event.addListener(marker,'dragend',function(){
  64.                                                     map.setCenter(marker.getPosition());
  65.                                                     geocodePosition(marker.getPosition());
  66.                                                     $("#txt_latitude").val(marker.getPosition().lat());
  67.                                                     $("#txt_longitude").val(marker.getPosition().lng());
  68.                                                    
  69.                                                 });
  70.  
  71.                                                 //var input = document.getElementById('search');
  72.                                                 //var autocomplete  = new google.maps.places.Autocomplete(input);
  73.                                                
  74.                                             }
  75.                                                 //google.maps.event.addDomListener(window, 'load', init);
  76.                                              
  77.                                                 function geocodePosition(pos){
  78.                                                     geocoder = new google.maps.Geocoder();
  79.                                                     geocoder.geocode({
  80.                                                         latLng:pos
  81.                                                     },
  82.                                                     function(result,status){
  83.                                                         if(status == google.maps.GeocoderStatus.OK){
  84.                                                             $("#judulModel").html(result[0].formatted_address);
  85.                                                             //$("#txt_street_address").val(result[0].formatted_address);
  86.                                                         }else{
  87.                                                             $("#judulModel").html('No address in Database.');
  88.                                                         }
  89.                                                     }
  90.                                                     );
  91.                                                 }
  92.                                              
  93.                                              
  94.                                              
  95.                                             </script>
  96.                                             <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwubk6zcichQlDQoYxBjJps1PE8DMl6rk&callback=initMap"
  97.                                                 async defer></script>      
  98.                                         </div>
  99.                                     </div>
  100.                                     <div class="modal-footer">
  101.                                         <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
  102.                                     </div>
  103.                                 </div>
  104.                                 <!-- /.modal-content -->
  105.                             </div>
  106.                             <!-- /.modal-dialog -->
  107.                         </div>
  108.                         <!-- /.modal
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top