Streaming live at 10am (PST)

Need help with google maps marker?


#1

Hello,

I am trying to add a marker to a custom google map.

I found this tutorial, and added this in the custom Code setting Page:

`

    <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           
        
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: 11,

            // The latitude and longitude to center the map (always required)
            center: new google.maps.LatLng(47.652590, 9.350496), // New York




            // How you would like to style the map. 
            // This is where you would paste any style found on Snazzy Maps.
            styles: [
{
    "featureType": "administrative.country",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "administrative.province",
    "elementType": "all",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "landscape",
    "elementType": "all",
    "stylers": [
        {
            "saturation": -100
        },
        {
            "lightness": 65
        },
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "all",
    "stylers": [
        {
            "saturation": -100
        },
        {
            "lightness": 51
        },
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "poi.park",
    "elementType": "all",
    "stylers": [
        {
            "color": "#dfdfdf"
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "all",
    "stylers": [
        {
            "saturation": -100
        },
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "color": "#f26522"
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "all",
    "stylers": [
        {
            "saturation": -100
        },
        {
            "lightness": 30
        },
        {
            "visibility": "simplified"
        },
        {
            "color": "#f26522"
        }
    ]
},
{
    "featureType": "road.local",
    "elementType": "all",
    "stylers": [
        {
            "saturation": -100
        },
        {
            "lightness": 40
        },
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "road.local",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "color": "#f26522"
        },
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "road.local",
    "elementType": "geometry.stroke",
    "stylers": [
        {
            "color": "#f26522"
        }
    ]
},
{
    "featureType": "transit",
    "elementType": "all",
    "stylers": [
        {
            "saturation": -100
        },
        {
            "visibility": "simplified"
        }
    ]
},
{
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
        {
            "lightness": -25
        },
        {
            "saturation": -97
        },
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "water",
    "elementType": "labels",
    "stylers": [
        {
            "visibility": "on"
        },
        {
            "lightness": -25
        },
        {
            "saturation": -100
        }
    ]
}



        };

        // 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>`

That worked fine.

Now I want to add a marker and found this here on the google documentation:

`function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}`

But when I add the var marker to the custom Code setting Page, the map will no longer load.

Can somebody tell me where I have to insert the marker text?

Here is the public share link: https://preview.webflow.com/preview/website-09052016?preview=e625bb402ac85765fb33b9ae9c9e24a6

And here is the website: http://website-09052016.webflow.io/kontakt

Greetings from germany

Jan :slight_smile:


#2

Hey Jan,

I just found your question when searching for answers to the same problem as you had. To add a map marker to a custom Google maps.

Did you find a solution?

Greetings from Sweden

Christian


#3

Hi sorry for my late answere, but i didnt find a solution.


#4