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

28/04/2020

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

Curtir t�pico + 0

Responder