Advertisement
nicolaslagios

custom Gmap, snazzy, pin, popup

Jun 5th, 2024
502
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.36 KB | Source Code | 0 0
  1. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=KEY HERE"></script>
  2. <style>
  3.     #map {
  4.         height: 400px;
  5.         width: 100%;
  6.     }
  7. </style>
  8. <div id="map"></div>
  9.  
  10. <script>
  11.     google.maps.event.addDomListener(window, 'load', init);
  12.  
  13.     function init() {
  14.         var areaName = 'JUST THE NAME OF THE AREA HERE';
  15.  
  16.         getCoordinates(areaName, function(coordinates) {
  17.             var mapOptions = {
  18.                 zoom: 18,
  19.                 center: coordinates,
  20.                 styles: [
  21.                     {
  22.                         "featureType": "administrative",
  23.                         "elementType": "labels.text.fill",
  24.                         "stylers": [
  25.                             {
  26.                                 "color": "#444444"
  27.                             }
  28.                         ]
  29.                     },
  30.                     {
  31.                         "featureType": "landscape",
  32.                         "elementType": "all",
  33.                         "stylers": [
  34.                             {
  35.                                 "color": "#f2f2f2"
  36.                             }
  37.                         ]
  38.                     },
  39.                     {
  40.                         "featureType": "landscape",
  41.                         "elementType": "geometry.fill",
  42.                         "stylers": [
  43.                             {
  44.                                 "color": "#f0f0f0"
  45.                             }
  46.                         ]
  47.                     },
  48.                     {
  49.                         "featureType": "poi",
  50.                         "elementType": "all",
  51.                         "stylers": [
  52.                             {
  53.                                 "visibility": "off"
  54.                             }
  55.                         ]
  56.                     },
  57.                     {
  58.                         "featureType": "road",
  59.                         "elementType": "all",
  60.                         "stylers": [
  61.                             {
  62.                                 "saturation": -100
  63.                             },
  64.                             {
  65.                                 "lightness": 45
  66.                             }
  67.                         ]
  68.                     },
  69.                     {
  70.                         "featureType": "road.highway",
  71.                         "elementType": "all",
  72.                         "stylers": [
  73.                             {
  74.                                 "visibility": "simplified"
  75.                             }
  76.                         ]
  77.                     },
  78.                     {
  79.                         "featureType": "road.arterial",
  80.                         "elementType": "labels.icon",
  81.                         "stylers": [
  82.                             {
  83.                                 "visibility": "off"
  84.                             }
  85.                         ]
  86.                     },
  87.                     {
  88.                         "featureType": "transit",
  89.                         "elementType": "all",
  90.                         "stylers": [
  91.                             {
  92.                                 "visibility": "off"
  93.                             }
  94.                         ]
  95.                     },
  96.                     {
  97.                         "featureType": "water",
  98.                         "elementType": "all",
  99.                         "stylers": [
  100.                             {
  101.                                 "color": "#9d9d9e"
  102.                             },
  103.                             {
  104.                                 "visibility": "on"
  105.                             }
  106.                         ]
  107.                     }
  108.                 ],
  109.                 disableDefaultUI: true // Disable all default UI
  110.             };
  111.             var mapElement = document.getElementById('map');
  112.             var map = new google.maps.Map(mapElement, mapOptions);
  113.  
  114.             // SVG marker icon
  115.             var svgMarker = {
  116.                 path: "M19.4996 0C8.72871 0 0 8.869 0 19.8022C0 20.3677 0.0314066 20.9191 0.0743033 21.4737C0.0926876 21.6697 0.117199 21.875 0.140179 22.0663C0.17465 22.4 0.217547 22.7282 0.2727 23.0541C0.31483 23.3147 0.354663 23.5706 0.408284 23.8241C0.442755 23.9991 0.48795 24.1741 0.524718 24.3491C2.29804 32.1844 8.30281 38.4689 12.9311 49.2279C14.3145 52.4471 15.5232 55.8973 16.5122 59.0497L19.4996 70L22.4871 59.0481C23.4775 55.8966 24.6848 52.4456 26.0682 49.2263C30.6964 38.4673 36.7035 32.1829 38.4684 24.3476C38.5144 24.1726 38.5481 23.9976 38.5848 23.8226C38.6354 23.5698 38.6806 23.3139 38.7227 23.0526C38.7725 22.7267 38.8246 22.3984 38.8591 22.0648C38.8828 21.8734 38.9066 21.6689 38.9219 21.4721C38.9701 20.9176 39 20.3661 39 19.8007C38.9992 8.869 30.2705 0 19.4996 0ZM19.4966 28.7513C14.6324 28.7513 10.6851 24.7411 10.6851 19.7991C10.6851 14.8571 14.6324 10.8523 19.4966 10.8523C24.3661 10.8523 28.3134 14.8571 28.3134 19.7991C28.3134 24.7411 24.3669 28.7513 19.4966 28.7513Z",
  117.                 fillColor: "#C71781",
  118.                 fillOpacity: 1,
  119.                 strokeWeight: 0,
  120.                 scale: 0.9,
  121.                 anchor: new google.maps.Point(19.5, 70) // anchor at the base of the marker
  122.             };
  123.  
  124.             var marker = new google.maps.Marker({
  125.                 position: coordinates,
  126.                 map: map,
  127.                 title: areaName,
  128.                 icon: svgMarker
  129.             });
  130.  
  131.             var infoWindow = new google.maps.InfoWindow({
  132.     content: '<div>' +
  133.              '<img src="IMAGE HERE" style="width:100px;height:auto;float:left;margin-right:10px;">' +
  134.              '<strong>' + areaName + '</strong><br>' +
  135.              'Address: ADDRESS HERE<br>' +
  136.              '<a href="DIRECTIONS LINK HERE" target="_blank">Get Directions</a>' +
  137.              '</div>'
  138. });
  139.  
  140.  
  141.             marker.addListener('click', function() {
  142.                 infoWindow.open(map, marker);
  143.             });
  144.         });
  145.     }
  146.  
  147.     function getCoordinates(address, callback) {
  148.         var geocoder = new google.maps.Geocoder();
  149.         geocoder.geocode({ 'address': address }, function(results, status) {
  150.             if (status === 'OK') {
  151.                 var coordinates = results[0].geometry.location;
  152.                 callback(coordinates);
  153.             } else {
  154.                 alert('Geocode was not successful for the following reason: ' + status);
  155.             }
  156.         });
  157.     }
  158. </script>
  159.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement