I tried to follow instructions for autozoom on Google maps so that it always fits to the markers on the maps. But I can't get it to work. Can anyone see what's wrong with my code?
<script>
function initMap() {
var myLatLng = { lat: 55.561213987, lng: 8.1286275387 };
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Top moderne sommerhus med alle faciliteter beliggende på en skøn grund med mange'
});
var marker = new google.maps.Marker({
position: { lat: 55.5577227947, lng: 8.1225042121 },
label: "1",
map: map,
title: 'Lækkert sommerhus beliggende på en dejlig naturgrund'
});
var marker = new google.maps.Marker({
position: { lat: 55.5570797278, lng: 8.1276749566 },
label: "2",
map: map,
title: 'Sommerhus med stråtag beliggende på en meget stor grund med mange fyrretræer og '
});
var marker = new google.maps.Marker({
position: { lat: 55.56169, lng: 8.13126 },
label: "3",
map: map,
title: 'Dette skønne feriehus fremstår utroligt flot'
});
var marker = new google.maps.Marker({
position: { lat: 55.5560563333123, lng: 8.12075257301331 },
label: "4",
map: map,
title: 'Spændende, velholdt, stråtækt feriehus i sten, beliggende på delvis lukket natur'
});
var marker = new google.maps.Marker({
position: { lat: 55.55282, lng: 8.12843 },
label: "5",
map: map,
title: 'Kun 850 m fra Vesterhavet med den dejlige sandstrand og ca'
});
var map;
var bound = new google.maps.LatLngBounds();
var markers = new Array();
//jQuery style entry point, change if necessary
$(document).ready(function(){
initMap();
initMarkers();
for(var i in markers)
{
bound.extend(markers[i].getPosition());
}
map.fitBounds(bound);
});
}
</script>
Any help will be much appreciated!
initMarkers
doesn't exist. code snippet:
function initMap() { var myLatLng = { lat: 55.561213987, lng: 8.1286275387 }; var map = new google.maps.Map(document.getElementById('map-canvas'), { zoom: 13, center: myLatLng }); var markers = []; var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Top moderne sommerhus med alle faciliteter beliggende på en skøn grund med mange' }); markers.push(marker); var marker = new google.maps.Marker({ position: { lat: 55.5577227947, lng: 8.1225042121 }, label: "1", map: map, title: 'Lækkert sommerhus beliggende på en dejlig naturgrund' }); markers.push(marker); var marker = new google.maps.Marker({ position: { lat: 55.5570797278, lng: 8.1276749566 }, label: "2", map: map, title: 'Sommerhus med stråtag beliggende på en meget stor grund med mange fyrretræer og ' }); markers.push(marker); var marker = new google.maps.Marker({ position: { lat: 55.56169, lng: 8.13126 }, label: "3", map: map, title: 'Dette skønne feriehus fremstår utroligt flot' }); markers.push(marker); var marker = new google.maps.Marker({ position: { lat: 55.5560563333123, lng: 8.12075257301331 }, label: "4", map: map, title: 'Spændende, velholdt, stråtækt feriehus i sten, beliggende på delvis lukket natur' }); markers.push(marker); var marker = new google.maps.Marker({ position: { lat: 55.55282, lng: 8.12843 }, label: "5", map: map, title: 'Kun 850 m fra Vesterhavet med den dejlige sandstrand og ca' }); markers.push(marker); // initMarkers(); var bound = new google.maps.LatLngBounds(); for (var i in markers) { bound.extend(markers[i].getPosition()); } map.fitBounds(bound); } //jQuery style entry point, change if necessary $(document).ready(function() { initMap(); });
html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas"></div>
The markers were not added to the markers array and hence you were iterating over a blank array. You need to add the markers to the array. Also you had given all the markers the same name. Please find below the fixed code.
<script>
var map;
var bound = new google.maps.LatLngBounds();
var markers = new Array();
function initMap() {
var myLatLng = { lat: 55.561213987, lng: 8.1286275387 };
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: myLatLng
});
}
function initMarkers(){
var marker1 = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Top moderne sommerhus med alle faciliteter beliggende på en skøn grund med mange'
});
markers.push(marker1)
var marker2 = new google.maps.Marker({
position: { lat: 55.5577227947, lng: 8.1225042121 },
label: "1",
map: map,
title: 'Lækkert sommerhus beliggende på en dejlig naturgrund'
});
markers.push(marker2)
var marker3 = new google.maps.Marker({
position: { lat: 55.5570797278, lng: 8.1276749566 },
label: "2",
map: map,
title: 'Sommerhus med stråtag beliggende på en meget stor grund med mange fyrretræer og '
});
markers.push(marker3)
var marker4 = new google.maps.Marker({
position: { lat: 55.56169, lng: 8.13126 },
label: "3",
map: map,
title: 'Dette skønne feriehus fremstår utroligt flot'
});
markers.push(marker4)
var marker5 = new google.maps.Marker({
position: { lat: 55.5560563333123, lng: 8.12075257301331 },
label: "4",
map: map,
title: 'Spændende, velholdt, stråtækt feriehus i sten, beliggende på delvis lukket natur'
});
markers.push(marker5)
var marker6 = new google.maps.Marker({
position: { lat: 55.55282, lng: 8.12843 },
label: "5",
map: map,
title: 'Kun 850 m fra Vesterhavet med den dejlige sandstrand og ca'
});
markers.push(marker6)
}
//jQuery style entry point, change if necessary
$(document).ready(function(){
initMap();
initMarkers();
for(var i in markers)
{
bound.extend(markers[i].getPosition());
}
map.fitBounds(bound);
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.