Показать маркер на Google Maps

Question

Показать маркер на Google Maps

Я давно хотел показать маркер на Google Maps. Я уже могу получить широту и долготу из базы данных, но моя проблема в том, что он не будет отображать маркер. Это мой код

    var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 15,
center: new google.maps.LatLng(10.3157, 123.8854),
mapTypeId: google.maps.MapTypeId.ROADMAP
});var locations = [
<?php foreach($routes as $route){?>
{
"title": "{{ $route->destination }}",
"lat": "{{ $route->lat }}",
"lng": "{{ $route->lng }}"},

<?php } ?>
];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i].lat,locations[i].lng),
icon: pin,
map: map
})

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i].title);
infowindow.open(map, marker);
}
})(marker, i));

console.log(locations[i].lat);
console.log(locations[i].lng);
}

Я пытался сделать console.log широте и долготе, и он успешно отображается, но маркер не будет отображаться.

0

google-maps laravel-5 marker php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вам нужно создать infowindow первый.
Вы используете переменную в своем событии клика, но она не создана.

var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 15,
center: new google.maps.LatLng(10.3157, 123.8854),
mapTypeId: google.maps.MapTypeId.ROADMAP
});var locations = [
<?php foreach($routes as $route){?>
{
"title": "{{ $route->destination }}",
"lat": "{{ $route->lat }}",
"lng": "{{ $route->lng }}"},

<?php } ?>
];

// Create infowindow here
var infowindow = new google.maps.InfoWindow();

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i].lat,locations[i].lng),
icon: pin,
map: map
})

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i].title);
infowindow.open(map, marker);
}
})(marker, i));

console.log(locations[i].lat);
console.log(locations[i].lng);
}

0