Como alimentar meu google maps com meu banco de dados? (multiplos marker, usando js e html)
Olá, estou tentando jogar meus dados de latitude e longitude do banco de dados do meu site para um html incorporado do google maps, usando google maps javascript api. No site (wix), coloquei o seguinte código (javaScript) na página:
Aparentemente está enviando corretamente os dados, penso que o problema está na minha HTML:
Alguém sabe me dizer o que está errado?
import wixData from "wix-data";
$w.onReady(function () {
minhaFuncao();
});
function minhaFuncao(){
wixData.query("Locais")
.find()
.then((resultado) => {
console.log(resultado);
let latitude = new Array();
let longitude = new Array();
let title = new Array();
let coords = new Array();
for (let i = 0; i < resultado.length; i++) {
latitude[i] = resultado.items[i].lat;
longitude[i] = resultado.items[i].long;
title[i] = resultado.items[i].title;
coords[i] = String([[latitude[i], longitude[i]]]); //VER SE DÁ PROBLEMA QUE SEJA STRING
}
console.log(coords);
let coordenadas = parseFloat(coords); // TRANSFORMADO EM NÚMERO
console.log(coordenadas );
let dados = [coordenadas ];
console.log(dados);
$w("#googleMaps1").postMessage(dados);
$w("#googleMaps1").onMessage((event) => {
if (event.data.type === 'ready') {
$w("#googleMaps1").postMessage(dados);
}
});
})
.catch((err) => {
let errorMsg = err;
});
}
Aparentemente está enviando corretamente os dados, penso que o problema está na minha HTML:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title></title>
<style>
#map{
height: 400px;
width: 100%;
}
</style>
</head>
<body onLoad="ready()">
<div id="map"></div>
<script>
function initMap(){
var options ={
zoom:14,
center: {lat:-23.687791, lng:-46.552697}
}
var map = new google.maps.Map(document.getElementById('map'), options);
function addMarker(props){
var market = new google.maps.Marker({
position:props.coords,
map:map,
icon: 'https://img.icons8.com/cotton/35/000000/flag--v1.png'
});
}
}
window.onmessage = function(event){
for(var i = 0; i < event.data.length; i++){
var latLng = new google.maps.LatLng(event.data[i]);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
};
function ready(){
window.parent.postMessage({"type":"ready"}, "*");
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MinhaChaveFicaAqui&callback=initMap">
</script>
</body>
</html>
Alguém sabe me dizer o que está errado?
Renata
Curtidas 0