Avada Forums Community Forum Implement google maps alternative Reply To: Implement google maps alternative

Post count: 29

Hi Peter,

I’ve been experimenting with Leaflet on a couple of Avada sites and the steps below are how I integrated it. It works with no problems but if anyone spots any potential problems feel free to point them out.

Step 1
Paste the links to the Leaflet CSS and JS files into Avada > Advanced > Code Fields (tracking etc) > Space before </head> and then Save Changes:

 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

Step 2
Add some custom CSS for the <div> element that will contain your map. You add this in Avada > Custom CSS then Save Changes. Example CSS below:

#map { 
     width: 100%; 
     height: 500px; 

Step 3
Add the Leaflet code to a code block within a page. I’ve copied an example below:

 <div id="map"></div>


  // initialize the map
  var map = L.map('map').setView([53.576269, -1.785105], 12);

  // load a tile layer
      attribution: 'Tiles by <a href="https://www.mapbox.com">Mapbox</a>, Data by <a href="https://www.mapbox.com">Mapbox</a>',
      maxZoom: 17,
      minZoom: 9

// add the marker
var marker = L.marker([53.576269, -1.785105]).addTo(map);


In the first block of code (initialize the map) you need to enter the longtitude/latitude for the map.

In the second block of code (load a tile layer) you’ll need to go to mapbox.com and register to get an access token and paste it where I’ve got ADD_YOUR_ACCESS_TOKEN_HERE.

The last block of code adds the map pin. YOu can also create custom location markers and pop-ups. The code for these is on the Leaflet website. Just be sure to use absolute URLs for your custom marker images.

Hopefully this gets you started.