JAVASCRIPT   8

gmap.js

Guest on 12th September 2021 10:14:34 AM

  1.  
  2. /* --------------------------------------------
  3. Google Map
  4. -------------------------------------------- */
  5. window.onload = MapLoadScript;
  6. function GmapInit() {
  7.           Gmap = $('.map-canvas');
  8.           Gmap.each(function() {
  9.                 var $this           = $(this),
  10.                         lat             = '',
  11.                         lng             = '',
  12.                         zoom            = 12,
  13.                         scrollwheel     = false,
  14.                         zoomcontrol     = true,
  15.                         draggable       = true,
  16.                         mapType         = google.maps.MapTypeId.ROADMAP,
  17.                         title           = '',
  18.                         contentString   = '',
  19.                         theme_icon_path         = $this.data('icon-path'),
  20.                         dataLat         = $this.data('lat'),
  21.                         dataLng         = $this.data('lng'),
  22.                         dataZoom        = $this.data('zoom'),
  23.                         dataType        = $this.data('type'),
  24.                         dataScrollwheel = $this.data('scrollwheel'),
  25.                         dataZoomcontrol = $this.data('zoomcontrol'),
  26.                         dataHue         = $this.data('hue'),
  27.                         dataTitle       = $this.data('title'),
  28.                         dataContent     = $this.data('content');
  29.                        
  30.                 if( dataZoom !== undefined && dataZoom !== false ) {
  31.                         zoom = parseFloat(dataZoom);
  32.                 }
  33.                 if( dataLat !== undefined && dataLat !== false ) {
  34.                         lat = parseFloat(dataLat);
  35.                 }
  36.                 if( dataLng !== undefined && dataLng !== false ) {
  37.                         lng = parseFloat(dataLng);
  38.                 }
  39.                 if( dataScrollwheel !== undefined && dataScrollwheel !== null ) {
  40.                         scrollwheel = dataScrollwheel;
  41.                 }
  42.                 if( dataZoomcontrol !== undefined && dataZoomcontrol !== null ) {
  43.                         zoomcontrol = dataZoomcontrol;
  44.                 }
  45.                 if( dataType !== undefined && dataType !== false ) {
  46.                         if( dataType == 'satellite' ) {
  47.                                 mapType = google.maps.MapTypeId.SATELLITE;
  48.                         } else if( dataType == 'hybrid' ) {
  49.                                 mapType = google.maps.MapTypeId.HYBRID;
  50.                         } else if( dataType == 'terrain' ) {
  51.                                 mapType = google.maps.MapTypeId.TERRAIN;
  52.                         }                      
  53.                 }
  54.                 if( dataTitle !== undefined && dataTitle !== false ) {
  55.                         title = dataTitle;
  56.                 }
  57.                 if( navigator.userAgent.match(/iPad|iPhone|Android/i) ) {
  58.                         draggable = false;
  59.                 }
  60.                
  61.                 var mapOptions = {
  62.                   zoom        : zoom,
  63.                   scrollwheel : scrollwheel,
  64.                   zoomControl : zoomcontrol,
  65.                   draggable   : draggable,
  66.                   center      : new google.maps.LatLng(lat, lng),
  67.                   mapTypeId   : mapType
  68.                 };             
  69.                 var map = new google.maps.Map($this[0], mapOptions);
  70.                
  71.                 //var image = 'images/icons/map-marker.png';
  72.                 var image = theme_icon_path;
  73.                
  74.                 if( dataContent !== undefined && dataContent !== false ) {
  75.                         contentString = '<div class="map-data">' + '<h6>' + title + '</h6>' + '<div class="map-content">' + dataContent + '</div>' + '</div>';
  76.                 }
  77.                 var infowindow = new google.maps.InfoWindow({
  78.                         content: contentString
  79.                 });
  80.                
  81.                 var marker = new google.maps.Marker({
  82.                   position : new google.maps.LatLng(lat, lng),
  83.                   map      : map,
  84.                   icon     : image,
  85.                   title    : title
  86.                 });
  87.                 if( dataContent !== undefined && dataContent !== false ) {
  88.                         google.maps.event.addListener(marker, 'click', function() {
  89.                                 infowindow.open(map,marker);
  90.                         });
  91.                 }
  92.                
  93.                 if( dataHue !== undefined && dataHue !== false ) {
  94.                   var styles = [
  95.     {
  96.         "featureType": "administrative",
  97.         "elementType": "labels.text.fill",
  98.         "stylers": [
  99.             {
  100.                 "color": "#444444"
  101.             }
  102.         ]
  103.     },
  104.     {
  105.         "featureType": "landscape",
  106.         "elementType": "all",
  107.         "stylers": [
  108.             {
  109.                 "color": "#f2f2f2"
  110.             }
  111.         ]
  112.     },
  113.     {
  114.         "featureType": "poi",
  115.         "elementType": "all",
  116.         "stylers": [
  117.             {
  118.                 "visibility": "off"
  119.             }
  120.         ]
  121.     },
  122.     {
  123.         "featureType": "road",
  124.         "elementType": "all",
  125.         "stylers": [
  126.             {
  127.                 "saturation": -100
  128.             },
  129.             {
  130.                 "lightness": 45
  131.             }
  132.         ]
  133.     },
  134.     {
  135.         "featureType": "road.highway",
  136.         "elementType": "all",
  137.         "stylers": [
  138.             {
  139.                 "visibility": "simplified"
  140.             }
  141.         ]
  142.     },
  143.     {
  144.         "featureType": "road.arterial",
  145.         "elementType": "labels.icon",
  146.         "stylers": [
  147.             {
  148.                 "visibility": "off"
  149.             }
  150.         ]
  151.     },
  152.     {
  153.         "featureType": "transit",
  154.         "elementType": "all",
  155.         "stylers": [
  156.             {
  157.                 "visibility": "off"
  158.             }
  159.         ]
  160.     },
  161.     {
  162.         "featureType": "water",
  163.         "elementType": "all",
  164.         "stylers": [
  165.             {
  166.                 "color": "#f2f2f2"
  167.             },
  168.             {
  169.                 "visibility": "on"
  170.             }
  171.         ]
  172.     }
  173. ];
  174.                   map.setOptions({styles: styles});
  175.                 }
  176.          });
  177. }
  178.        
  179. function MapLoadScript() {
  180.         var script = document.createElement('script');
  181.         script.type = 'text/javascript';
  182.         GmapInit();
  183.         document.body.appendChild(script);
  184. }

Raw Paste


Login or Register to edit or fork this paste. It's free.