在Google Maps API中加载具有正确呈现彩色光盘地标的KML

Question

I am using this piece of code to load a KML file in GoogleMapsAPI:

<script>
function googleMapInitialize() {
  var myOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var myMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var ctaLayer = new google.maps.KmlLayer('http://www.freemages.fr/test/session_k.kml');
  ctaLayer.setMap(myMap);
}
</script>

While it works properly to load the points, the style I have defined is not rendered properly, as it uses a white disc in PNG format that is supposed to be re-colorized according to the color parameter, and also a resizing of the picture according to the scale parameter:

<Style id="sn_style_0">
    <IconStyle>
        <color>FF4ea24a</color>
        <scale>0.4</scale>
        <Icon>
            <href>http://www.freemages.fr/test/disc.png</href>
        </Icon>
    </IconStyle>
    <LabelStyle>
        <scale>0.5</scale>
    </LabelStyle>
</Style>
<Style id="sh_style_0">
    <IconStyle>
        <color>FF4ea24a</color>
        <scale>0.5</scale>
        <Icon>
            <href>http://www.freemages.fr/test/disc.png</href>
        </Icon>
    </IconStyle>
    <LabelStyle>
        <scale>0.5</scale>
    </LabelStyle>
</Style>
<StyleMap id="msn_style_0">
    <Pair>
        <key>normal</key>
        <styleUrl>#sn_style_0</styleUrl>
    </Pair>
    <Pair>
        <key>highlight</key>
        <styleUrl>#sh_style_0</styleUrl>
    </Pair>
</StyleMap>

Google Earth can render properly this kind of style and it works very nicely.

In my project, I want to let the user choose exactly the color he wants, so I cannot use a collection of colored discs that I would use without recoloring, which otherwise would be a simple option.

I also tried to use a dynamic creation of PNG transparent disc in PHP using the following code, but PHP does not manage transparency very well and it does not display properly in the file:

<?php
header('Content-type: image/png');

$r = $_GET["r"];
$fg = $_GET["fg"];

is_numeric($r) or $r = 16; // radius
strlen($fg)==6 or $fg = '22e822'; // fill color
$bg = 'ffffff';

function hex2rgb($im,$hex) {
    return imagecolorallocate($im,
        hexdec(substr($hex,0,2)),
        hexdec(substr($hex,2,2)),
        hexdec(substr($hex,4,2))
        );
}

$d = $r*2;
$dm = $d-4;

$im1 = imagecreatetruecolor($d,$d);
imagecolortransparent($im1, hex2rgb($im1,$bg));
imagefill($im1,0,0,hex2rgb($im1,$bg));
imagefilledellipse($im1, $r, $r, $dm, $dm, hex2rgb($im1,$fg));
imagepng($im1);
?>

Ideally if it could be possible just to create a colored disc by code in the KML file it would be the best, but I did not find any way to do so in the documentation.

Any suggestion how to workaround this issue?

Thanks!

Answer 1

Take a look at the 'styledmarker' in the google-maps-utility-library-v3. http://code.google.com/p/google-maps-utility-library-v3/

It will let you control the icon styles programatically. http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/

For example, changing color http://google-maps-utility-library-v3.googlecode.com/svn/trunk/styledmarker/examples/change_color.htm