css - Responsive Google Maps v3 - Cannot get 100% height -
been on while now, need make map height 100% of container. , keep centred when resizing.
i have tried of examples on here no avail..
the code example below shows using, there's markers , infowindows in there , custom marker symbols too. don't errors in console.
<script type="text/javascript"> var markers = [ { "title": 'xxxxx school', "lat": '53.004758', "lng": '-2.241232', "description": '<br/><a href="http://www.google.com">view more info</a>', "type": 'uk independent school' }, { "title": 'xxxxx prep', "lat": '51.470123', "lng": '-0.209838', "description": '<br/><a href="http://www.google.com">view more info</a>', "type": 'uk independent school' }, { "title": 'xxxxxx', "lat": '46.709741', "lng": '9.159625', "description": '<br/><a href="http://www.google.com">view more info</a>', "type": 'swiss boarding school' }, { "title": 'xxxxxxx independent college', "lat": '51.512103', "lng": '-0.308055', "description": '83 new broadway, <br/>london w5 5al, <br/>united kingdom <br/><a href="http://www.google.com">view more info</a>', "type": 'uk independent school' }, { "title": 'xxxxxxx hill', "lat": '51.007720', "lng": '0.217913', "description": 'five ashes, <br/>mayfield, <br/>east sussex <br/>tn20 6hr, <br/>united kingdom <br/><a href="http://www.google.com">view more info</a>', "type": 'uk independent school' } ]; var map; function initmap() { var mapoptions = { center: new google.maps.latlng(51.507351, -0.127758), zoom: 8, maptypeid: google.maps.maptypeid.roadmap, styles: [{"featuretype":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featuretype":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featuretype":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featuretype":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featuretype":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featuretype":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featuretype":"administrative.province","stylers":[{"visibility":"off"}]},{"featuretype":"water","elementtype":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featuretype":"water","elementtype":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}] }; var infowindow = new google.maps.infowindow(); var latlngbounds = new google.maps.latlngbounds(); var map = new google.maps.map(document.getelementbyid("dvmap"), mapoptions); var = 0; var interval = setinterval(function () { var data = markers[i] var mylatlng = new google.maps.latlng(data.lat, data.lng); var icon = ""; switch (data.type) { case "uk independent school": icon = "orange"; break; case "swiss boarding school": icon = "green"; break; } icon = "http://fokn.temp-dns.com/images/site/icon-" + icon + ".png"; var marker = new google.maps.marker({ position: mylatlng, map: map, title: data.title, animation: google.maps.animation.drop, icon: new google.maps.markerimage(icon) }); (function (marker, data) { google.maps.event.addlistener(marker, "click", function (e) { infowindow.setcontent("<div style = 'width:200px;min-height:40px'><strong>" + data.title + "</strong><br/>" + data.description + "</div>"); infowindow.open(map, marker); }); })(marker, data); latlngbounds.extend(marker.position); i++; if (i == markers.length) { clearinterval(interval); var bounds = new google.maps.latlngbounds(); map.setcenter(latlngbounds.getcenter()); map.fitbounds(latlngbounds); } }, 80); } </script> <div style="width:100%; height:100%;"> <div id="dvmap" style="width:100%; height:100%;"></div> </div> <script async defer src="https://maps.googleapis.com/maps/api/js?key=my-api&callback=initmap"></script>
you need give sizes elements <html> element:
html, body, #dvmap { height: 100%; width: 100%; margin: 0px; padding: 0px } mike williams' google maps javascript api v2 page on subject: using percentage height map div
code snippet:
var markers = [{ "title": 'xxxxx school', "lat": '53.004758', "lng": '-2.241232', "description": '<br/><a href="http://www.google.com">view more info</a>', "type": 'uk independent school' }, { "title": 'xxxxx prep', "lat": '51.470123', "lng": '-0.209838', "description": '<br/><a href="http://www.google.com">view more info</a>', "type": 'uk independent school' }, { "title": 'xxxxxx', "lat": '46.709741', "lng": '9.159625', "description": '<br/><a href="http://www.google.com">view more info</a>', "type": 'swiss boarding school' }, { "title": 'xxxxxxx independent college', "lat": '51.512103', "lng": '-0.308055', "description": '83 new broadway, <br/>london w5 5al, <br/>united kingdom <br/><a href="http://www.google.com">view more info</a>', "type": 'uk independent school' }, { "title": 'xxxxxxx hill', "lat": '51.007720', "lng": '0.217913', "description": 'five ashes, <br/>mayfield, <br/>east sussex <br/>tn20 6hr, <br/>united kingdom <br/><a href="http://www.google.com">view more info</a>', "type": 'uk independent school' }]; var map; function initmap() { var mapoptions = { center: new google.maps.latlng(51.507351, -0.127758), zoom: 8, maptypeid: google.maps.maptypeid.roadmap, styles: [{ "featuretype": "landscape", "stylers": [{ "saturation": -100 }, { "lightness": 65 }, { "visibility": "on" }] }, { "featuretype": "poi", "stylers": [{ "saturation": -100 }, { "lightness": 51 }, { "visibility": "simplified" }] }, { "featuretype": "road.highway", "stylers": [{ "saturation": -100 }, { "visibility": "simplified" }] }, { "featuretype": "road.arterial", "stylers": [{ "saturation": -100 }, { "lightness": 30 }, { "visibility": "on" }] }, { "featuretype": "road.local", "stylers": [{ "saturation": -100 }, { "lightness": 40 }, { "visibility": "on" }] }, { "featuretype": "transit", "stylers": [{ "saturation": -100 }, { "visibility": "simplified" }] }, { "featuretype": "administrative.province", "stylers": [{ "visibility": "off" }] }, { "featuretype": "water", "elementtype": "labels", "stylers": [{ "visibility": "on" }, { "lightness": -25 }, { "saturation": -100 }] }, { "featuretype": "water", "elementtype": "geometry", "stylers": [{ "hue": "#ffff00" }, { "lightness": -25 }, { "saturation": -97 }] }] }; var infowindow = new google.maps.infowindow(); var latlngbounds = new google.maps.latlngbounds(); var map = new google.maps.map(document.getelementbyid("dvmap"), mapoptions); var = 0; var interval = setinterval(function() { var data = markers[i] var mylatlng = new google.maps.latlng(data.lat, data.lng); var icon = ""; switch (data.type) { case "uk independent school": icon = "orange"; break; case "swiss boarding school": icon = "green"; break; } icon = "http://maps.google.com/mapfiles/ms/micons/" + icon + ".png"; var marker = new google.maps.marker({ position: mylatlng, map: map, title: data.title, animation: google.maps.animation.drop, icon: icon }); (function(marker, data) { google.maps.event.addlistener(marker, "click", function(e) { infowindow.setcontent("<div style = 'width:200px;min-height:40px'><strong>" + data.title + "</strong><br/>" + data.description + "</div>"); infowindow.open(map, marker); }); })(marker, data); latlngbounds.extend(marker.position); i++; if (i == markers.length) { clearinterval(interval); var bounds = new google.maps.latlngbounds(); map.setcenter(latlngbounds.getcenter()); map.fitbounds(latlngbounds); } }, 80); } google.maps.event.adddomlistener(window, 'load', initmap);html, body, #dvmap { height: 100%; width: 100%; margin: 0px; padding: 0px }<script src="https://maps.googleapis.com/maps/api/js"></script> <div style="width:100%; height:100%;"> <div id="dvmap"></div> </div>
Comments
Post a Comment