How to integrate google maps api key in the java script below

if ($('#myMap').length > 0) {
    //set your google maps parameters
    var $latitude = -22.557838, //If you unable to find latitude and longitude of your address. Please visit you can easily generate.
        $longitude = 17.066325,
        $map_zoom = 16 /* ZOOM SETTING */

    //google map custom marker icon
    var $marker_url = 'assets/images/pin.png';

    //we define here the style of the map
    var style = [{
        "stylers": [{
            "hue": "#000"
        }, {
            "saturation": -70
        }, {
            "gamma": 2.15
        }, {
            "lightness": 12

    //set google map options
    var map_options = {
        center: new google.maps.LatLng($latitude, $longitude),
        zoom: $map_zoom,
        panControl: true,
        zoomControl: true,
        mapTypeControl: true,
        streetViewControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        styles: style
    //inizialize the map
    var map = new google.maps.Map(document.getElementById('myMap'), map_options);
    //add a custom marker to the map
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng($latitude, $longitude),
        map: map,
        visible: true,
        icon: $marker_url

    var contentString = '<div id="mapcontent">' + '<p>17, Hahnemann Street, Windhoek</p></div>';
    var infowindow = new google.maps.InfoWindow({
        maxWidth: 320,
        content: contentString

    google.maps.event.addListener(marker, 'click', function() {, marker);



Aren’t you supposed to use your API key when embedding the google api scripts?

<script src=""
    async defer></script>

As outlined here:

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