구글맵 API

iframe으로 지도를 불러오면 화면에 표시되지 않는 경우가 생길수 있어 google maps API를 사용해 지도를 불러온다.

1. head요소에 삽입
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

2. css설정
 div#map{
  width:100%;
  height:400px;
  border:4px solid white;
  -webkit-box-sizing: border-box;
  box-sizing:border-box;
 }

3. google map api에서 공개된 소스 삽입
<script>
$(function(){
  var myLatlng = new google.maps.LatLng(위도,경도);
  var myOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), myOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
  });
});
</script>

4. 회색으로 표시되는 영역에 따른 스크립트 변경
<script>
$('div#페이지요소).live('pageshow',function(){
  var myLatlng = new google.maps.LatLng(위도,경도);
  var myOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), myOptions);
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
  });
});
</script>