Google Maps API를 부트 스트랩 그리드 오버레이에 어떻게 삽입 할 수 있습니까?

-1

임과 같아야 웹 페이지에서 작업 : https://imgur.com/a/eW3gK Google Maps API를 부트 스트랩 그리드 오버레이에 어떻게 삽입 할 수 있습니까?

내가 부트 스트랩 그리드를 사용하는 것을 시도하고 있지만지도는 단지 크기 조정과 오른쪽 열 아래에 나타나이 작동하지 않습니다하지 않습니다.

HTML

<!DOCTYPE html> 
    <html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="~/css/custom.css"> 
     <script src="~/js/googleMap.js"></script> 

    </head> 
    <body> 
     <h3>My Google Maps Demo</h3> 
     <div class="row"> 
      <div class="col-md-6">Google Maps</div>  
     </div> 
     <div class="row"> 
      <div class="col-md-6">Contact Information</div> 
      <div class="col-md-6"> 
       <div id="map"></div> 
      </div> 
     </div> 


     <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQKR41AqiPXn-2WfLS-giuXPLWpnFxLjk&callback=initMap"></script> 
    </body> 
    </html>

CSS

#map { 
    width: 100%; 
    height: 400px; 
    background-color: grey; 
}

JS 내가 Google지도는 모형에 따라 부트 스트랩 그리드와 함께 사용할 수있는 방법

function initMap() { 
    var uluru = { lat: 51.957244, lng: 4.570751 }; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 15, 
     center: uluru 
    }); 
    var marker = new google.maps.Marker({ 
     position: uluru, 
     map: map 
    }); 
}

출처

2017-12-13 Yusuf Cum

확인이 작업을 예를 여기 http://jsbin.com/capetay/edit?output

뿐만 아니라 업데이트 된 HTML이,지도 및 연락처 정보의 컨테이너가 같은 행 여기

<div class="row body"> 
    <div class="col-sm-6"> 
    <div id="map"></div> 
    </div> 
    <div class="col-sm-6 text-center"> 
    <h4>Contact Information</h4> 
    <ul> 
     <li>ABC</li> 
    </ul> 
    </div> 
</div>

에 있어야 코드 조각입니다 : (실행 시도 전체 화면)

function initMap() { 
 
    var uluru = { lat: 51.957244, lng: 4.570751 }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 15, 
 
     center: uluru 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
     position: uluru, 
 
     map: map 
 
    }); 
 
}

#map { 
 
    width: 100%; 
 
    height: 400px; 
 
    background-color: grey; 
 
} 
 
.row.body > div { 
 
    padding: 30px; 
 
    border: 1px solid 
 
} 
 
.with-border h3 { 
 
    border: 1px solid black; 
 
    max-width: 300px; 
 
    margin: auto auto 20px auto; 
 
    padding: 15px; 
 
} 
 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <title>Google Maps API in Bootstrap</title> 
 
    </head> 
 
    <body> 
 
    <h3>My Google Maps Demo</h3> 
 
    <div class="row"> 
 
     <div class="col-md-12 text-center with-border"> 
 
     <h3>Google Maps</h3> 
 
     </div>  
 
    </div> 
 
    <div class="row body"> 
 
     <div class="col-sm-6"> 
 
     <div id="map"></div> 
 
     </div> 
 
     <div class="col-sm-6 text-center"> 
 
     <h4>Contact Information</h4> 
 
     <ul> 
 
      <li>ABC</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap"></script> 
 
    </body> 
 
</html>

출처

2017-12-18 04:02:51

Google Maps API를 부트 스트랩 그리드 오버레이에 어떻게 삽입 할 수 있습니까?

답변

관련 문제