Карты Google размещают всплывающее окно и размер

Question

Я полный новичок, когда дело доходит до API Карт Google. Надеюсь, кто-то может помочь с быстрым вопросом.

Ниже мой код, во-первых, как я могу контролировать размер карты, а также как это сделать, когда маркер щелкнул всплывающее окно с указанием адреса?

<script> 
      $(document).ready(function() { 
       $('.google-maps').gmap3({ 
        map:{ 
         address: "PL1 3LF", 
         options:{ 
          zoom: 10, 
          mapTypeId: google.maps.MapTypeId.ROADMAP, 
          mapTypeControl: false, 
          mapTypeControlOptions: { 
           style: google.maps.MapTypeControlStyle.DEFAULT 
          }, 
          navigationControl: true, 
          scrollwheel: false, 
          streetViewControl: false 
         } 
        }, 
        marker:{ 
    values:[ 
     {address:"PL21 0SZ"}, 
     {address:"PL1 3LF"} 
    ] 
} 
       }); 
      }); 
     </script> 

Answer 1

Размер карты контролируется путем установки размера содержащего элемент. См. your plugins docs

Для всплывающих окон: возьмите второй фрагмент кода с http://gmap3.net/en/catalog/10-overlays/marker-41 и попробуйте вместо этого изменить событие «mouseover» на событие click. Также отредактируйте строки:

infowindow.setContent(context.data) 

подходит для ваших нужд, например, вы можете использовать context.address вместо данных.

Answer 2

попробуйте Google Maps вместо g3maps .. Google Maps API. Полное решение для геопозиционирования, маркеров, анимации, пути и т. Д.

Answer 3

Оформить заказ simple map builder. Если все, что вы хотите сделать, это добавить пользовательские маркеры со всплывающими окнами, это должно сделать трюк. Вам не нужно использовать API, если вы не хотите делать что-то более сложное.

Answer 4

Управление размером карты довольно просто. Вы помещаете карту в .Google-карты так просто изменить размер этого:

.google-maps { 
    width: 500px; 
    height: 300px; 
} 

И всплывающее окно может быть сделано с помощью событий на маркер:

marker: { 
    values: [{ 
     latLng: [48.8620722, 2.352047], 
     data: "Paris !" 
    }, { 
     address: "86000 Poitiers, France", 
     data: "Poitiers : great city !" 
    }], 
    options: { 
     draggable: false 
    }, 
    events: { 
     click: function(marker, event, context) { 
      var map = $(this).gmap3("get"), 
       infowindow = $(this).gmap3({ 
        get: { 
         name: "infowindow" 
        } 
       }); 
      if (infowindow) { 
       infowindow.open(map, marker); 
       infowindow.setContent(context.data); 
      } else { 
       $(this).gmap3({ 
        infowindow: { 
         anchor: marker, 
         options: { 
          content: context.data 
         } 
        } 
       }); 
      } 
     } 
    } 
}