Create 100% Joomla articles with simple forms and no HTML knowledge!

Form2Content Extension

Form2Content KML Feeds

Display & navigate Joomla articles with Google Maps

Have you wanted to display your Joomla articles, stories or blog on a map? Using our KML Feeds extension you can generate the data that can be read by Google Maps.
As shown in the example, each icon represents one Joomla article. When you click on the "read more" the link will take you to the Joomla article page.

Features & documentation

  • Valid KML 2.2 feed generation
  • Custom map icons
  • Add any of your article data into your placemarker
  • Simple smarty templating for placemarker window (popup/description)
  • KML Feed header & footer control for advanced settings
  • Option for full KML placemarker templating (i.e. entire xml structure)

About KML Feeds & Google Maps

The Form2Content KML Feeds extensions can generate a so called KML Feed based on Joomla article data submitted using Form2Content.

In turn, the KML Feed can be used to display placemarkers on Google Maps. It is important to note that Google requires an active account on Google Cloud Platform where you need to activate the required API's.

Displaying Google Maps in Joomla

Form2Content ONLY generates the KML Feed!
A third-party Joomla extension that can load a KML feed or some relatively simple coding is required to display the Google Map within your Joomla website. An example is shown on the right.

The F2C KML Feed is dynamic so any new articles added via Form2Content will show automatically on the map. For large feeds we provide a cacheable URL and a CRON URL for refresh.

Example: My favourite places on Google Maps

Google maps javascript used

The inline html used to generate the above map comes directly from the Google Maps documentation. Adding two DIV tags, the KML Feed URL and the script with your API key is all that is required.


      var map;
      var src = 'https://demo.form2content.com/index.php?option=com_form2contentkmlfeeds&task=kmlfeed.display&view=kmlfeed&format=raw&id=1';

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        kmlLayer.addListener('click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
© Copyright Open Source Design
All rights reserved
By Open Source Design