маркеры карты google и строка не реагируют

Question

В настоящее время работает на карте google (отзывчивый) Я искал несколько опций по SO, но я не смог воспроизвести то же самое, где я могу изменить размер карты для мобильных устройств и планшета Но я есть маркеры и путь, который не соответствовал размеру экрана. И нужно добавить текст внутри маркера динамически, я вообще ничего не получаю.

Вот код для маркеров линии

CSS

#map 
{ 
    height: 83%; 
    width: 100%; 
    position: absolute; 
    left: 0px; 
    top:65px; 
    z-index: 0; 
    margin: 0; 
    padding: 0;  
} 

JavaScript:

initMap(); 

function initMap() { 
var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 8, 
    center: { 
     lat: 51.1500, 
     lng: -1.000 
    }, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
}); 

var marker = new google.maps.Marker({ 
    position: map.getCenter(), 
    icon: 'Styles/images/ic_pin_from.png', 
    map: map, 
    position: new google.maps.LatLng(51.3700, -2.3800) 
}); 
var marker = new google.maps.Marker({ 
    position: map.getCenter(), 
    icon: 'Styles/images/ic_pin_to.png', 
    map: map, 
    position: new google.maps.LatLng(52.1600, 0.1080) 
}); 
var marker = new google.maps.Marker({ 
    position: map.getCenter(), 
    icon: 'Styles/images/ic_car.png', 
    map: map, 
    position: new google.maps.LatLng(51.7200, -0.2800) 
}); 
/*var flightPlanCoordinates = [ 
{lat: 51.3610, lng: -2.300}, 
{lat: 51.2680, lng: 0.464} 
];*/ 
var flightPlanCoordinates = [{ 
    lat: 51.3740, 
    lng: -2.300 
}, { 
    lat: 51.3510, 
    lng: -1.1640 
}, { 
    lat: 51.1600, 
    lng: -1.0000 
}, { 
    lat: 51.8950, 
    lng: -0.5000 
}]; 
var flightPath = new google.maps.Polyline({ 
    path: flightPlanCoordinates, 
    geodesic: true, 
    strokeColor: '#00298B', 
    strokeOpacity: 1.0, 
    strokeWeight: 3 
}); 
flightPath.setMap(map); 
} 

Вот fiddle link за тот же

Answer 1

Добавьте точки в полилинии пустой объект google.maps.LatLngBounds с .extend, затем позвоните по телефону map.fitBounds.

var bounds = new google.maps.LatLngBounds(); 
    // for each marker do: 
    bounds.extend(marker.getPosition()); 

    for (var i=0; i<flightPlanCoordinates.length; i++) { 
    bounds.extend(new google.maps.LatLng(flightPlanCoordinates[i].lat, flightPlanCoordinates[i].lng)); 
    } 
    map.fitBounds(bounds); 

updated fiddle

фрагмент кода:

initMap(); 
 

 
function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 8, 
 
    center: { 
 
     lat: 51.1500, 
 
     lng: -1.000 
 
    }, 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var marker = new google.maps.Marker({ 
 
    position: map.getCenter(), 
 
    // icon: 'http://imgur.com/3PFbvd1', 
 
    map: map, 
 
    position: new google.maps.LatLng(51.3700, -2.3800) 
 
    }); 
 
    bounds.extend(marker.getPosition()); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: map.getCenter(), 
 
    // icon: 'http://imgur.com/dc2Sq4r', 
 
    map: map, 
 
    position: new google.maps.LatLng(52.1600, 0.1080) 
 
    }); 
 
    bounds.extend(marker.getPosition()); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: map.getCenter(), 
 
    // icon: 'Styles/images/ic_car.png', 
 
    map: map, 
 
    position: new google.maps.LatLng(51.7200, -0.2800) 
 
    }); 
 
    bounds.extend(marker.getPosition()); 
 

 
    var flightPlanCoordinates = [{ 
 
    lat: 51.3740, 
 
    lng: -2.300 
 
    }, { 
 
    lat: 51.3510, 
 
    lng: -1.1640 
 
    }, { 
 
    lat: 51.1600, 
 
    lng: -1.0000 
 
    }, { 
 
    lat: 51.8950, 
 
    lng: -0.5000 
 
    }]; 
 
    var flightPath = new google.maps.Polyline({ 
 
    path: flightPlanCoordinates, 
 
    geodesic: true, 
 
    strokeColor: '#00298B', 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 3 
 
    }); 
 
    flightPath.setMap(map); 
 

 
    for (var i = 0; i < flightPlanCoordinates.length; i++) { 
 
    bounds.extend(new google.maps.LatLng(flightPlanCoordinates[i].lat, flightPlanCoordinates[i].lng)); 
 
    } 
 
    map.fitBounds(bounds); 
 
}

#map { 
 
    height: 83%; 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 65px; 
 
    z-index: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

Answer 2

@mahadhevan, попробуйте с этим кодом.

google.maps.event.addDomListener(window, "resize", function() { 
     var center = map.getCenter(); 
     google.maps.event.trigger(map, "resize"); 
     map.setCenter(center); 
    });