I'm trying to create a custom map where I'm going to set a few markers with a custom icon. The icon appear normally on my localhost but when I uploaad all the files to my server the custom icon doesn't appear! The map show the default GMap marker proving that my database connection is ok. Here follow my code:
index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div id="map-canvas"></div>
<script type="text/javascript">
var map;
var allMarkers = [];
var customIcons = {
0: {
icon: location.origin + '/mymap/images/mm_20_green.png'
},
1: {
icon: location.origin + '/mymap/images/mm_20_red.png'
}
};
function setMarkers(data) {
console.log('setMarkers');
console.log(data);
var markerJson = JSON.parse(data);
var pos;
var marker;
var icon;
for (var i = 0; i < allMarkers.length; i++) {
allMarkers[i].setMap(null);
};
allMarkers = [];
console.log(markerJson.length);
for (var i = 0; i < markerJson.length; i++) {
icon = customIcons[markerJson[i].stat] || {};
pos = new google.maps.LatLng(markerJson[i].lat, markerJson[i].lng);
marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Title',
icon: icon.icon
});
allMarkers.push(marker);
console.log(allMarkers);
}
}
function fetchMarkers() {
console.log('fetchMarkers');
$.ajax({
type: "GET",
url: "jsonResponse.php",
success: function(data) {
setMarkers(data);
setTimeout(function(){
fetchMarkers();
}, 3000);
}
});
}
function initialize() {
console.log('initialize');
// Get center
var mapOptions = {
zoom: 14,
//mapTypeId: google.maps.MapTypeId.HYBRID,
panControl: false,
streetViewControl: false,
mapTypeControl: false
};
// Load google map
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
if(navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function(position) {
initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
map.setCenter(initialLocation);
}, function() {
handleNoGeolocation(browserSupportFlag);
});
}
fetchMarkers();
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</body>
</html>
jsonResponse.php:
<?php
require("config.php");
// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
// Opens a connection to a MySQL server
$connection=mysql_connect (DB_SERVER, DB_USER, DB_PASSWORD);
if (!$connection) { die('Not connected : ' . mysql_error());}
// Set the active MySQL database
$db_selected = mysql_select_db(DB_DATABASE, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the markers table
$query = "SELECT * FROM sensors WHERE 1";
$result = mysql_query($query);
if (!$result) {
die('Invalid query: ' . mysql_error());
}
$markersArray = array();
while ($row = @mysql_fetch_assoc($result)){
array_push($markersArray, $row);
}
echo json_encode ($markersArray);
I'm pretty sure the icon image is in the right place. I just copy and paste to the server, so the files structure is exactly the same.
Anyone have any ideia about what should I do? I'm starting to think it is about server configuration...
