1
Hello,
I am developing a platform in wordpress and sending the establishment data to an xml, containing the main data, with this xml, send the data to the google map that shows me all locations. But together I wanted to send an image, I found in the database the information with the ID of Thumbnail, but I do not know how to pull this thumbnail since it does not have a url, if it was in php code it would only do a get_the_post_thumbnail, but here I need the url.
Someone has done something similar?
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(); ?>