Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

JannickB

Member
  • Content Count

    6
  • Joined

  • Last visited

  1. Hi guys Im trying to change the design of my embedded google map with multiple pins but cant seem to get it to work. I have successfully created the map at the site (https://www.andrental.dk/map), however I would like to change the design of the map. I have created a custom style which is quite similar to the greyscale option in Squarespace. I just cant seem to combine the map and the style. All help is appreciated 🙂 I have provided the HTML for the style below. <!DOCTYPE html> <html> <head> <title>Styled Maps - Silver Mode</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 40.674, lng: -73.945}, zoom: 12, styles: [ { "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#f5f5f5" } ] }, { "featureType": "administrative.land_parcel", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#bdbdbd" } ] }, { "featureType": "administrative.neighborhood", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#dadada" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#c9c9c9" } ] }, { "featureType": "water", "elementType": "labels.text", "stylers": [ { "visibility": "off" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] } ] }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=MY-API&callback=initMap" async defer></script> </body> </html>
  2. It works perfectly!!! Great solution and thanks about the heads-up with explorer and the polyfills 😄
  3. Hi Colin Thank you for your answer. The code creates the effect to a large extend, however the opacity needed (on the images) for the background to shine though makes the images somewhat less attractive and I would really like for them to look their best 🙂 Is it possible to make the background gradient as an overlay or something to get around the need for opacity on the image?
  4. Sure. Im still in the process of building it though, but the home page i pretty much as I intend it without the gradient for now 🙂 Link: violet-gar-ajzh.squarespace.com
  5. I have tried a similar solution but cant seem to get the image background to apply to the individual pictures, only on the entire grit and it not pretty as the padding have the background gradient as well. Do you perhaps have a code I can try out as a model ?
  6. Hi everybody Im using the Hunter template and trying to create a linear gradient over my gallery grid images with a hover effect as well. I can seem to get the hover effect to work, although only to some extend, but have had no luck creating the correct code for the permanent gradient. Im going for the same gradient effect as on this website https://plusdevelopmentgroup.com/ My code looks like this at the moment: img.thumb-image.loaded:before { content: ''; display: block; position: absolute; height: 85%; width: 100%; bottom: 0; transition: height 0.5s ease-out; background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0, 0.7) 100%); transition: background 1s linear; transition: linear-gradient 0.5s ease-out; opacity: 0.5; } img.thumb-image.loaded:hover:before { height: 100%; opacity: 0.5; transition: opacity 0.5s ease-out; }
×
×
  • Create New...