Bir mekan listelediğim websitem mevcut. Database'de tüm mekanlar için koordinatları tutuyorum. Bunları anasayfada harita üzerinde listelemek istiyorum.
Google Map Javascipt Kodu hazır şekilde aşağıda paylaşıyorum sizlerle. Array kısmına nasıl database'den bu mekanların koordinatlarını çekebilirim acaba? Üzerine tıklayıncada açılan İÇERİK olarak belirttiğim kısımda mekan ismini göstermek istiyorum.
Kod;
<!DOCTYPE html>
<html lang="en">
<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>My Google Map</title>
<style>
#map{
height:400px;
width:100%;
}
</style>
</head>
<body>
<h1>My Google Map</h1>
<div id="map"></div>
<script>
function initMap(){
// Harita Ayarları
var options = {
zoom:8,
center:{lat:42.3601,lng:-71.0589}
}
// Yeni Harita
var map = new google.maps.Map(document.getElementById('map'), options);
// click
google.maps.event.addListener(map, 'click', function(event){
// Marker ekle
addMarker({coords:event.latLng});
});
// Array (buraya databaseden data çekmem lazım)
var markers = [
{
coords:{lat:42.4668,lng:-70.9495},
iconImage:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
content:'<h1>Lynn MA</h1>'
},
{
coords:{lat:42.8584,lng:-70.9300},
content:'<h1>Amesbury MA</h1>'
},
{
coords:{lat:42.7762,lng:-71.0773}
}
];
// Loop through markers
for(var i = 0;i < markers.length;i++){
// Marker Ekle
addMarker(markers[i]);
}
// Marker Ekle Fonk
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
//icon:props.iconImage
});
if(props.iconImage){
marker.setIcon(props.iconImage);
}
// İçerik
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content:props.content
});
marker.addListener('click', function(){
infoWindow.open(map, marker);
});
}
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
</body>
</html> 