оптимальный способ загрузки карт Google на сайте

Question

Я использую Google Maps v3 и хочу, чтобы он загружался быстрее.

Мои настройки:

В конце файла .js

google.maps.event.addDomListener(window, 'load', initialize);

Ив конце кода HTML-страницы:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Как сделать так, чтобы карта быстрее появлялась на экране?

Answer 1

Вам не нужно включать оба этих сценария:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

, особенно если вы используете только Карты Google.Если вы используете более одного из этих API Google (или * библиотек JavaScript ), включите только http://www.google.com/jsapi.В противном случае, если вы используете только Карты Google, укажите только http://maps.google.com/maps/api/js?sensor=false.Это сохранит один запрос.

Вы не можете на самом деле ускорить загрузку карт, но один из приемов, которые вы можете сделать, - это сначала загрузить статическую карту с помощью API статических карт Google Map поэтому он будет загружаться быстрее.

Другая хитрость заключается в том, чтобы загружать карты только тогда, когда этого требует пользователь.Однако, не зная, каковы требования вашего сайта, трудно сказать.С загрузчиком библиотек Google вы можете сделать

google.load("maps", "3", {other_params:'sensor=false', callback: function(){
  var map; // initialize your map in here
});

или, если вы не используете загрузчик библиотек, вы можете сделать this .

Answer 2

Вы можете добавить EventListener для кнопки и динамически создавать и заполнять новый iframe с картой в качестве контента?Таким образом, карта не будет загружена, пока не будет нажата кнопка.

var map = YOUR GOOGLE MAPS MINIMAP SRC;
$('#button').bind('click', function() {
    if($('#iframe').size == 0) {
        $('#iframe').load(map, function() {
            $('#button').unbind('click');
        });
    }
});

Конечно, вам придется стилизовать iframe и расположить его правильно, это всего лишь идея.