I am having trouble displaying markers on the map when trying to open it with latitude and longitude from a Json file. The map is opening, but the markers are not showing up.
Currently, I am fetching a Json file using PHP, creating a variable array, and then passing this array to JavaScript with the latitude and longitude coordinates. However, the markers are not being displayed on the map.
Does anyone have any idea what might be causing this issue? Below is the code I am using.
file Points.Json
{
"points":[
{
"id" :"01",
"name" :"marker01",
"latitude" :"-23.538241",
"longitude" :"-46.647703"
},
{
"id" :"02",
"name" :"marker02",
"latitude" :"-23.551258",
"longitude" :"-46.656243"
},
{
"id" :"03",
"name" :"marker03",
"latitude" :"-23.559160",
"longitude" :"-46.624443"
}
]
}
<?php
$fileJson = file_get_contents('points.json');
$fileJson = json_decode($fileJson);
foreach ($fileJson->points as $value) {
$locations[] = array('id'=>$value->id, 'name'=>$value->name,
'latitude'=>$value->latitude, 'longitude'=>$value->longitude);
}
$locations = json_encode($locations);
?>
<div id="map"></div>
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(-23.538241, -46.647703),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById("map"), mapOptions);
var locationdata = '{"locations":<?php echo $locations; ?>}';
var locations = [];
var markers = [];
for (var i = 0; i < locationdata.locations.length; i++) {
var marker_location = locationdata.locations;
createMarker(marker_location[i],markers,myMap);
}
var markerCluster = new MarkerClusterer(myMap, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
initMap();
function createMarker(marker_location, markers, myMap) {
var latLng = new google.maps.LatLng(marker_location.latitude, marker_location.longitude);
var marker = new google.maps.Marker({
'position': latLng,
map:map,
icon: "http://maps.google.com/mapfiles/ms/icons/green.png"
});
markers.push(marker);
var i_box = '<div>nome :'+ marker_location.nome +'<br>Latitude :' + marker_location.latitude + '<br>Longitude :' + marker_location.longitude + '</div>';
var myOptions = {
content: i_box,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-100, -100),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 1,
width: "200px"
},
closeBoxMargin: "0px 0px 0px 0px",
closeBoxURL: "https://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function(e) {
ib.open(myMap, this);
});
var ib = new InfoBox(myOptions);
}body{
margin: 0;
padding: 0;
background: #fafafa;
font-size: 13px;
font-family: 'Helvetica Neue',sans-serif;
color: #454545;
line-height: 15px;}
#maps{height:400px;width:100%;background:#ddd;}
#maps img{max-width:inherit}
#map{height:400px;width:100%;background:#ddd;}
#map img{max-width:inherit}<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBox3TvUA_j5u4bDmVLXvbtzO7F6y19piA&callback=initMap" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>