2017-04-14 14 views
0

次のコードは、ページ上のmemberIdを見つけてマップをレンダリングし、マーカを正常に配置していますが、マーカ上にマップの中心を置いていません。地図は、おそらくデフォルトの場所(ソマリア)に集中しています。Google Mapがマーカを中心にしていません

私は間違っていますか?

function initialize() { 
    var memberId = $('#member-section').data("member-id"); 
    if (typeof memberId === "undefined") { 
     memberId = 0; 
    } 

    var latitude = $('#member-section').data("latitude"); 
    if (typeof latitude === "undefined") { 
     latitude = 51.21921589999999; 
    } 
    var longitude = $('#member-section').data("longitude"); 
    if (typeof longitude === "undefined") { 
     longitude = 4.402881799999932; 
    } 

    var mapCentreLatlng; 
    mapCentreLatlng = new google.maps.LatLng(latitude, longitude); 

    buildMap(memberId, mapCentreLatlng); 
} 

function buildMap(memberId, mapCentreLatlng) { 
    google.maps.visualRefresh = true; 

    var infowindow = null; 

    var mapOptions = { 
     zoom: 5, 
     center: mapCentreLatlng, 
     mapTypeControlOptions: { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
     } 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    // Create a custom marker 
    var markerImage = '/img/map-flag-alt.png'; 

    // Get json data and loop to create markers for map 
    $.getJSON("/Umbraco/Api/searchmembers/GetMembers?memberId=" + memberId, function (data) { 
     $.each(data, function (members, member) { 
      // Add marker 
      var marker; 
      var memLatLng = new google.maps.LatLng(member.Latitude, member.Longitude); 
      marker = new google.maps.Marker({ 
        position: memLatLng, 
        map: map, 
        title: member.MemberName, 
        icon: markerImage 
       }); 

      // Add click event for marker 
      google.maps.event.addListener(marker, 'click', function() { 
       if (infowindow) { 
        infowindow.close(); 
       } 
       // Create info window and create content 
       var contentString = 
        '<h2 id="firstHeading">' + member.MemberName + '</h2>' + 
        '<div id="bodyContent">' + 
        '<p>' + member.Address + '</p>' + 
        '<p><a href="' + member.Url + '">View Company Profile</a></p>' + 
        '</div>'; 
       infowindow = new google.maps.InfoWindow({ 
         content: contentString 
        }); 

       infowindow.open(map, marker); 
      }); 
     }); 
    }); 
} 
+1

マーカーを作成した後で 'map.setCenter(memLatLng)'コールを追加できます。 – Titus

+0

mapOptionsの設定が無視されるのはなぜですか? – wingyip

答えて

0

はおそらく、あなたのfunction initialize()は、文書の読み込みが完了する前に、ので、あなたのVARS定義が#member-sectionを見つけられませんでしたと呼ばれています。 DOMが完全にロードされたときに関数を呼び出して$(document).ready(function initialize(){...});を追加するか、map.setCenter(memLatLng)を追加してTitusコメントのとおりにマップを再配置してみてください。

関連する問題