2
\$\begingroup\$

It's taking almost 2 minutes to load all the pins on this Google Maps API. Every time the page is loaded it sends a request for each location one by one. Can it do this all at the same time or preload the map beforehand? How can I make this load faster?

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['map'],
      // Note: you will need to get a mapsApiKey for your project.
      // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
      'mapsApiKey': 'some api key'
    });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap () {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');
      data.addColumn('string', 'Marker')

      data.addRows([
        ['New York City NY, United States', 'New York',   'blue' ],
        ['Boston MA, United States',      'Boston',   'blue'],
        ['College Park MD, United States',    'College Park', 'blue' ],
        ['Washington DC, United States',    'Washington DC', 'green' ],
        ['Newark DE, United States',    'Newark', 'blue' ],
        ['St.Petersburg, Russia',    'St. Petersburg', 'blue' ],
        ['Moscow, Russia',    'Moscow', 'green' ],
        ['Philadelphia PA, United States',  'Philly',     'green'],
        ['Wilmington DE, United States',  'Wilmington',     'green'],
        ['Assateague Island MD, United States',    'Assateague Island', 'green'],
        ['Quebec, Canada',       'Quebec',    'blue' ],
        ['Montreal, Canada',       'Quebec',    'blue' ],
        ['Nome AL, United States',    'Nome', 'green'],
        ['Baltimore MD, United States',     'Baltimore',  'green' ],
        ['Miami FL, United States',        'Miami',     'green' ],
        ['Orlando FL, United States',        'Orlando',     'green' ],
        ['San Diego CA, United States',     'San Diego',  'green'], 
        ['Key West FL, United States',     'Key West',  'green'], 
        ['Dallas TX, United States',     'Dallas',  'green'], 
        ['Victoria, Canada',     'Victoria',  'green'], 
        ['Seattle WA, United States',     'Seattle',  'green'], 
        ['Cairo, Cairo Governorate, Egypt', 'Cairo', 'green'], 
        ['Luxor, Cairo Governorate, Egypt', 'Luxor', 'green'], 
        ['Quito, Ecuador', 'Quito', 'green'],
        ['Otavalo, Ecuador', 'Otavalo', 'green'],
        ['Papallacta, Ecuador', 'Papallacta', 'green'],
        ['Punta Ahuano, Ecuador', 'Punta Ahuano', 'green'],
        ['Banos, Ecuador', 'Banos', 'green'],
        ['San Juan Del Sur, Nicaragua', 'San Juan Del Sur', 'green'],
        ['Ometepe, Nicaragua', 'Ometepe', 'green'],
        ['Leon, Nicaragua', 'Leon', 'green'],
        ['Ometepe, Nicaragua', 'Ometepe', 'green'],
        ['Bangkok, Thailand', 'Bangkok', 'green'],
        ['Chiang Mai, Thailand', 'Chiang Mai', 'green'],
        ['Pai, Thailand', 'Pai', 'green'],
        ['Koh Tao, Thailand', 'Koh Tao', 'green'],
        ['Istanbul, Turkey', 'Istanbul', 'green'],
        ['Antalya, Turkey', 'Antalya', 'green'],
        ['Ankara, Turkey', 'Ankara', 'green'],
        ['Canakkale, Turkey', 'Canakkale', 'green'],
        ['Izmir, Turkey', 'Izmir', 'green'],
        ['Cappadocia, Turkey', 'Cappadocia', 'green'],
        ['Dubai, UAE', 'Dubai', 'green'],
        ['Abu Dabi, UAE', 'Abu Dabi', 'green'],
        ['Lisbon, Portugal', 'Lisbon', 'green'],
        ['Lagos, Portugal', 'Lagos', 'green'],
        ['Rome, Italy', 'Rome', 'green'],
        ['Venice, Italy', 'Venice', 'green'],
        ['Naples, Italy', 'Naples', 'green'],
        ['Pompeii, Italy', 'Pompeii', 'green'],
        ['Vienna, Austria', 'Vienna', 'green'],
        ['Prague, Czechia', 'Prague', 'green'],
        ['Budapest, Hungary', 'Budapest', 'green'],
        ['Jerusalem, Israel', 'Jerusalem', 'green'],
        ['Tel Aviv, Israel', 'Tel Aviv', 'green'],
        ['Rabat, Morocco', 'Rabat', 'green'],
        ['Casablanca, Morocco', 'Casablanca', 'green'],
        ['Fes, Morocco', 'Fes', 'green'],
        ['Marrakesh, Morocco', 'Marrakesh', 'green'],
        ['Honolulu HI, United States', 'Honolulu', 'green'],
        ['Maui HI, United States', 'Maui', 'green'],
        ['Oahu HI, United States', 'Oahu', 'green'],
        ['Dominican Republic', 'Dominican Republic', 'green'],
        ['Puerto Rico, United States', 'Puerto Rico', 'green'],
        ['Las Vegas NV, United States', 'Las Vegas', 'green'],
        ['Desert Island ME, United States', 'Desert Island', 'green'],
        ['Portland ME, United States', 'Portland', 'green'],
        ['Burlington VT, United States', 'Burlington', 'green'],
        ['New Mexico 597, Teec Nos Pos, AZ, United States', 'Four Corners Monument', 'green'],
        ['Bryce Canyon National Park Utah, United States', 'Bryce Canyon National Park', 'green'],
        ['Bermuda Triangle', 'Bermuda Triangle', 'green'],
      ]);
      var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

      var options = {
        zoomLevel: 2,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        icons: {
          blue: {
            normal:   url + 'Map-Marker-Ball-Azure-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
          },
          green: {
            normal:   url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
            selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
          },
          pink: {
            normal:   url + 'Map-Marker-Ball-Pink-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
          }
        }
      };
      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="map_div"></div>
</body>
\$\endgroup\$
3
\$\begingroup\$

This is taking so long because Google is geocoding each of your locations one by one. Geocoding takes a lot of time as the world is a very big place and you have a lot of locations.

You can save some load time by geocoding in advance and passing in the latitude and the longitude in place of the location name. So for example, instead of

['New York City NY, United States', 'New York',   'blue' ],

You could provide the coordinates for NY...

[40.730610, -73.935242, 'New York',   'blue' ],

This should give you that boost you need.

Alternatively, instead of using charts, standard Google Maps might be faster, or even static maps, which is focused on being fast.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.