I want to set a different color marker depending on the type that it gets from my database. For example the type is FIRE and I want the marker to be color red. Is it possible?
Here is my maps.html
(function(){
var map,marker,latlng,bounds,infowin;
/* initial locations for map */
var _lat=14.676;
var _lng=121.0437;
function showMap(){
/* set the default initial location */
latlng={ lat: _lat, lng: _lng };
bounds = new google.maps.LatLngBounds();
infowin = new google.maps.InfoWindow();
/* invoke the map */
map = new google.maps.Map( document.getElementById('map'), {
center:latlng,
zoom: 10
});
/* show the initial marker */
marker = new google.maps.Marker({
position:latlng,
map: map,
title: 'Hello World!'
});
bounds.extend( marker.position );
/* jQuery */
$.ajax({
url: 'get.php',
data: {'ajax':true },
dataType: 'json',
success: function( data, status ){
$.each( data, function( i,item ){
/* add a marker for each location in response data */
addMarker( item.lat, item.lng, item.username);
});
},
error: function(){
output.text('There was an error loading the data.');
}
});
}
/* simple function just to add a new marker */
function addMarker(lat,lng,title){
marker = new google.maps.Marker({/* Cast the returned data as floats using parseFloat() */
position:{ lat:parseFloat( lat ), lng:parseFloat( lng ) },
map:map,
title:title
});
google.maps.event.addListener( marker, 'click', function(event){
infowin.setContent(this.title);
infowin.open(map,this);
infowin.setPosition(this.position);
}.bind( marker ));
bounds.extend( marker.position );
map.fitBounds( bounds );
}
document.addEventListener( 'DOMContentLoaded', showMap, false );
}());
</script>
<style>
html, html body, #map{ height:100%; width:100%; padding:0; margin:0; }
</style>
</head>
<body>
<div id='map'></div>
</body>
Here is my get.php where I get the data from the database.
$mysql ="SELECT lat,lng,username,type FROM `tbl_coordinates`";
$result = mysqli_query($connect, $mysql);
if (!empty($result))
{
while ($row=mysqli_fetch_array($result))
{
$latlng[] = array(
'lat' => $row['lat'],
'lng' => $row['lng'],
'username' => $row['username'],
'type' => $row['type'],
);
}
}
mysqli_close($connect);
header('Content-type:application/json;charset=utf-8');
echo json_encode($latlng);
?>
You have to add one more parameter icon in below functions,
/* show the initial marker */
marker = new google.maps.Marker({
position:latlng,
map: map,
title: 'Hello World!',
icon: 'marker1.png' // path of your icon image.
});
And visit this link :- http://www.benjaminkeen.com/google-maps-coloured-markers/ from this link you can download all the markers. So put this marker's image in your directory and give path to that image in icon parameter. This is the easiest way of adding other marker in google map.
EDIT :
So for that you have to put condition's like if it's color is red then put red icon. if flood than flood's icon.
if you got value in $color = 'red'; from php than in javascript put it like this,
var color = <?php echo $color; ?>
then check using color that,
if(color == 'red')
{
icon: 'red.png'
}
if(color == 'blue')
{
icon: 'flood.jpg'
}