On click, show a Google map modal with street and number

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.


$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>



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

var address = dataStreet;


 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') {
            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

Leave a Reply

Your email address will not be published. Required fields are marked *