Add a marker to a map in javascript Themezy template

Question

I downloaded a free template from here , It has a contact.html file, and a js directory containing app.js , jquery-1.11.1.min.js , jquery1.11.1.min.map and plugins.js files. I edited plugins.js file and changed the center and zoom, but I've been trying to add a marker and an custom icon but I can't find which file and how I must edit it; it uses a Gmap3. The app.js file contains:

if ($(".map").length) {
    $('.map').gmap3({
            map: {
                options: {
                    maxZoom: 14
                }
            },
            marker: {
                address: "40 Sibley St, Detroit",
            }
        },
        "autofit");
}
});

Answer 1

There's already a default marker placed on "40 Sibley St, Detroit". In order for it to be displayed on the map though, and for the map itself to load successfully, you first need to add your own project's API key to the Maps API script (in modern_architecture/HTML/contact.html ):

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"></script>

Like this:

<script src="https://maps.google.com/maps/api/js?sensor=false&amp;language=en&key=AIza..."></script>

Make sure you also replace http with https .

Note: you must add a valid API key from a project that has billing enabled as well as the JavaScript API and the Geocoding API enabled. Please go through Google's get started guide .

Once your map and marker show up, to change the marker's address, modify the default one with your own location (in app.js ):

marker:{
    address: "Paris, France", // whatever your location is
}

And to add a custom icon try this:

marker:{
    address: "Paris, France",
    options: {
        icon: "https://maps.google.com/mapfiles/marker_green.png"
    }
}

This is how my local map implementation looks like after the above changes:

Hope this helps!