1. https://developers.google.com/maps/documentation


On the above page, click on, under "Map SDKs", the "JS" button.  Then on that page click on "using API keys".  This gives the following script that must be included in every Google API Map instance you make.  This goes in the html of the page you want the map(s) to go in:


<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

we use our API key for josephkennethmorgan@gmail.com (see Google maps is not free below:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5KDhLBWtEJlvlMow2K7An-QRFzPpdd-w&callback=initMap"></script>



replace "YOUR_API_KEY" with the API key you will generate in the next step.

2. Getting the API Key.


Go to https://console.cloud.google.com/apis/ (you'll need a google account and when you are signed in to that account your account will display on this page).  Our test uses josephkennethmorgan@gmail.com.

Click on "Enable APIS and Services" near top of page (Note NOT the menu item at left).  On the page that opens click "Maps Javascript API" button on page.

You may need to "create a new project".  

Click "Credentials" menu item at left. On the new page that comes up click "create credentials" near the TOP of the page.  this should display the API key. Copy the API key into the script tag above. NOte you can "restrict' the API key, which will restrict to a certain domain name.  For testing purposes, I haven't done this.

DO THIS STEP BEFORE STEP ABOVE "Click Credentials..."????? Google maps is not free, you will need to enable billing.  Go to https://mapsplatform.google.com/pricing/, click "get started" button "then create billing account" and follow instructions. >>>>Use the new API key this process gives you and put it in script above>>>>>>>>>>>>>. This gives you a $300 free credit or 1month trial.  After that Google maps will stop working if you don't go in and allow payment.  

3. Create an html element to put the map into (e.g.) and give that element an id (also, optionally, a class:

<div id="ourMap" class="myGoogleMapAPIMap">

</div>

!!!!!!!!!!!!!!!!JUMP TO STEP 13 TO GET BEST CODE.  OTHER STEPS ARE REALLY FOR EDUCATIONAL PURPOSES ONLY!!!!!!!!!!!!!!!!!

4. Create a function that the above script is going to "call back".  As you can see from the script above, that function must be called "initMap". Note, don't inclue "script" tags if iserting this code into a js file.


<script>

    function initMap(){


    }

</script>

5. Using css, you must give the html element for the map a height and width, otherwise the map won't show.  So, usin g the "ourMap" id we write into our css file:

#ourMap{
height: 700px;
width: 100%;
}

6. Set up a new map object by declearing the "map" variable which gives us access to various properties and functions/methods. The "Map" object (note captial) takes 2 arguments a) what html element id to put the map into (ours is "ourMap" as per step #4 above) b) the center and zoom.  These are REQUIRED options for any map. "Zoom" refers to what zoom level the map should be at on page open and ceneter refers to what location the map should be at on page open.  Our location is toronto, which uses latitude and longitude.  Lat and long of any google map can be obtained by right clicking on any map in by going to maps.google.com. We use Toronto for this test.

We put our map options into an object (variable) called "options"




<script>
    function initMap(){
        var options = {
            center: {lat: 43.6532, lng: -79.3832},
            zoom: 8 //or any value you want
        }
        myMap = new google.maps.Map(document.getElementById("ourMap"),options) 
    }
</script>

<<<<<<<<<<<<<<<<If you followed all steps up to 6., you're html page should display a basic google map.>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

7. Adding A Single Map Marker

<script>
    function initMap(){
        var options = {
            center: {lat: 43.6532, lng: -79.3832},
            zoom: 8 //or any value you want
        }
        myMap = new google.maps.Map(document.getElementById("ourMap"),options) 

        //below script adds a map marker
        const ourMarker = new google.maps.Marker({
            position: {lat: 43.6532, lng: -79.3832}, //puts map marker at any lat or long, ours is Toronto
            map: myMap, //which map to show on.  In our case there is only one, the map object we created above in "myMap = new google.maps.Map(document.getElementById("ourMap"),options) " we created above.
        });
    }

</script>

8. Change the Single Map Marker icon.  Just add in "icon:" and the icons source

<script>
    function initMap(){
        var options = {
            center: {lat: 43.6532, lng: -79.3832},
            zoom: 8 //or any value you want
        }
        myMap = new google.maps.Map(document.getElementById("ourMap"),options) 

        //below script adds a map marker
        const ourMarker = new google.maps.Marker({
            position: {lat: 43.6532, lng: -79.3832}, //puts map marker at any lat or long, ours is Toronto
            map: myMap, //which map to show on.  In our case there is only one, the map object we created above in "myMap = new google.maps.Map(document.getElementById("ourMap"),options) " we created above.


            icon: "https://img.icons8.com/nolan/2x/marker.png" 
        });
    }

</script>

9. Create a Single "Info Window" i.e. so when you click on the marker we get info about the place.  See myInfoWindow constant below, also see the addEventListener for the window.

<script>
    function initMap(){
        var options = {
            center: {lat: 43.6532, lng: -79.3832},
            zoom: 8 //or any value you want
        }
        myMap = new google.maps.Map(document.getElementById("ourMap"),options) 

        //below script adds a map marker
        const ourMarker = new google.maps.Marker({
            position: {lat: 43.6532, lng: -79.3832}, //puts map marker at any lat or long, ours is Toronto
            map: myMap, //which map to show on.  In our case there is only one, the map object we created above in "myMap = new google.maps.Map(document.getElementById("ourMap"),options) " we created above.
            icon: "https://img.icons8.com/nolan/2x/marker.png" 
        });


        const myInfoWindow = new google.maps.InfoWindow({
            //content: contentString,  .........you can use a variable but...
            content: '<h2>Toronto</h2>'
        });
        ourMarker.addListener("click", () =>{ //"=> creates function, instead of "click", could be "mouseover"
            myInfoWindow.open(myMap, ourMarker); //"myInfoWindow" name from the constant directly above this, "myMap" from name of map object in step 5, "ourMarker" from "ourMarker in step 7
        }) 
    }

</script>

10. Create multiple markers for different locations

<script>
    function initMap(){
        var options = {
            center: {lat: 43.6532, lng: -79.3832},
            zoom: 8 //or any value you want
        }
        myMap = new google.maps.Map(document.getElementById("ourMap"),options) 

        //remove all code below this from the above examples and start with a new function:

        function ourAddMarker(ourLocations){ //new function with ourLocation as argument
            const ourMarker = new google.maps.Marker({
                position: ourLocations, //argument passed to above function created by ourAddMarker below
                map: myMap, //which map to show on.  In our case there is only one, the map object we created above in "myMap = new google.maps.Map(document.getElementById("ourMap"),options) " we created above.
                icon: "https://img.icons8.com/nolan/2x/marker.png" 
            });
        }
        ourAddMarker({lat: 43.6532, lng: -79.3832}); //location Toronto, passes various locations into "ourLOcations" argument in function above
        ourAddMarker({lat: 43.25772460624437, lng: -79.8775378608841}); //location Hamilton, passes various locations into "ourLOcations" argument in function above
        ourAddMarker({lat: 43.9233867909426, lng: -78.66423534712405}); //location Oshawa, passes various locations into "ourLOcations" argument in function above
    }

</script>

11. Create multiple markers for different locations AND add separate icons for each location

<script>
    function initMap(){
        var options = {
            center: {lat: 43.6532, lng: -79.3832},
            zoom: 8 //or any value you want
        }
        myMap = new google.maps.Map(document.getElementById("ourMap"),options) 

        function ourAddMarker(ourProperties){ //new function with ourProperties as argument
            const ourMarker = new google.maps.Marker({
                position: ourProperties.location, //argument for location passed to above function created by ourAddMarker below
                map: myMap, //which map to show on.  In our case there is only one, the map object we created above in "myMap = new google.maps.Map(document.getElementById("ourMap"),options) " we created above.
                //icon: ourProperties.imageIconToUse //argument passed by ourAddMarker below
            });
            //check to make sure custom icon is set so no error thrown!
            if(ourProperties.imageIconToUse){
                //set image icon value
                ourMarker.setIcon(ourProperties.imageIconToUse)
            }

        }
        ourAddMarker({location:{lat: 43.6532, lng: -79.3832}, imageIconToUse:"https://img.icons8.com/nolan/2x/marker.png"}); //location Toronto, passes various locations into "ourProperties" argument in function above. Could use differnt image URLs, we use the same here
        ourAddMarker({location:{lat: 43.25772460624437, lng: -79.8775378608841}, imageIconToUse:"https://img.icons8.com/nolan/2x/marker.png"}); //location Hamilton, passes various locations into "ourProperties" argument in function above. Could use differnt image URLs, we use the same here
        ourAddMarker({location:{lat: 43.9233867909426, lng: -78.66423534712405}, imageIconToUse:"https://img.icons8.com/nolan/2x/marker.png"}); //location Oshawa, passes various locations into "ourProperties" argument in function above. Could use differnt image URLs, we use the same here
    }

</script>

12. Create multiple markers for different locations AND add separate icons for each location AND have different info windows for each location (popup info on hover or click)

<script>
    function initMap(){
        var options = {
            center: {lat: 43.6532, lng: -79.3832},
            zoom: 8 //or any value you want
        }
        myMap = new google.maps.Map(document.getElementById("ourMap"),options) 

        function ourAddMarker(ourProperties){ //new function with ourProperties as argument
            const ourMarker = new google.maps.Marker({
                position: ourProperties.location, //argument for location passed to above function created by ourAddMarker below
                map: myMap, //which map to show on.  In our case there is only one, the map object we created above in "myMap = new google.maps.Map(document.getElementById("ourMap"),options) " we created above.
                //icon: ourProperties.imageIconToUse //argument passed by ourAddMarker below
            });
            //check to make sure custom icon is set so no error thrown!
            if(ourProperties.imageIconToUse){
                //set image icon value
                ourMarker.setIcon(ourProperties.imageIconToUse)
            }

            //check to make sure there is content for the info window so no error thrown!
            if(ourProperties.ourPopUpContent){
                const myInfoWindow = new google.maps.InfoWindow({
                    content: ourProperties.ourPopUpContent

                });
                ourMarker.addListener("click", () =>{ //"=> creates function, instead of "click", could be "mouseover"
                    myInfoWindow.open(myMap, ourMarker); //"myInfoWindow" name from the constant directly above this, "myMap" from name of map object in step 5, "ourMarker" from "ourMarker in step 7
                }) 

            }

        }
        ourAddMarker({location:{lat: 43.6532, lng: -79.3832}, imageIconToUse:"https://img.icons8.com/nolan/2x/marker.png", ourPopUpContent:'<h2>Toronto</h2>'}); //location Toronto, passes various locations into "ourProperties" argument in function above. Could use differnt image URLs, we use the same here
        ourAddMarker({location:{lat: 43.25772460624437, lng: -79.8775378608841}, imageIconToUse:"https://img.icons8.com/nolan/2x/marker.png", ourPopUpContent:'<h2>Hamilton</h2>'}); //location Hamilton, passes various locations into "ourProperties" argument in function above. Could use differnt image URLs, we use the same here
        ourAddMarker({location:{lat: 43.9233867909426, lng: -78.66423534712405}, imageIconToUse:"https://img.icons8.com/nolan/2x/marker.png", ourPopUpContent:'<h2>Oshawa</h2>'}); //location Oshawa, passes various locations into "ourProperties" argument in function above. Could use differnt image URLs, we use the same here
    }

</script>


13. Create multiple markers for different locations AND add separate icons for each location AND have different info windows for each location (popup info on hover or click) BUT WITH USING AN ARRAY TO KEEP CODE CLEANER.  Note that I'm not completely sure how this all works.

<script>
    function initMap(){
        var options = {
            center: {lat: 43.6532, lng: -79.3832}, //define map coodinates to use when page opens
            zoom: 8 //or any zoom value you want
        }
        myMap = new google.maps.Map(document.getElementById("ourMap"),options) //initialize new map and put that map into the html of the page on the element whose id ="our Map"
        
        //add marker properties we want to an array
        let markerArray = [
           {location:{lat: 43.6532, lng: -79.3832}, //location Toronto
            imageIconToUse:"https://img.icons8.com/nolan/2x/marker.png", //Could use differnt image URLs, but we use the same for each here
            ourPopUpContent:'<h2>Toronto</h2>'}, //content for this info popup
        
            {location:{lat: 43.25772460624437, lng: -79.8775378608841},//location hamilton
            imageIconToUse:"https://img.icons8.com/nolan/2x/marker.png", //Could use differnt image URLs, but we use the same for each here
            ourPopUpContent:'<h2>Hamilton</h2>'}, //content for this info popup
            
            {location:{lat: 43.9233867909426, lng: -78.66423534712405},
            imageIconToUse:"https://img.icons8.com/nolan/2x/marker.png",
            ourPopUpContent:'<h2>Oshawa</h2>'} //location Oshawa, passes various locations into "ourProperties" argument in function above. Could use differnt image URLs, we use the same here
         ]
        
        //loop through marker properties array to display each one
        for (let i=0; i< markerArray.length; i++){
           ourAddMarker(markerArray[i]);
        }

        function ourAddMarker(ourProperties){ //new function with ourProperties as argument
            const ourMarker = new google.maps.Marker({
                position: ourProperties.location, //argument for location passed to above function created by ourAddMarker below
                map: myMap, //which map to show on.  In our case there is only one, the map object we created above in "myMap = new google.maps.Map(document.getElementById("ourMap"),options) " we created in first few steps near top of this doc.
                });
            
            //check to make sure custom icon is set so no error thrown!
            if(ourProperties.imageIconToUse){
                //set image icon value
                ourMarker.setIcon(ourProperties.imageIconToUse)  //create new icon
            }

            //check to make sure there is content for the info window so no error thrown!
            if(ourProperties.ourPopUpContent){
                const myInfoWindow = new google.maps.InfoWindow({
                    content: ourProperties.ourPopUpContent
                });
                ourMarker.addListener("click", () =>{ //"=> creates function, instead of "click", could be "mouseover"
                    myInfoWindow.open(myMap, ourMarker); //"myInfoWindow" name from the constant directly above this, "myMap" from name of map object in step 5, "ourMarker" from "ourMarker in step 7
                }) 

            }

        }
        
    }

</script>