Google지도 센터 및 InfoWindow

Question

다른 답변이 있으면 유감스럽게 생각하지만 내지도에 수신기를 추가하면 내 마커가 숨겨 지거나로드되지 않습니다. infowindow 및 중심을 마커에로드하는 방법을 설명 할 수 있습니다. 클릭 할 때? Heres는 내 코드 지금까지

:

편집

<section id="wrapper"> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<article> 
</article> 
<script> 
function success(position) { 
    var mapcanvas = document.createElement('div'); 
    mapcanvas.id = 'mapcontainer'; 
    mapcanvas.style.height = '600px'; 
    mapcanvas.style.width = '100%'; 
    document.querySelector('article').appendChild(mapcanvas); 

    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    var options = { 
    zoom: 12, 
    //center: coords, 
    center: new google.maps.LatLng(51.416741,-0.543854), 
    mapTypeControl: false, 
    navigationControlOptions: { 
     style: google.maps.NavigationControlStyle.SMALL 
    }, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("mapcontainer"), options); 

    // Geolocation 
    var marker = new google.maps.Marker({ 
     position: coords, 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/micons/blue-dot.png', 
     title:"You are here!", 
    }); 

    // Great Fosters 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.416741,-0.543854), 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png', 
     title:"Great Fosters", 
    }); 

    // St Matthews 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.432327,-0.459162), 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/icons/orange-dot.png', 
     title:"St Matthews", 
    }); 

    // ----- STAINES HOTELS - START ----- 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.435698,-0.514469), 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
     title:"Travel Lodge Staines", 
    }); 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.432156,-0.51617), 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
     title:"Thames Lodge Staines", 
    }); 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.43218,-0.516293), 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
     title:"The Boleyn Staines", 
    }); 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.432534,-0.516422), 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/icons/green-dot.png', 
     title:"The Swan Staines", 
    }); 
    // ----- STAINES HOTELS - END ----- 

} 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(success); 
} else { 
    error('Geo Location is not supported'); 
} 
</script> 
</section> 

: 이제 배열을 포함하는 내 코드를 변경하고 아주 잘 작동하지만 지금은 마커 때지도를 중심하려는

클릭하고 모든 마커를 창에 넣고 싶지만 fitBounds는 아무 것도하지 않는 것 같습니다. 그것을 클릭하면, 마커를지도의 중심을 그렇게 코드를 변경하려면 여기 http://www.everythingcreative.co.uk/marker

<section id="wrapper"> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<article> 
</article> 
<script> 

    var markers = [ 
    ['Great Fosters', 51.416741,-0.543854, 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'], 
    ['St Matthews', 51.432327,-0.459162, 'http://maps.google.com/mapfiles/ms/icons/orange-dot.png'], 
    // Staines 
    ['Travel Lodge Staines', 51.435698,-0.514469, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['Thames Lodge Staines', 51.432156,-0.51617, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['The Boleyn Staines', 51.43218,-0.516293, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['The Swan Staines', 51.432534,-0.516422, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    // Surrey 
    ['The Runnymede Hotel', 51.43751,-0.537544, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['The Wheatsheaf Hotel', 51.409151,-0.592704, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['The Premier Inn Sunbury', 51.419322,-0.42248, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['The Crown Chertsey', 51.39181,-0.501861, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    // Heathrow 
    ['Sofitel Heathrow', 51.473478,-0.49152, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['Marriott Heathrow', 51.481263,-0.438209, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'], 
    ['Premier Inn Heathrow', 51.481615,-0.482288, 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'] 
]; 

function success(position) { 
    var mapcanvas = document.createElement('div'); 
    mapcanvas.id = 'mapcontainer'; 
    mapcanvas.style.height = '600px'; 
    mapcanvas.style.width = '100%'; 
    document.querySelector('article').appendChild(mapcanvas); 

    var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    var options = { 
    zoom: 12, 
    //center: coords, 
    center: new google.maps.LatLng(51.416741,-0.543854), 
    mapTypeControl: false, 
    navigationControlOptions: { 
     style: google.maps.NavigationControlStyle.SMALL 
    }, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("mapcontainer"), options); 

    // Marker Control 
    var infowindow = new google.maps.InfoWindow(), marker, i; 
for (i = 0; i < markers.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(markers[i][1], markers[i][2]), 
     map: map, 
     icon: markers[i][3] 
    }); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(markers[i][0]); 
      infowindow.open(map, marker); 
     } 
    })(marker, i)); 
} 

function AutoCenter() { 
// Create a new viewpoint bound 
var bounds = new google.maps.LatLngBounds(); 
// Go through each... 
$.each(markers, function (index, marker) { 
bounds.extend(marker.position); 
}); 
// Fit these bounds to the map 
map.fitBounds(bounds); 
} 

    // Geolocation 
    var GeoMarker = new google.maps.Marker({ 
     position: coords, 
     map: map, 
     icon:'http://maps.google.com/mapfiles/ms/micons/blue-dot.png', 
     title:"You are here!", 
    }); 


} 
if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(success); 
} else { 
    error('Geo Location is not supported'); 
} 
</script> 
</section> 

Answer 1

표시 할 수 있습니다 : fitBounds가 작동

google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     // center on marker 
     map.setCenter(marker.getPosition()); 
     // open the infowindow 
     infowindow.setContent(markers[i][0]); 
     infowindow.open(map, marker); 
    } 
})(marker, i)); 

을 위해, 당신은을 통과해야합니다. 메소드를 확장하여 google.maps.LatLng 객체를 만듭니다. 기존 코드에서 주어진 가장 간단한 방법은 "마커 제어"루프에 넣는 것입니다.

var bounds = new google.maps.LatLngBounds(); 
for (i = 0; i < markers.length; i++) { 
    marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(markers[i][1], markers[i][2]), 
     map: map, 
     icon: markers[i][3] 
    }); 
    bounds.extend(marker.getPosition()); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(markers[i][0]); 
      infowindow.open(map, marker); 
     } 
    })(marker, i)); 
} 
map.fitBounds(bounds);