Google maps marker

Design help General
1

Hello there.

Here is another question about Google maps. I did what @cyberdave wrote earlier on how to insert a Snazzy maps into the website. I copy pasted this text below into the custom section of site settings.

However I am now trying to insert a Map marker to the specific address/coordinates that I entered. But unfortunately I can’t get it to work. How do I do this?

My website preview: https://preview.webflow.com/preview/7wise?preview=5ed2a99a844fe9da35c1966a871d70ac

And code put into the custom Before body window. → 

    <script type="text/javascript">
    // When the window has finished loading create our google map below
    google.maps.event.addDomListener(window, 'load', init);
    function init() {
        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: 15,
          
            // The latitude and longitude to center the map (always required)
            center: new google.maps.LatLng(59.3346666, 18.0595194), // New York

            // How you would like to style the map. 
            // This is where you would paste any style found on Snazzy Maps.
            styles: [{"elementType": "geometry","stylers": [{"hue": "e35928"},{"saturation": -88},{"lightness": -4},{"gamma": 0.72}]},{"featureType": "road","elementType": "labels.icon"},{"featureType": "landscape.man_made","elementType": "geometry","stylers": [{"hue": "#0077ff"},{"gamma": 3.1}]},{"featureType": "water","stylers": [{"hue": "#00ccff"},{"gamma": 0.44},{"saturation": -33}]},{"featureType": "poi.park","stylers": [{"hue": "#44ff00"},{"saturation": -23}]},{"featureType": "water","elementType": "labels.text.fill","stylers": [{"hue": "#007fff"},{"gamma": 0.77},{"saturation": 65},{"lightness": 99}]},{"featureType": "water","elementType": "labels.text.stroke","stylers": [{"gamma": 0.11},{"weight": 5.6},{"saturation": 99},{"hue": "#0091ff"},{"lightness": -86}]},{"featureType": "transit.line","elementType": "geometry","stylers": [{"lightness": -48},{"hue": "#ff5e00"},{"gamma": 1.2},{"saturation": -23}]},{"featureType": "transit","elementType": "labels.text.stroke","stylers": [{"saturation": -64},{"hue": "#ff9100"},{"lightness": 16},{"gamma": 0.47},{"weight": 2.7}]}]            };

        // Get the HTML DOM element that will contain your map 
        // We are using a div with id="map" seen below in the <body>
        var mapElement = document.getElementById('map');

        // Create the Google Map using out element and options defined above
        var map = new google.maps.Map(mapElement, mapOptions);


</script>

Thank you!

Here is my public share link: LINK
(how to access public share link)

2

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.