2017-06-17 13 views
2

私はデータベースからデータを取得し、google map.iに表示するためのコードを書いていますが、これを行うには成功しましたが、データがロードされたときにマーカーの位置をズームすることはできません。 out.am事前にJSON形式のおかげでデータを取得...読み込み時に地図をマーカーにズームするにはどうすればいいですか?

function initMap() { 
     // Create the map. 
     var infoWindow = new google.maps.InfoWindow(); 
     var map = new google.maps.Map(document.getElementById('mapView'), { 
      zoom: 5, 
      center: {lat: 20.5937, lng: 78.9629}, 
      mapTypeId: 'roadmap' 
     }); 
    var type=document.getElementById("type1").innerHTML; 
    var region=document.getElementById("reg").innerHTML; 
    // var region=$('#reg').html(); 
    var hq=document.getElementById("hq1").innerHTML; 
    var division=document.getElementById("div").innerHTML; 
    // alert(type); 
    // alert(region); 
    // alert(hq); 
    // alert(division); 

     $.getJSON('data.php', 
      { 
     region: region, 
     hq: hq, 
     division: division, 
     type:type 
    }, 

     function(data){ 

      var marker = []; 
      var infowindow = []; 
      var contentString = []; 
      for(var sd in data){ 
       // alert(data); 
       contentString[sd] = '<div id="content">'+ 
        '<div id="siteNotice">'+ 
        '</div>'+ 
        '<h1 id="firstHeading" class="firstHeading">'+data[sd].name+'</h1>'+ 
        '<div id="bodyContent">'+ 
         '<p><b>Address: </b>'+data[sd].address+'</p>'+ 
         '<p><b>Area: </b>'+data[sd].area+'</p>'+ 
         '<p><b>Mobile: </b>'+data[sd].mobile+'</p>'+ 
         '</div>'+ 
       '</div>'; 

       infowindow[sd] = new google.maps.InfoWindow({ 
        content: contentString[sd] 
       }); 
       if(data[sd].type == 1){ 
        marker[sd] = new google.maps.Marker({ 
         icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png', 
         position: data[sd].center, 
         map: map, 
         infowindow: infowindow[sd] 
        }); 
       } 
       if(data[sd].type == 2){ 
        marker[sd] = new google.maps.Marker({ 
         icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png', 
         position: data[sd].center, 
         map: map, 
         infowindow: infowindow[sd] 
        }); 
       } 

       google.maps.event.addListener(marker[sd], 'click', function() { 


        this.infowindow.open(map, this); 
        // alert(this.infowindow); 


       }); 


      } 
     }); 
     } 

{ "名前": "耳鼻咽喉科クリニック"、 "住所": "Chandanagar"、 は "エリア": "CHANDANAGAR" 、 "モバイル": "9848524297"、 "タイプ": "1"、 "センター":{ "lat":17.5236717、 "lng":78.2970363 }

答えて

2

文書を確認してください: https://developers.google.com/maps/documentation/javascript/reference fitBounds()メソッドを使用する必要があります。各点に係る境界を拡張する、ループ内

var bounds = new google.maps.LatLngBounds(); 

、それの終わりに:

ループする前に、境界変数を初期化

bounds.extend(marker[sd].position); 

をループした後(=すべてのマーカーがロードされた後)、fitBounds()メソッドを使用します。

map.fitBounds(bounds); 
+0

私はこれを行っていますが、地図が正確にロードされていません。経度と経度 –

+0

違う緯度と経度はどういう意味ですか? は、データベースのデータが正しく表示されていますか? – treecon

+0

はい、1時にインド地図を読み込んでいますが、フィット境界を配置しているときにマップが正しく初期化されていません –

関連する問題