javascript - Google Maps API v3 InfoWindow first appears in incorrect location, then loads correctly -
for reason, in first second of loading map, infowindow incorrectly appearing @ left edge , appearing in correct, middle position of map. want infowindow automatically in middle of map whenever loaded. there way can fix rough transition? in code out of order? seems if loading should smoother this.
<div id="map-canvas"></div> <script> function initialize() { var mylatlng = new google.maps.latlng(29.950217, -90.075517); var centerpos = new google.maps.latlng(29.952365, -90.075853); var mapoptions = { zoom : 15, center : centerpos, styles : [{"featuretype":"administrative","elementtype":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featuretype":"administrative","elementtype":"labels","stylers":[{"saturation":"-100"}]},{"featuretype":"administrative","elementtype":"labels.text","stylers":[{"gamma":"0.75"}]},{"featuretype":"administrative.neighborhood","elementtype":"labels.text.fill","stylers":[{"lightness":"-37"}]},{"featuretype":"landscape","elementtype":"geometry","stylers":[{"color":"#f9f9f9"}]},{"featuretype":"landscape.man_made","elementtype":"geometry","stylers":[{"saturation":"-100"},{"lightness":"40"},{"visibility":"off"}]},{"featuretype":"landscape.natural","elementtype":"labels.text.fill","stylers":[{"saturation":"-100"},{"lightness":"-37"}]},{"featuretype":"landscape.natural","elementtype":"labels.text.stroke","stylers":[{"saturation":"-100"},{"lightness":"100"},{"weight":"2"}]},{"featuretype":"landscape.natural","elementtype":"labels.icon","stylers":[{"saturation":"-100"}]},{"featuretype":"poi","elementtype":"geometry","stylers":[{"saturation":"-100"},{"lightness":"80"}]},{"featuretype":"poi","elementtype":"labels","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featuretype":"poi.attraction","elementtype":"geometry","stylers":[{"lightness":"-4"},{"saturation":"-100"}]},{"featuretype":"poi.park","elementtype":"geometry","stylers":[{"color":"#c5dac6"},{"visibility":"on"},{"saturation":"-95"},{"lightness":"62"}]},{"featuretype":"poi.park","elementtype":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featuretype":"road","elementtype":"all","stylers":[{"lightness":20}]},{"featuretype":"road","elementtype":"labels","stylers":[{"saturation":"-100"},{"gamma":"1.00"}]},{"featuretype":"road","elementtype":"labels.text","stylers":[{"gamma":"0.50"}]},{"featuretype":"road","elementtype":"labels.icon","stylers":[{"saturation":"-100"},{"gamma":"0.50"}]},{"featuretype":"road.highway","elementtype":"geometry","stylers":[{"color":"#c5c6c6"},{"saturation":"-100"}]},{"featuretype":"road.highway","elementtype":"geometry.stroke","stylers":[{"lightness":"-13"}]},{"featuretype":"road.highway","elementtype":"labels.icon","stylers":[{"lightness":"0"},{"gamma":"1.09"}]},{"featuretype":"road.arterial","elementtype":"geometry","stylers":[{"color":"#e4d7c6"},{"saturation":"-100"},{"lightness":"47"}]},{"featuretype":"road.arterial","elementtype":"geometry.stroke","stylers":[{"lightness":"-12"}]},{"featuretype":"road.arterial","elementtype":"labels.icon","stylers":[{"saturation":"-100"}]},{"featuretype":"road.local","elementtype":"geometry","stylers":[{"color":"#fbfaf7"},{"lightness":"77"}]},{"featuretype":"road.local","elementtype":"geometry.fill","stylers":[{"lightness":"-5"},{"saturation":"-100"}]},{"featuretype":"road.local","elementtype":"geometry.stroke","stylers":[{"saturation":"-100"},{"lightness":"-15"}]},{"featuretype":"transit.station.airport","elementtype":"geometry","stylers":[{"lightness":"47"},{"saturation":"-100"}]},{"featuretype":"water","elementtype":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]},{"featuretype":"water","elementtype":"geometry","stylers":[{"saturation":"53"}]},{"featuretype":"water","elementtype":"labels.text.fill","stylers":[{"lightness":"-42"},{"saturation":"17"}]},{"featuretype":"water","elementtype":"labels.text.stroke","stylers":[{"lightness":"61"}]}] }; var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); //content within popup var contentstring = '<div id="mapcontent">'+ '<div id="sitenotice">'+ '</div>'+ '<h1 id="firstheading" class="firstheading">blanchard systems</h1>'+ '<div id="bodycontent">'+ '<p><a href="https://maps.google.com?daddr=blanchard+systems+1100+poydras+street+new+orleans+la+70163">click here directions</a>'+ '<p><b>address:</b> 1100 poydras street, new orleans, la 70163. suite 1230.</p>'+ '</div>'+ '</div>'; //the info window var infowindow = new google.maps.infowindow({ content: contentstring }); //the marker on map var marker = new google.maps.marker({ position : mylatlng, map : map, title : 'blanchard systems' }); //when clicking marker, open info window google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map,marker); }); // resize stuff... google.maps.event.adddomlistener(window, "resize", function() { var center = map.getcenter(); google.maps.event.trigger(map, "resize"); map.setcenter(center); }); //auto open info window infowindow.open(map,marker); } google.maps.event.adddomlistener(window, 'load', initialize); // end google maps </script>
open infowindow existing click event once map idle:
//auto open info window google.maps.event.addlisteneronce(map, 'idle', function () { google.maps.event.trigger(marker, 'click'); }); code snippet:
function initialize() { var mylatlng = new google.maps.latlng(29.950217, -90.075517); var mapoptions = { zoom: 15, center: mylatlng, styles: mapstyles }; var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); //content within popup var contentstring = '<div id="mapcontent">' + '<div id="sitenotice">' + '</div>' + '<h1 id="firstheading" class="firstheading">blanchard systems</h1>' + '<div id="bodycontent">' + '<p><a href="https://maps.google.com?daddr=blanchard+systems+1100+poydras+street+new+orleans+la+70163">click here directions</a>' + '<p><b>address:</b> 1100 poydras street, new orleans, la 70163. suite 1230.</p>' + '</div>' + '</div>'; //the info window var infowindow = new google.maps.infowindow({ content: contentstring }); //the marker on map var marker = new google.maps.marker({ position: mylatlng, map: map, title: 'blanchard systems' }); //when clicking marker, open info window google.maps.event.addlistener(marker, 'click', function() { infowindow.open(map, marker); }); // resize stuff... google.maps.event.adddomlistener(window, "resize", function() { var center = map.getcenter(); google.maps.event.trigger(map, "resize"); map.setcenter(center); }); //auto open info window google.maps.event.addlisteneronce(map, 'idle', function() { google.maps.event.trigger(marker, 'click'); }); } google.maps.event.adddomlistener(window, 'load', initialize); var mapstyles = [{ "featuretype": "administrative", "elementtype": "all", "stylers": [{ "visibility": "on" }, { "lightness": 33 }] }, { "featuretype": "administrative", "elementtype": "labels", "stylers": [{ "saturation": "-100" }] }, { "featuretype": "administrative", "elementtype": "labels.text", "stylers": [{ "gamma": "0.75" }] }, { "featuretype": "administrative.neighborhood", "elementtype": "labels.text.fill", "stylers": [{ "lightness": "-37" }] }, { "featuretype": "landscape", "elementtype": "geometry", "stylers": [{ "color": "#f9f9f9" }] }, { "featuretype": "landscape.man_made", "elementtype": "geometry", "stylers": [{ "saturation": "-100" }, { "lightness": "40" }, { "visibility": "off" }] }, { "featuretype": "landscape.natural", "elementtype": "labels.text.fill", "stylers": [{ "saturation": "-100" }, { "lightness": "-37" }] }, { "featuretype": "landscape.natural", "elementtype": "labels.text.stroke", "stylers": [{ "saturation": "-100" }, { "lightness": "100" }, { "weight": "2" }] }, { "featuretype": "landscape.natural", "elementtype": "labels.icon", "stylers": [{ "saturation": "-100" }] }, { "featuretype": "poi", "elementtype": "geometry", "stylers": [{ "saturation": "-100" }, { "lightness": "80" }] }, { "featuretype": "poi", "elementtype": "labels", "stylers": [{ "saturation": "-100" }, { "lightness": "0" }] }, { "featuretype": "poi.attraction", "elementtype": "geometry", "stylers": [{ "lightness": "-4" }, { "saturation": "-100" }] }, { "featuretype": "poi.park", "elementtype": "geometry", "stylers": [{ "color": "#c5dac6" }, { "visibility": "on" }, { "saturation": "-95" }, { "lightness": "62" }] }, { "featuretype": "poi.park", "elementtype": "labels", "stylers": [{ "visibility": "on" }, { "lightness": 20 }] }, { "featuretype": "road", "elementtype": "all", "stylers": [{ "lightness": 20 }] }, { "featuretype": "road", "elementtype": "labels", "stylers": [{ "saturation": "-100" }, { "gamma": "1.00" }] }, { "featuretype": "road", "elementtype": "labels.text", "stylers": [{ "gamma": "0.50" }] }, { "featuretype": "road", "elementtype": "labels.icon", "stylers": [{ "saturation": "-100" }, { "gamma": "0.50" }] }, { "featuretype": "road.highway", "elementtype": "geometry", "stylers": [{ "color": "#c5c6c6" }, { "saturation": "-100" }] }, { "featuretype": "road.highway", "elementtype": "geometry.stroke", "stylers": [{ "lightness": "-13" }] }, { "featuretype": "road.highway", "elementtype": "labels.icon", "stylers": [{ "lightness": "0" }, { "gamma": "1.09" }] }, { "featuretype": "road.arterial", "elementtype": "geometry", "stylers": [{ "color": "#e4d7c6" }, { "saturation": "-100" }, { "lightness": "47" }] }, { "featuretype": "road.arterial", "elementtype": "geometry.stroke", "stylers": [{ "lightness": "-12" }] }, { "featuretype": "road.arterial", "elementtype": "labels.icon", "stylers": [{ "saturation": "-100" }] }, { "featuretype": "road.local", "elementtype": "geometry", "stylers": [{ "color": "#fbfaf7" }, { "lightness": "77" }] }, { "featuretype": "road.local", "elementtype": "geometry.fill", "stylers": [{ "lightness": "-5" }, { "saturation": "-100" }] }, { "featuretype": "road.local", "elementtype": "geometry.stroke", "stylers": [{ "saturation": "-100" }, { "lightness": "-15" }] }, { "featuretype": "transit.station.airport", "elementtype": "geometry", "stylers": [{ "lightness": "47" }, { "saturation": "-100" }] }, { "featuretype": "water", "elementtype": "all", "stylers": [{ "visibility": "on" }, { "color": "#acbcc9" }] }, { "featuretype": "water", "elementtype": "geometry", "stylers": [{ "saturation": "53" }] }, { "featuretype": "water", "elementtype": "labels.text.fill", "stylers": [{ "lightness": "-42" }, { "saturation": "17" }] }, { "featuretype": "water", "elementtype": "labels.text.stroke", "stylers": [{ "lightness": "61" }] }];html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas" style="border: 2px solid #3872ac;"></div>
Comments
Post a Comment