Reply To: Implement google maps alternative

[pigsandbees]

#487662

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>

  <script>

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

  // load a tile layer
  L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=ADD_YOUR_ACCESS_TOKEN_HERE',
    {
      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
    }).addTo(map);

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

  </script>

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.