Add wordpress image in Google maps infowindow

1

Hello,

I'm developing a platform in wordpress and sending the establishment data to an xml, containing the main data, with this xml, I send the data to google map which shows me all the locations. But together I wanted to send an image, I found in the database the information with Thumbnail ID, however I do not know how to pull this thumbnail since it does not have a url, if it was in the php code it would just do a get_the_post_thumbnail, but here I need the url .

Has anyone ever done anything like this?

Follow the code I have without the image.

<?php get_header(); ?>
<!DOCTYPE html>
<!DOCTYPE html >
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <style>

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

      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>

  </head>

  <body>
    <div id="map"></div>

    <script>
    var customLabel2 = {
      restaurante: {
        label2: 'R'
      },
      bar: {
        label2: 'B'
      }
    };

    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
    //  center: new google.maps.LatLng(-23.5278805, -46.801652),
        center: new google.maps.LatLng(-23.5505199, -46.6333094),
        zoom: 13,
        styles: [
        {
          "featureType": "administrative",
          "elementType": "labels.text.fill",
          "stylers": [
            {
              "color": "#444444"
            }
          ]
        },
        {
          "featureType": "landscape",
          "stylers": [
            {
              "color": "#f2f2f2"
            }
          ]
        },
        {
          "featureType": "poi",
          "stylers": [
            {
              "visibility": "off"
            }
          ]
        },
        {
          "featureType": "road",
          "stylers": [
            {
              "saturation": -100
            },
            {
              "lightness": 45
            }
          ]
        },
        {
          "featureType": "road.arterial",
          "elementType": "labels.icon",
          "stylers": [
            {
              "visibility": "off"
            }
          ]
        },
        {
          "featureType": "road.highway",
          "stylers": [
            {
              "visibility": "simplified"
            }
          ]
        },
        {
          "featureType": "transit",
          "stylers": [
            {
              "visibility": "off"
            }
          ]
        },
        {
          "featureType": "water",
          "stylers": [
            {
              "color": "#cae5f0"
            },
            {
              "visibility": "on"
            }
          ]
        }
      ]
    });
    var iconBase = '/wp-content/themes/prolist/assets/images/map/';
    //    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
    var feature = {
    Sanduíche: {
        icon3: iconBase + 'pin4.png'
    //        icon3: iconBase + 'parking_lot_maps.png'
    },
    Restaurante: {
        icon3: iconBase + 'pin.png'
    //        icon3: iconBase + 'parking_lot_maps.png'
    },
    bar: {
        icon3: iconBase + 'pin2.png'
    },
    Pizzaria: {
        icon3: iconBase + 'pin3.png'
    }
    };

    var infoWindow = new google.maps.InfoWindow({map: map});

      // Change this depending on the name of your PHP or XML file
    downloadUrl('http://app.liveclube.com/connectdatai/', function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var name = markerElem.getAttribute('name');
          var address = markerElem.getAttribute('address');
          var type = markerElem.getAttribute('type');
          var point = new google.maps.LatLng(
              parseFloat(markerElem.getAttribute('lat')),
              parseFloat(markerElem.getAttribute('lng')));
          var ponto_forte_1 = markerElem.getAttribute('ponto_forte_1');
          var ponto_forte_2 = markerElem.getAttribute('ponto_forte_2');
          var desconto = markerElem.getAttribute('desconto');
          var url = markerElem.getAttribute('url');

          var infowincontent = document.createElement('div');
          var strong = document.createElement('strong');
          strong.textContent = name
          infowincontent.appendChild(strong);
          infowincontent.appendChild(document.createElement('br'));

          var text = document.createElement('text');
          text.textContent = address
          infowincontent.appendChild(text);
          infowincontent.appendChild(document.createElement('br'));

          var text = document.createElement('text');
          text.textContent = type
          infowincontent.appendChild(text);
          infowincontent.appendChild(document.createElement('br'));

          var text = document.createElement('text');
          text.textContent = '#' + ponto_forte_1
          infowincontent.appendChild(text);
          infowincontent.appendChild(document.createElement('br'));

          var text = document.createElement('text');
          text.textContent = '#' + ponto_forte_2
          infowincontent.appendChild(text);
          infowincontent.appendChild(document.createElement('br'));

          var text = document.createElement('text');
          text.textContent = desconto + '% OFF'
          infowincontent.appendChild(text);
          infowincontent.appendChild(document.createElement('br'));

          var text = document.createElement('text');
          text.textContent = 'http://app.liveclube.com/descubra/' + url
          infowincontent.appendChild(text);
          infowincontent.appendChild(document.createElement('br'));

    //          var icon2 = customLabel[type] || {};
          var icon2 = feature[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon2.icon3
      //            icon: icons[feature.type].icon,
      //            label: icon2.label2
          });
          marker.addListener('click', function() {
            infoWindow.setContent(infowincontent);
            infoWindow.open(map, marker);
          });
        });
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&language=pt-BR&region=BR">
    </script>
  </body>
</html>



<?php get_footer(); ?>
    
asked by anonymous 02.09.2017 / 20:05

0 answers