2017-11-22 7 views
0

부트 맵 모달에 Google지도 표시가 표시되지 않습니다.부트 맵 모달에 Google지도 표시가 표시되지 않습니다.

이 내 jQuery 코드입니다 :

function map_init() { 
    if(!$('body').data('map')){ 
     var var_mapoptions = { 
      zoom: 6, 
      mapTypeControl: true, 
      mapTypeControlOptions: { 
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, 
      mapTypeIds: ['roadmap', 'terrain'] 
      } 
     }; 
    $('body').data('map',new google.maps.Map($('<div id="map"/>')[0], 
      var_mapoptions)); 

    } 
    return $('body').data('map'); 
    } 
    var Lat; 
    var lon; 
    $(document).on('click','a[data-map]',function(){ 
    var data=$(this).data('map'), 
     map=map_init(); 

     var geocoder = new google.maps.Geocoder(); 
     var address = data; 

     geocoder.geocode({ 'address': address}, function(results, status) { 

      if (status == google.maps.GeocoderStatus.OK) { 
      var latitude = results[0].geometry.location.lat(); 
      var longitude = results[0].geometry.location.lng(); 
      } 
      Lat = latitude; 
      lon = longitude; 
     }); 
    $('#map_modal') 
     .find('.modal-body') 
     .append(map.getDiv()) 
     .end() 
     .find('.modal-title') 
     .text(data.Name) 
     .end() 
     .one('shown.bs.modal',function(){ 
      google.maps.event.trigger(map, "resize"); 
       map.setCenter({lat:Lat,lng:lon}); 
       }); 
      }) 
     .modal('show'); 
    }); 

enter image description here

이 모달을 보여하지만,지도 아이콘을 보여주는 아니에요. 위도 및 경도 값은 PHP 코드에서 가져온 것입니다 (while 루프 값에서 가져온 것입니다).

+1

지도에 마커를 추가하는 게시 된 코드는 없습니다. 왜 그게 있어야한다고 생각하니? – geocodezip

답변

0

나는 당신이 어떤 개체를 만들지 않았다고 생각합니다.

마커는지도의 위치를 ​​나타냅니다. 기본적으로 마커는 표준 이미지를 사용합니다. 마커는 맞춤 이미지를 표시 할 수 있습니다.이 경우 사용자는 보통 을 "아이콘"이라고합니다.

내가 편집하고이 라인 안쪽에이 코드를 추가하는 제안

:

if (status == google.maps.GeocoderStatus.OK) { 
    //add marker code here 
} 

코드를 추가 할 :

var marker = new google.maps.Marker({ 
    positions : new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng()), 
    map: map, 
    title: 'I am a marker :)' 
}); 

그리고 당신의 마커가 표시됩니다.