I am trying to use a custom marker on a Google Maps by using a base64 encoded string. Somehow it doesn't work.
Try doing it as follows:
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: 'hello',
id: 'hehehe',
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAA..."
});
Edit: Just complementing: if you're using a server side language to generate the js, you can always insert some PHP/Python/whatever code to load the image and convert it to its base64 representation.
Something like (PHP back-end):
$path = 'path/to/my/image.ext';
$info = getimagesize($info);
$ext = ($info[2]);
$data = file_get_contents($path);
$encoded = 'data:image/' . $ext . ';base64,' .base64_encode($data);
Then (front-end):
var marker = new google.maps.Marker({
//...
icon: '<?=$encoded;?>'
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With