javascript - How to improve this google map js code performance -

our current page uses cdn , google map api show data. take around 7 seconds load page in total. google map take around 3 seconds load page. here snippet of code extracted.

<script src="https://maps.googleapis.com/maps/api/js"></script> <script>         function initialize() {             var mapcanvas = document.getelementbyid('map-canvas');             var myoptions = {                 zoom: 15,                 minzoom: 4,                 scrollwheel: false,                 center: new google.maps.latlng(-37.814382, 144.96974),                 maptypeid: google.maps.maptypeid.roadmap             };              map = new google.maps.map(mapcanvas, myoptions);             new google.maps.marker({                 map: map,                 position: new google.maps.latlng(-37.814382, 144.96974),                 title: "120 collins st, melbourne, vic 3000, australia"             });         }         google.maps.event.adddomlistener(window, 'load', initialize); </script>    

here screenshot of sites google map api hits.

we want improve performance. here several ways can think of right now, not sure way should proceed.

1. changing code lazily loaded.
2. use google static map api when page loaded, when user clicked it, use google map api. think approach may complicated.

may know additional alternatives improve performance of page

many in advance

if you're looking reduce total number of http requests being made or bytes transferred when loading page using static maps api idea, spend more time evaluating performance before making leap.

the waterfall see in developer tools may not correspond actual time takes users perceive map api available. behind scenes, maps api tries display map users , progressively load javascript needs make map interactive based on api calls need.

based on image you've shared above, looks significant time going doing dns lookups each hostname api loading from. run tests [1] see if there faster dns servers using.