Como alimentar meu google maps com meu banco de dados? (multiplos marker, usando js e html)

28/04/2020

0

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:

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

Renata

Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar