Google Map Locations Elementor

### **Steps to Show Locations on Google Map in Elementor**
1. **Ensure Google Maps API Key**
– Go to [Google Cloud Console](https://console.cloud.google.com/)
– Enable **Maps JavaScript API** & **Geocoding API**
– Get your **API Key** and add it to Elementor settings.

2. **Install & Activate an Elementor Map Plugin**
– Use a plugin like **"Elementor Google Map Extended"** or **"Premium Addons for Elementor"** that supports dynamic markers.

3. **Add Custom Fields for Location (If Needed)**
– If your "Location" post type doesn’t have latitude/longitude fields, add them using **ACF (Advanced Custom Fields)**:
– Create fields: `latitude`, `longitude`
– Assign them to the **Location** post type.

4. **Create a Google Map in Elementor**
– Open Elementor and add a **Google Map** widget.
– Select **Dynamic Data** and choose the latitude/longitude fields.

5. **Use Elementor's Loop Feature for Multiple Markers**
– If your map widget supports multiple markers, enable **Dynamic Repeater** and connect it to your **Location posts**.

6. **Alternative: Custom Code for Elementor (If Plugin Doesn’t Work)**
If your Elementor map widget doesn’t support dynamic locations, use a **custom HTML widget** with the following script:

<div id="map" style="width:100%; height:500px;"></div>

   <script>
   function initMap() {
       var map = new google.maps.Map(document.getElementById('map'), {
           zoom: 10,
           center: { lat: 28.6139, lng: 77.2090 } // Default center (e.g., Delhi)
       });

       var locations = [
           <?php
           $args = array(
               'post_type' => 'location',
               'posts_per_page' => -1
           );
           $query = new WP_Query($args);
           while ($query->have_posts()) {
               $query->the_post();
               $lat = get_field('latitude'); // ACF Field
               $lng = get_field('longitude');
               $title = get_the_title();
               if ($lat && $lng) {
                   echo "{ lat: $lat, lng: $lng, title: '$title' },";
               }
           }
           wp_reset_postdata();
           ?>
       ];

       locations.forEach(function(location) {
           new google.maps.Marker({
               position: { lat: location.lat, lng: location.lng },
               map: map,
               title: location.title
           });
       });
   }
   </script>

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

– Replace `"YOUR_GOOGLE_MAPS_API_KEY"` with your **actual Google Maps API key**.
– Ensure your **Location** posts have latitude & longitude values.

### **Conclusion**
– If your Elementor map widget supports **dynamic content**, use it.
– If not, you can use **ACF** and **custom HTML/JS** as shown above.

Let me know if you need help integrating it with Elementor! 🚀