GeoComplete, 모달 구글지도는지도, 위치는 화면 다음에 내가이 문제를 해결하기 위해 노력했습니다 과거 5 시간 동안

크기를 보여줍니다 회색을 보여줍니다GeoComplete, 모달 구글지도는지도, 위치는 화면 다음에 내가이 문제를 해결하기 위해 노력했습니다 과거 5 시간 동안

내가 GeoComplete jQuery 플러그인이를, 나는 검색을 포함했다 필드와 부 풀림 모달의지도, 불행한지도가 표시되지 않습니다, 잘 화면의 크기를 조정 한 후 유일한 쇼, 이것은 알려진 문제이며 내 위협이 질문했지만 명확하게 해결되지 않았습니다 (코드로, 내가 가진 것처럼) 도와 주셔서 정말 고맙습니다.

샘플 코드 (AN index.html 파일에 모든 코드를 복사하십시오)

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style type="text/css" media="screen"> 
 
     .map_canvas { float: left; } 
 
     form { width: 300px; float: left; } 
 
     fieldset { width: 320px; margin-top: 20px} 
 
     fieldset label { display: block; margin: 0.5em 0 0em; } 
 
     fieldset input { width: 95%; } 
 
\t #examples a { 
 
    text-decoration: underline; 
 
} 
 

 
#geocomplete { width: 200px} 
 

 
.map_canvas { 
 
    width: 100%; 
 
    height: 400px; 
 
    margin: 10px 20px 10px 0; 
 
} 
 

 
#multiple li { 
 
    cursor: pointer; 
 
    text-decoration: underline; 
 
} 
 
.pac-container { 
 
      z-index: 10000 !important; 
 
     } 
 

 
      .pac-container:after { 
 
       background-image: none !important; 
 
       height: 0px; 
 
      } 
 
     .map_canvas { 
 
      float: left; 
 
      z-index: 10000 !important; 
 
     } 
 

 
     .pac-container { 
 
      background-color: #FFF; 
 
      z-index: 20; 
 
      position: fixed; 
 
      display: inline-block; 
 
      float: left; 
 
     } 
 

 
     .modal { 
 
      z-index: 20; 
 
     } 
 

 
     .modal-backdrop { 
 
      z-index: 10; 
 
     } 
 

 
    </style> 
 
</head> 
 
<body> 
 

 
<!-- Trigger the modal with a button --> 
 

 

 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Google Search Map </h4><h6>(Map only shows after you reseize the browser page and back) nb: Don't forget to refresh input field's value</h6> 
 
     </div> 
 
     <div class="modal-body"> 
 
\t 
 
\t <div class="form-group"> 
 
    <label for="usr">Search:</label> 
 
    
 
<input id="geocomplete" class="form-control" type="text" placeholder="Type in an address" value="London, United Kingdom" /> 
 
    <small>I have added the value (you can change it if you wish</small> 
 
</div> 
 

 
     <div class="map_canvas"></div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <h3>Modal button below</h3> <hr> <p></p> <p></p> <p></p> <p></p> 
 
<button type="button" class="btn btn-danger btn-xl" data-toggle="modal" data-target="#myModal">Open Google Map Modal</button> 
 
    
 
</div> 
 
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 

 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script> 
 

 
    <script> 
 
     $(function(){ 
 
     $("#geocomplete").geocomplete({ 
 
      map: ".map_canvas", 
 
      details: "form", 
 
      types: ["geocode", "establishment"], 
 
     }); 
 

 
     $("#find").click(function(){ 
 
      $("#geocomplete").trigger("geocode"); 
 
     }); 
 
     }); 
 
    </script> 
 

 

 
</body> 
 
</html>

출처

2017-12-12 64YearOldCoder

SOLUTION

$(function(){ 
    $("#geocomplete").geocomplete({ 
     componentRestrictions: { country: 'ZA' }, 
     map: ".map_canvas", 
     details: "form", 
     types: ["geocode", "establishment"], 
    }) 
    .bind("geocode:result", function(event, result){ 
     var map = $("#geocomplete").geocomplete('map'); 
     google.maps.event.trigger(map, "resize"); 
     map.setCenter(result.geometry.location); 
    }); 
});

출처

2017-12-12 08:29:26 64YearOldCoder

GeoComplete, 모달 구글지도는지도, 위치는 화면 다음에 내가이 문제를 해결하기 위해 노력했습니다 과거 5 시간 동안

답변

관련 문제