Google Maps Widgets

An simple solution to use Google Maps on the Back-end and Front-end.

Back to Google Maps Widgets Support

uno
uno

In: components/apiloader/default.htm you can use {% put scripts %}:

{% if __SELF__.api_key %}

  {% put scripts %}
      <script>
        var mapsList = [];
        var tag;

        function initMaps() {
            for (j = 0; j < mapsList.length; j++) {
                mapsList[j]();
            }
        }
        $( document ).ready(function(){
                tag = document.createElement( 'script' );
                tag.type = "text/javascript";
                tag.src = "https://maps.googleapis.com/maps/api/js?key={{ __SELF__.api_key }}{{ __SELF__.libraries|raw }}&callback=initMaps";
                document.getElementsByTagName("body")[0].appendChild( tag );
            });
      </script>
  {% endput %}
  {% else %}
    <div class="alert alert-danger">
        {{ __SELF__.message }}
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    </div>
{% endif %}

In: assets/template/template.htm leave just the Html code

<div style="width: ::width; height: ::height;">
  <div id="map::alias" style="height: 100%;"></div>
</div>

Create a new file: assets/template/js.htm and put the js code from template.htm

    <script>
        var markers::alias = [];
        mapsList.push(function initialize::alias() {
              var options = ::options;
              var jsonLocations = ::jsonLocations;

              var map::alias = new google.maps.Map(document.getElementById("map::alias"), options);

              for (i = 0; i < jsonLocations.length; i++) {
                  var latLng = JSON.parse(jsonLocations[i].latlng);
                    var name = "("+latLng.lat+", "+latLng.lng+")";
                  markers::alias[name] = new google.maps.Marker({
                      position: latLng,
                      map: map::alias,
                      title: jsonLocations[i].name
                  });
                  if(jsonLocations[i].info_window)
                  {
                      markers::alias[name].infowindow =  new google.maps.InfoWindow({content: jsonLocations[i].info_window});
                      markers::alias[name].addListener('click', function(pos) {
                          for(marker in markers::alias) {
                            markers::alias[marker].infowindow.close();
                          }
                          markers::alias[pos.latLng].infowindow.open(map::alias, markers::alias[pos.latLng]);
                      });
                  }
              }
        });
    </script>

In: behaviors/Map.php you have to create a new function to get the JS code from the js.htm.

    public function getHtmlMap($alias, $markers = [])
    {
        if(!$alias)
        {
            throw new ApplicationException(Lang::get('fencus.googlemapswidgets::lang.maps.no_alias'));
        }
        $alias =  str_replace(' ', '_',$alias);
        $template = file_get_contents('plugins/fencus/googlemapswidgets/assets/template/template.htm');
        $search=[
                '::alias',
                '::width',
                '::height',
        ];
        $replace=[
                $alias,
                $this->parent->width,
                $this->parent->height,
        ];
        $html = str_replace($search, $replace, $template);
        return $html;
    }

    public function getJsMap($alias, $markers = [])
    {
        if(!$alias)
        {
            throw new ApplicationException(Lang::get('fencus.googlemapswidgets::lang.maps.no_alias'));
        }
        $alias =  str_replace(' ', '_',$alias);
        $template = file_get_contents('plugins/fencus/googlemapswidgets/assets/template/js.htm');
        $search=[
                '::alias',
                '::options',
                '::jsonLocations',
                '::width',
                '::height',
        ];
        $replace=[
                $alias,
                $this->parent->options,
                json_encode($markers),
                $this->parent->width,
                $this->parent->height,
        ];
        $js = str_replace($search, $replace, $template);
        return $js;
    }

Now in your plugin component you can use:

$html = $map->getHtmlMap($alias,$markers);

to render the map wherever you want and:

$js = $map->getJsMap($alias,$markers);

to put the js code at the end of the page.

This was my solution for a recent project. I Hope it help.

1-1 of 1