JS и Google Map - центрирующая карта на маркере
У меня проблемы с центрированием карты по маркеру, вот б *:
<iframe
width="555"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=***&q=<? echo urlencode($address); ?>&zoom=14">
</iframe>
Карта загружается, но с маркером в левой верхней части экрана, поэтому пользователь должен использовать мышь, чтобы действительно отобразить нужную область на экране.
Кто-нибудь знает, как центрировать карту по положению маркера?
Извините за повторный вопрос, но те ответы, которые я видел до сих пор, не сработали в моем случае.
1 ответ
К сожалению, я не смог заставить его работать с iframe, вместо этого я использовал способ JS...
JS:
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.730885,-73.997383);
var mapOptions = {
scrollwheel: true,
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions );
var address = 'address string';
geocoder.geocode(
{ 'address': address},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
marker = new google.maps.Marker({
draggable: true,
map: map,
position: results[0].geometry.location
});
} else {
//alert('Location not found.');
}
}
);
Html:
<div id="map-canvas">
<div id="map" style="width:555px;height:450px;"></div>
</div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
который я избегал использовать причину, приводящую к другой проблеме с отображением CSS, как ноль, когда страница загружена... но это было решено (нет причин объяснять, почему причина не была вовлечена в вопрос ^^").
В любом случае, если кто-нибудь найдет решение для примера iframe, все равно будет интересно... но это все, ребята