2017-11-22 9 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

地図にマーカーを追加する投稿コードには何もありません。なぜあなたは1つあるべきだと思いますか? – geocodezip

答えて

0

私はあなたが作成していないと信じていますGoogle Maps Javascript API Markersオブジェクトです。

マーカーは地図上の場所を示します。デフォルトでは、マーカは 標準画像を使用します。マーカーはカスタム画像を表示することができます。その場合、 は通常「アイコン」と呼ばれます。

私はこのラインの内側にこのコードを編集して追加することをお勧め:追加する

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 :)' 
}); 

そして、あなたのマーカーが表示されます。

関連する問題