Friday, 9 August 2013

Marker Colour Stays Black Google Maps API

Marker Colour Stays Black Google Maps API

I have wrote a script to change the marker colour depending on the score
between 0 and 1 on the Google Maps API, however the marker colour at the
moment is just black, I have attached the contents of my JavaScript file
below:
function initialize() {
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(52.63506336920521,
-1.8656949083418475),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
writePlaceMarkers();
}
console.log("1");
function placeMarker (lat, long, name, score){
var pinColor = get_colour(score);
var pinImage = new
google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|"
+ pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new
google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
title: name,
icon: pinImage,
shadow: pinShadow
});
var info = contentString(name);
google.maps.event.addListener(marker, 'click', function() {
info.open(map,marker);
console.log("2");
});
}
function get_colour(score) //Score between 0 and 1
{
score = score*511
var R;
var G;
var B = 0;
if (score > 255)
{
G = 255;
R = 511 - score;
}
else if (score < 255)
{
G = score;
R = 255;
}
else //score==255
{
G = 255;
R = 255;
}
console.log("3");
R = parseInt(R).toString(16);
G = parseInt(G).toString(16);
B = parseInt(B).toString(16);
if (R.length == 1)
{
R = "0" + R;
}
if (G.length == 1)
{
G = "0" + G;
}
console.log("4");
if (B.length == 1)
{
B = "0" + B;
}
//console.log("#" + R + G + B);
return ("#" + R + G + B);
console.log("5");
}
var windowContent = '<div id="content">';
function contentString (windowContent){
windowContent;
var infowindow = new google.maps.InfoWindow({
content: windowContent
}); return infowindow;
};
//54.78414136681993, -1.5866319722800213
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src =
"http://maps.googleapis.com/maps/api/js?key=AIzaSyA0X5j1MoM3hf3l2-F-HHV6plb5dJOy9Ng&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;

No comments:

Post a Comment