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®ion=BR">
</script>
</body>
</html>
<?php get_footer(); ?>