I need to show a Google map as a modal when the user clicks on a link. This part works, however, I need the map to do a search based on street and number rather than latitude and longitude. I know this can be done with geocoding but I seem to be doing it wrong. The street and number are passed as data-attributes (this is a WordPress page, the map is inside dynamically created post pages each one with a different address, so it cannot be hardcoded), that part works well, I just can’t get a map to show.

<?php

$calle              = get_field("calle");
$numero_casa        = get_field("numero_casa");

?>

<div class="mapa-pop-up" id="modalShow" data-street="<?php echo $calle ?>" data-number="<?php echo $numero_casa ?>">  <a href="#modal"><p> <span> <img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/icona-info-zona.png" alt="open map icon"> </span> Ver mapa ampliado e informaciĆ³n de la zona </p>  </a> </div>

        <!-- modal dialog -->
        <div class="remodal" data-remodal-id="modal">

              <div id="modal-map"></div>

</div>

JS

var dataStreet = $("#modalShow").data("street");
var dataNumber = $("#modalShow").data("number");

var address = dataStreet;

console.log(dataNumber);

 function initMap() {
        var map = new google.maps.Map(document.getElementById('modal-map'), {
          zoom: 8,
          center: {lat: -34.397, lng: 150.644}
        });
        var geocoder = new google.maps.Geocoder();

        document.getElementById('modalShow').addEventListener('click', function() {
          geocodeAddress(geocoder, map);
        });
      }

      function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('address').value;
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }

Read more here: On click, show a Google map modal with street and number


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: