← Back to Google Maps Widgets Support
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">×</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