Template:XsysLocator >
Template:XsysLocator

Indice (TOC)

Nessuna testata
/* ------ parametri accettati dallo script ------ */
/*
    gmapopt ($0) - parametri mappa: - zoom -> livelo di zoom
                                    - lat -> latitudine del centro mappa
                                    - lng -> longitudine del centro mappa
                                    - mapType -> tipo di mappa (SATELLITE, ROADMAP, ...)
                                    - mapStyle -> stile mappa (l'array dello stile)
                                    - markerImg -> l'immagine del marker
                                    - width -> la larghezza della mappa
                                    - height -> l'altezza della mappa
    idlat ($1) - l'id dell'input latitudine
    idlng ($2) - l'id dell'input longitudine
    address ($3) - l'indirizzo del centro mappa
*/

var gmapopt = $gmapopt ?? $0 ?? {};
var idlat = $idlat ?? $1 ?? "latitude";
var idlng = $idlng ?? $2 ?? "longitude";
var address = $address ?? $3 ?? "torino";
var zoom = gmapopt.zoom ?? "8";
var lat = gmapopt.lat ?? "45.07056";
var lng = gmapopt.lng ?? "7.68662";
var mapType = gmapopt.mapType ?? "none";
var mapStyle = gmapopt.mapStyle ?? "[
    {
        featureType: 'administrative.country',
        elementType: 'all',
        stylers: [
            {visibility: 'off' }
        ]
    },{
        featureType: 'poi',
        elementType: 'all',
        stylers: [
            { visibility: 'off' }
        ]
    },{
        featureType: 'road.highway',
        elementType: 'all',
        stylers: [
            { visibility: 'off' }
        ]
    },{
        featureType: 'administrative.neighbourhood',
        elementType: 'all',
        stylers: [
            { visibility: 'simplified' }
        ]
    },{
        featureType: 'poi',
        elementType: 'all',
        stylers: [
        ]
    },{
        featureType: 'road.arterial',
        elementType: 'all',
        stylers: [
            { saturation: 86 },
            { lightness: 91 }
        ]
    },{
        featureType: 'road.highway',
        elementType: 'all',
        stylers: [
            { visibility: 'off' }
        ]
    },{
        featureType: 'poi',
        elementType: 'all',
        stylers: [
            { lightness: 41 }
        ]
    },{
        featureType: 'all',
        elementType: 'all',
        stylers: []
    },{
        featureType: 'transit.station.rail',
        elementType: 'all',
        stylers: [ { visibility: 'off' } ]
    },{ featureType: 'transit.station',
        elementType: 'all',
        stylers: [ { visibility: 'off' } ]
    },{
        featureType: 'road.local',
        elementType: 'all',
        stylers: [ { visibility: 'on' } ]
    },{
        featureType: 'administrative.locality',
        elementType: 'all',
        stylers: [ { visibility: 'on' } ] }
    ]";

var markerImg = gmapopt.markerImg ?? "";   /*"http://www.primolevi.it/@api/deki/files/737/=cerchio_mappa.png";*/
var width = gmapopt.width ?? "186px";
var height = gmapopt.height ?? "180px";


<html>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">"
    var map;
    var geocoder;
    var image = '"..markerImg.."';
    var marker = new google.maps.Marker({
        icon: image,
        draggable: true
    });
   function initialize() {
        var lat = document.getElementById('"..idlat.."').value;
        var lng = document.getElementById('"..idlng.."').value;
        if(lat.length == 0 || lng.length == 0){
        lat = eval('"..json.emit(lat+0).."');
        lng = eval('"..json.emit(lng+0).."');
    }
    document.getElementById('"..idlat.."').value = lat;
    document.getElementById('"..idlng.."').value = lng;
    document.getElementById('gmapLatLng').innerHTML = 'latitude: '+lat+', longitude: '+lng;
    var center = new google.maps.LatLng(lat, lng);
    marker.setPosition(center);
    var map_zoom = eval('"..json.emit(zoom+0).."');
    geocoder = new google.maps.Geocoder();
    var stylez = newStyle();
    var myOptions = {
        zoom: map_zoom,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
    };
    map = new google.maps.Map(document.getElementById('mappa_primoLevi'), myOptions);
    marker.setMap(map);
    if('"..mapType.."' == 'none'){
      var styledMapOptions = {
        map: map,
        name: 'mappa_primoLevi'
      }
      var jayzMapType = new google.maps.StyledMapType(stylez,styledMapOptions);
      map.mapTypes.set('mappa_primoLevi', jayzMapType);
      map.setMapTypeId('mappa_primoLevi');
    } else { map.setMapTypeId(google.maps.MapTypeId."..mapType.."); }
    google.maps.event.addDomListener(window, 'load', initialize);
    if(lat.length == 0 || lng.length == 0) trovaIndirizzo();
    google.maps.event.addListener(marker, 'dragend', function() {
        var position = marker.getPosition();
        map.panTo(position);
        document.getElementById('"..idlat.."').value = position.lat();
        document.getElementById('"..idlng.."').value = position.lng();
        document.getElementById('gmapLatLng').innerHTML = 'latitude: '+position.lat().toFixed(5)+', longitude: '+position.lng().toFixed(5);
    });
    google.maps.event.addListener(map, 'dragend', function() {
        marker.setMap(null);
        var center = map.getCenter();
        marker = new google.maps.Marker({position: center, draggable: true, icon: image});
        marker.setMap(map);
        google.maps.event.addListener(marker, 'dragend', function() {
            var position = marker.getPosition();
            map.panTo(position);
            document.getElementById('"..idlat.."').value = position.lat();
            document.getElementById('"..idlng.."').value = position.lng();
            document.getElementById('gmapLatLng').innerHTML = 'latitude: '+position.lat().toFixed(5)+', longitude: '+position.lng().toFixed(5);
        });
        var position = marker.getPosition();
        document.getElementById('"..idlat.."').value = position.lat();
        document.getElementById('"..idlng.."').value = position.lng();
              document.getElementById('gmapLatLng').innerHTML = 'latitude: '+position.lat().toFixed(5)+', longitude: '+position.lng().toFixed(5);
         });
    }
/* -------------- trova indirizzo ---------------*/
function trovaIndirizzo(){
  var address = document.getElementById('gmapAddressInput').value;  
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == 'OK') {
        marker.setMap(null);
        map.setCenter(results[0].geometry.location);
        marker = new google.maps.Marker({ map: map, position: results[0].geometry.location, draggable: true, icon: image });
        marker.setMap(map);
        var position = marker.getPosition();
        document.getElementById('"..idlat.."').value = position.lat();
        document.getElementById('"..idlng.."').value = position.lng();
        document.getElementById('gmapLatLng').innerHTML = 'latitude: '+position.lat().toFixed(5)+', longitude: '+position.lng().toFixed(5);
    } else {
        alert(indirizzo + ' not found');
    }
  });
}
/* -------------- STILE MAPPA ---------------- */
function newStyle(){
    var stile = eval("..json.emit(mapStyle)..");
    return stile;
}
"</script>
</head>
</html>
var style = "width:"..width.."; height:"..height;
<div id="mappa_primoLevi" style=(style)></div>
<span id="gmapLatLng"></span>
<input id="gmapAddressInput" type="text" onKeyPress="if (event.keyCode == 13) { trovaIndirizzo(); }"/>
<input id="gmapAddressSearch" type="button" value="Cerca" onclick="trovaIndirizzo()"/>

<script type="text/javascript">" window.onload = function(){ initialize();} "</script>