Avada Forums Community Forum Implement google maps alternative

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • pjukel
    Post count: 1


    is there a way to implement an alternative map like this?



    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.