I have a problem and I really tried everything!
I have a page in my website that loads a google map taking a list of address from a mysql database. It was working but somehow now it's not working anymore.
Here's the script that loads the map:
<div id="map-canvas"></div>
<script type="text/javascript">
function initMap() {
var centro = new google.maps.LatLng(45.701116, 9.665754);
var mapOptions = {
zoom: 15,
center: centro
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString0 = '<div class="title">you are here!<div id="bodyContent"></div>';
//recupero
<?php for($i = 0; $i < count($indirizzi); $i++) { ?>
var contentString = '<div class="title">'<?php $nome_shop = str_replace(" ", "+",
$nomi[$i]); ?> + '<a href=kiwishop.php?shop=<?= $nome_shop ?>>
<?= $nomi[$i] ?></a></div><div class="address"><?= $sottotitoli[$i] ?></div>';
var infowindow<?= $i ?> = new google.maps.InfoWindow({
content: contentString
});
var location = "<?= $indirizzi[$i] ?>";
var geocoder = new google.maps.Geocoder();
//convert location into longitude and latitude
geocoder.geocode( { 'address': location}, function(results, status) {
if (status == 'OK') {
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
}
var marker<?= $i ?> = new google.maps.Marker({
map: map,
position: {lat: lat, lng: lng},
title: '<?= $nomi[$i] ?>',
icon: '<?= $iconemappa[$i] ?>'
});
google.maps.event.addListener(marker<?= $i ?>, 'click', function() {
<?php for($j = 0; $j < count($indirizzi); $j++) { ?>
infowindow<?= $j ?>.close();
//not working
<?php } ?>
infowindow<?= $i ?>.open(map,marker<?= $i ?>);
});
});
<?php } ?>
}
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AGzaNyBMYf1ZkLWd7VGH4q_I5eF92JK6cdfcFCs&callback=initMap"></script>
The variables $indirizzi (addresses) , $nomi, etc.. are previously retrived from the database and I used the htmlentities() function on them. I think the problem comes from special chars, like è or ', beacuse when I had fewer line in the database the map was working. I get an Unespected identifier error.. and then initMap is not a function
UPDATE:
I fixed the single quote problem in the addresses. Now the map loads but only the first eleven markers. Here's the rendered code for the last marker loaded (marker10) e the first not loaded (marker11)
var contentString = '<div class="title">' + '<a href=kiwishop.php?shop=Artisan+Cafè>Artisan Cafè</a></div><div class="address">Cocktail esplosivi e tapas deliziose</div>';
var infowindow10 = new google.maps.InfoWindow({
content: contentString
});
var location = "Via San Bernardino 53, Bergamo";
var geocoder = new google.maps.Geocoder();
//convert location into longitude and latitude
geocoder.geocode( { 'address': location}, function(results, status) {
if (status == 'OK') {
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
}
var marker10 = new google.maps.Marker({
map: map,
position: {lat: lat, lng: lng},
title: 'Artisan Cafè',
icon: '../images/icons/borgo-drink.png'
});
});
var contentString = '<div class="title">' + '<a href=kiwishop.php?shop=Atelier+di+Rita+Patelli>Atelier di Rita Patelli</a></div><div class="address">Composizioni e creazioni con materiali naturali</div>';
var infowindow11 = new google.maps.InfoWindow({
content: contentString
});
var location = "Via Borgo Canale 9b, Bergamo";
var geocoder = new google.maps.Geocoder();
//convert location into longitude and latitude
geocoder.geocode( { 'address': location}, function(results, status) {
if (status == 'OK') {
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
}
var marker11 = new google.maps.Marker({
map: map,
position: {lat: lat, lng: lng},
title: 'Atelier di Rita Patelli',
icon: '../images/icons/borgo-artigiani.png'
});
});
I get this error: " InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number" for all the remained address in the database.
So I guess the geocoder doesn't like the addresses? But they are correct! I printed with console.log() all the variables location and they are fine (I can see all of them). I printed the status variable before the if statement and I get only 11 OK. The code to generate the marker is correct beacuse if I create a map with only the marker11 it works.. But somehow the map stops loading markers at some point.
Any ideas?
Thanks again!
