Small example how to include Google maps into Joomla!

HTML part is simple:

<div id="map-canvas" style="width: 400px; height: 400px"></div>
<script src=""></script>

Note here that I had to add width and height, otherwise maps refuses to show. Also, note that I added Google APIs.


/*global google*/
(function (){
    "use strict";

    var mapOptions,

    mapOptions = {
        zoom: 6,
        center: { lat: -34.397, lng: 150.644},
        mapTypeId: google.maps.MapTypeId.ROADMAP

    mapCanvas = document.getElementById('map-canvas');

    if (!map) {
        map = new google.maps.Map(mapCanvas, mapOptions);

Live example: