Custom Google Makers with DataLayer/GeoJson - php

Question

I'm currently having an Issue getting google markers to display custom images depending on the type. I have had it working in the past that only had one image for all the markers.
map.php
var map,
infoWindow = new google.maps.InfoWindow({pixelOffset: new google.maps.Size(0,-25)});
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 12,
center: {lat: 53.927895, lng: -1.386487}
});
map.data.loadGeoJson('http://customers.auroracomputers.co.uk/customers-json.php');
map.data.addListener('click', function(event) {
infoWindow.setContent(
'Surname: ' + event.feature.getProperty('surname') + '<br>' +
'Postcode: ' + event.feature.getProperty('postcode')
);
var anchor = new google.maps.MVCObject();
anchor.set("position",event.latLng);
infoWindow.open(map,anchor);
});
var iconBase = 'http://customers.auroracomputers.co.uk/icons/'
var icons = {
business: {
icon: iconBase + 'business.png'
},
home: {
icon: iconBase + 'home.png'
},
competitor: {
icon: iconBase + 'devil.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
map.data.setStyle({
icon: 'http://customers.auroracomputers.co.uk/icons/home.png',
icon: icons[feature.type].icon,
icon: icon.competitor.icon
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Customer-Json.php
for ($i=0;$i<$nrows;$i++){
$row = mysqli_fetch_assoc($result);
?>
<script>
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [<?echo $row['lng'];?>,<?echo $row['lat'];?>]
},
"properties": {
"surname": "<?echo $row['surname'];?>",
"postcode": "<?echo $row['postcode'];?>",
"type": "<?echo $row['type'];?>"
}
}<?php if( $i != $nrows-1 ){ ?>,<?php } ?>
</script>

Answer 1

GeoJson markers are styled differently than native Google Maps Javascript API v3 markers. See Style GeoJSON Data in the documentation, in particular the section on Change Appearance Dynamically.
map.data.setStyle(function(feature) {
var type = feature.getProperty('type')
return /** #type {google.maps.Data.StyleOptions} */ ({
icon: icons[type].icon,
title: type
});
});
from the reference:
icon Type: string|Icon|Symbol
Icon for the foreground. If a string is provided, it is treated as though it were an Icon with the string as url. Only applies to point geometries.
proof of concept fiddle
code snippet:
var map,
infoWindow = new google.maps.InfoWindow({
pixelOffset: new google.maps.Size(0, -25)
});
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 10,
center: {
lat: 40.7127837,
lng: -74.0059413
}
});
// map.data.loadGeoJson('http://customers.auroracomputers.co.uk/customers-json.php');
map.data.addGeoJson(testGeoJson)
map.data.addListener('click', function(event) {
infoWindow.setContent(
'Surname: ' + event.feature.getProperty('surname') + '<br>' +
'Postcode: ' + event.feature.getProperty('postcode')
);
var anchor = new google.maps.MVCObject();
anchor.set("position", event.latLng);
infoWindow.open(map, anchor);
});
var iconBase = 'http://customers.auroracomputers.co.uk/icons/'
var icons = {
business: {
icon: iconBase + 'business.png'
},
home: {
icon: iconBase + 'home.png'
},
competitor: {
icon: iconBase + 'devil.png'
}
};
map.data.setStyle(function(feature) {
var type = feature.getProperty('type')
return /** #type {google.maps.Data.StyleOptions} */ ({
icon: icons[type].icon,
title: type
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
// New York, NY, USA (40.7127837, -74.00594130000002)
// Newark, NJ, USA (40.735657, -74.1723667)
var testGeoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.0059413, 40.7127837]
},
"properties": {
"surname": "York",
"postcode": " 10007",
"type": "home"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.1723667, 40.735657]
},
"properties": {
"surname": "Newark",
"postcode": "07102",
"type": "business"
}
}]
};
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

Answer 2

One thing I note is the source json is corrupted, hopefully the following might help get that sorted.
<?php
/*
Customer-Json.php
-----------------
The original code had thousands of `<script>` & `</script>` tags
which meant it was not valid json.
I have assumed that the previous loop can be replaced with the
more usual recordset iteration loop as shown below.
Each row has items added to the json array which gets echoed at the
end - there is not need for the script tags at all - just include the
correct headers.
*/
/* store data to be sent */
$json=array();
/* using object notation for ease */
while( $row=mysqli_fetch_object( $result ) ){
$surname=$row->surname;
$postcode=$row->postcode;
$lat=$row->lat;
$lng=$row->lng;
$type=$row->type;
$json[]=array(
'type' => 'Feature',
'geometry' => array(
'type' => 'Point',
'coordinates' => array( $lng, $lat )
),
'properties' => array(
'surname' => $surname,
'postcode' => $postcode,
'type' => $type
)
);
}
$json=json_encode( $json );
header( 'Content-Type: application/json' );
echo $json;
?>