Google Maps APIv3 very slow and large

I'm creating a website for a local business and have added a Google Map to the page using the API v3. I've been working on reducing the page size and load time and have noticed that Google Maps is by the biggest and slowest thing on the page. I'm still running it locally and don't have anywhere to host it currently, so all my related code is below.

Without Maps (Emulation for HDPI screen):

- Server Requests: 14 - Data Transferred: 1.5mb - Load Time: 1.19s

With Maps (Emulation for HDPI screen):

- Server Requests: 82 - Data Transferred: 2.6mb - Load Time: 8.08s

I am using the Google Maps API v3 to create the map.

<div id="map-canvas"></div>

With the script:

function initialize() { var myLatLng = new google.maps.LatLng(-43.537061, 172.632426); var mapOptions = { center: myLatLng, zoom: 15 }; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Auto City Services' }); } function loadScript() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = '' + '&signed_in=true&callback=initialize'; document.body.appendChild(script); } window.onload = loadScript;

Is there something I am doing wrong or could do better in order to increase the speed of this process? I would very much like to make the load time and size much faster. I think I've got it set up to be asynchronous so that the rest of the page will display and the user won't wait up to 10s for the page to show, but it's still pretty terrible.


Category:javascript Views:9 Time:2018-09-14

Related post

Copyright (C), All Rights Reserved.

processed in 0.191 (s). 11 q(s)