Centrering af et kort fra Google Maps
Hej. Jeg har her et kort fra Google Maps på en tilfældig adresse i et tilfældigt industrikvarter.Ved nogen, hvordan jeg kan få kortet til at centrere, når sidebredden ændrer sig.
På forhånd tak for hjælp, jeg er kørt fast :-)
// Lars
----------------
Den simple kode til Iframen er:
<iframe src="http://mapbuildr.com/frame/wdaj6j" frameborder="0" height="400" width="100%"></iframe>
----------------
Min API kode er:
<script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script>
<script>
google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
var mapOptions = {
center: new google.maps.LatLng(56.190636,10.196241),
zoom: 15,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
},
disableDoubleClickZoom: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
},
scaleControl: true,
scrollwheel: true,
panControl: true,
streetViewControl: true,
draggable : true,
overviewMapControl: true,
overviewMapControlOptions: {
opened: false,
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var mapElement = document.getElementById('GoogleMapsEks');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
['Ljungqvist', 'Hvor vi bor', 'undefined', 'lars.ljungqvist@mail.dk', 'undefined', 56.1905024, 10.1936967, 'https://mapbuildr.com/assets/img/markers/default.png'],['Tilfældig industrivej', 'undefined', 'undefined', 'undefined', 'undefined', 55.24598289999999, 10.485508500000037, 'https://mapbuildr.com/assets/img/markers/default.png']
];
for (i = 0; i < locations.length; i++) {
if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
marker = new google.maps.Marker({
icon: markericon,
position: new google.maps.LatLng(locations[i][5], locations[i][6]),
map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web
});
link = ''; }
}
</script>
<style>
#GoogleMapsEks {
height:400px;
width:1000px;
}
.gm-style-iw * {
display: block;
width: 100%;
}
.gm-style-iw h4, .gm-style-iw p {
margin: 0;
padding: 0;
}
.gm-style-iw a {
color: #4272db;
}
</style>
<div id='GoogleMapsEks'></div>