How to integrate Google Map API using custom JS and Elementor Pro - WpBuilt 480622971805823
You are currently viewing How to integrate Google Map API using custom JS and Elementor Pro

How to integrate Google Map API using custom JS and Elementor Pro

  • Josh Lozano
  • February 19, 2022
  • 0 Comments

Hello there! This guide is another way to integrate the Google Map Javascript API into your website. Let’s get started! First, we need to set up the Google Map API key on the Google Map console, and after that, we will integrate the API into your website. 

Get the Google Map Javascript API key

 

First, make sure you have a google account, and go to this URL https://console.cloud.google.com/google/maps-apis/ and log in to your account. If it’s your first time, there are terms and conditions before you can proceed. Make sure to put a check on your agreement and proceed. 

Now, let’s create a project. Click the Create Project on the right side of your screen.  

 

Just add a name on the Project Name. For this tutorial, I will name it “Sample Project.” After you add a name to your project, click Create.

 

Once you’re done creating a project, You will proceed to the Maps APIs and Services. As you can see, there are many APIs you can choose for integrating Google Maps, but for this tutorial, we will use the Maps Javascript API. Just click the Maps Javascript API and click Enable.

 

Your Maps Javascript API is enabled now. Next, we will create Credentials to get an API key that you will eventually use on your WordPress site. Go to Credentials at Google Maps Platform sidebar.

You will be at the Credentials Tab now. At the top of your screen, you will see Create Credentials; click it, and it will let you choose three options. Just choose the API key.

An API key dialog box will appear; click Restrict Key. We will restrict the API key to only use it on a specific Map API that we enabled.

You will be proceeded on Restrict and Rename API key page. At the bottom of the page, before the Save button, there is the API Restrictions group; choose to Restrict key, then choose the Map Javascript API on the dropdown list. 

(Note: If you haven’t enabled any Map API on the Map APIs and Services page, it won’t show it on the dropdown list)

Congrats, you have an API key now. Copy the API key, and you are now ready to integrate the Map Javascript API on your website.

Let’s Integrate the Google Map API into your website.

Copy this Javascript code and paste it into your footer.php after the HTML footer tag.

 

    <script>

    function initMap() {

       var location = {

            lat: 37.78904217566213,

            lng: -122.44376408672501

        };

        var map = new google.maps.Map(

            document.getElementById(“map”), {

                zoom: 14,

                center: location

            }

        );

    }

    </script>

 

 

Note: This code sets the map’s location and uses the Google Map function to locate the HTML ID (map) where the google map will display. 

 

After adding the Javascript code to the footer, you must include the Google Maps API script link into the wp_enqueue_scripts on functions.php. Here is the line of code:

 

wp_enqueue_script(‘g_map_api’, ‘https://maps.googleapis.com/maps/api/js?key=&callback=initMap’, array(), null, ‘true’ );

Also, paste the API key after the “?key=”. Without the API key, it will not work.

 

Now, go to your page and add an HTML widget. Add this code into the widget.

 

<div id=”map”>

</div>

Here is the result: 

As you can see, there is a “For development purposes only” watermark. Because Google Map APIs are no longer free, you need to avail each API that you will use on your website. For more information about the pricing, here is the link: https://cloud.google.com/maps-platform/pricing/.

 

Now you know how to integrate the Google Map Javascript API into your website using custom javascript. If you have any more concerns or encounter problems, let us know. 

 

Hello there! This guide is another way to integrate the Google Map Javascript API into your website. Let’s get started! First, we need to set up the Google Map API key on the Google Map console, and after that, we will integrate the API into your website. 

Get the Google Map Javascript API key

 

First, make sure you have a google account, and go to this URL https://console.cloud.google.com/google/maps-apis/ and log in to your account. If it’s your first time, there are terms and conditions before you can proceed. Make sure to put a check on your agreement and proceed. 

Now, let’s create a project. Click the Create Project on the right side of your screen.  

 

Just add a name on the Project Name. For this tutorial, I will name it “Sample Project.” After you add a name to your project, click Create.

 

Once you’re done creating a project, You will proceed to the Maps APIs and Services. As you can see, there are many APIs you can choose for integrating Google Maps, but for this tutorial, we will use the Maps Javascript API. Just click the Maps Javascript API and click Enable.

 

Your Maps Javascript API is enabled now. Next, we will create Credentials to get an API key that you will eventually use on your WordPress site. Go to Credentials at Google Maps Platform sidebar.

You will be at the Credentials Tab now. At the top of your screen, you will see Create Credentials; click it, and it will let you choose three options. Just choose the API key.

An API key dialog box will appear; click Restrict Key. We will restrict the API key to only use it on a specific Map API that we enabled.

You will be proceeded on Restrict and Rename API key page. At the bottom of the page, before the Save button, there is the API Restrictions group; choose to Restrict key, then choose the Map Javascript API on the dropdown list. 

(Note: If you haven’t enabled any Map API on the Map APIs and Services page, it won’t show it on the dropdown list)

Congrats, you have an API key now. Copy the API key, and you are now ready to integrate the Map Javascript API on your website.

Let’s Integrate the Google Map API into your website.

Copy this Javascript code and paste it into your footer.php after the HTML footer tag.

 

    <script>

    function initMap() {

       var location = {

            lat: 37.78904217566213,

            lng: -122.44376408672501

        };

        var map = new google.maps.Map(

            document.getElementById(“map”), {

                zoom: 14,

                center: location

            }

        );

    }

    </script>

 

 

Note: This code sets the map’s location and uses the Google Map function to locate the HTML ID (map) where the google map will display. 

 

After adding the Javascript code to the footer, you must include the Google Maps API script link into the wp_enqueue_scripts on functions.php. Here is the line of code:

 

wp_enqueue_script(‘g_map_api’, ‘https://maps.googleapis.com/maps/api/js?key=&callback=initMap’, array(), null, ‘true’ );

Also, paste the API key after the “?key=”. Without the API key, it will not work.

 

Now, go to your page and add an HTML widget. Add this code into the widget.

 

<div id=”map”>

</div>

Here is the result: 

As you can see, there is a “For development purposes only” watermark. Because Google Map APIs are no longer free, you need to avail each API that you will use on your website. For more information about the pricing, here is the link: https://cloud.google.com/maps-platform/pricing/.

 

Now you know how to integrate the Google Map Javascript API into your website using custom javascript. If you have any more concerns or encounter problems, let us know. 

 

Leave a Reply

×

Cart