javascript - Gmaps not working properly on js -
i've gmap loading problem google javascript api , not load when initialized project. tried of available solutions did not work. in addition, if reloaded or resized page, works.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=aizasydwtqpi0gtmb6hoijbblcgyfzlakadmqli"></script> @scripts.render("~/bundles/gmaps") <script type="text/javascript"> $(document).ready(function () { var map = new gmaps({ div: '#gmap_basic', lat: 25.261502, lng: 55.29155, zoom: 15, width: '100%', height: '300px', }); map.addmarker({ lat: 25.261502, lng: 55.29155, }); }) </script>
html:
<div class="portlet-body"> <div id="gmap_basic" class="gmaps"></div> </div>
just seems top left of page! how can fix problem?
i'm using "bootstrap" project. so, bootstrap provides method shown.bs.'your element tag' event. , solved problem. hope useful everbody.
html
<div class="portlet-body"> <div id="gmap_basic" class="gmaps"></div> </div>
js
<script type="text/javascript"> $(document).ready(function () { $('#tabgmap').on('shown.bs.tab', function (e) { var lat = 'your map lat'; var lon = 'your map lon'; var map = new gmaps({ div: '#gmap_basic', lat: lat, lng: lon, zoom: 14, scalecontrol: false, width: '100%', height: '300px', center: new google.maps.latlng(lat, lon) }); map.addmarker({ title: 'map title', lat: lat, lng: lon }); }); }) </script>
output
Comments
Post a Comment