Карта google на modx

Часто приходится ставить карту Google на Modx.

Чтобы поставить и настроить необходимые модули, я обычно ставлю

  • googleMap
  • GoogleMapsTV
  • Google Maps TV
  • MarkerGoogleMaps
После установки всех этих плагинов, создаем чанк с названием, например mapsChanck с таким содержимым:

<script>

function initMap() {

  var map = new google.maps.Map(document.getElementById('iyamap'), {

    zoom: 17,

    center: {lat: [[+latitude]], lng: [[+longitude]]}

  });


  var marker = new google.maps.Marker({

    map: map,

    place: {

      location: {lat: [[+latitude]], lng: [[+longitude]]},

      query: 'Google, Sydney, Australia'


    },

    // Attributions help users find your site again.

    attribution: {

      source: ''

    }

  });


  // Construct a new InfoWindow.

  var infoWindow = new google.maps.InfoWindow({

    content: '<h2>Наш офис</h2><p>[[+city]], [[+street]] [[+housenumber]]</p>'

  });


  // Opens the InfoWindow when marker is clicked.

  marker.addListener('click', function() {

    infoWindow.open(map, marker);

  });

}

</script>

    <script async defer

        src="https://maps.googleapis.com/maps/api/js?key=YUOR_KEYS&signed_in=true&libraries=places&callback=initMap"></script>

И созданный чанк вставляем в шаблон, где должна вывестись карта

[[*maps:JSONtoChunk=`ChunkName`]]

Если нужно добавить свой маркер на карту, то после map добавьте адрес иконки

 map: map,

    icon: '/assets/image/icon-map.png',


Комментарии к статье
Защита от роботов

js, google