Image generator in Googlemaps - google-maps

Question

I wonder how I can generate an image, actually a small circle
with color and number as parameter in Googlemaps?
So for example
MakeImage($FF0000, 5)
Will draw a red circle with number 5 in centre.
What is the best approach without pregenerate all possible
combinations as image-files?

Answer 1

In order to achieve this you can create an icon as Symbol interface and combine it with MarkerLabel. Note the presense of the property labelOrigin in the Symbol interface, it defines where you will put the label.
To demonstrate this approach I used the built-in SVG path google.maps.SymbolPath.CIRCLE. Have a look at the following example and run it to see circle Marker with number.
function initMap() {
var myLatLng = {lat: 47.363362, lng: 8.485823};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!',
icon: {
fillColor: "#FF0000",
strokeColor: "#FF0000",
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
labelOrigin: new google.maps.Point(0,0)
},
label: {
text: "5",
color: "white",
fontWeight: "bold",
fontSize: "16px"
}
});
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap">
</script>
I hope this helps!

Answer 2

I suggest you to use custom markers, here and here you can find a well documented API and it's explained how to make markers with bitmaps and svg graphics. I suggest to use SVG path notation like this:
var map;
var my_location = { lat: 12.97, lng: 77.59 };
icon = {
//this is a string that define a circle path
path: "M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0",
//this is a string that defines a hex color
fillColor: '#FF0000',
//this is a float that defines the opacity value from 0.0 to 1
fillOpacity: .6,
//this is a couple that defines a center point for the SVG
anchor: new google.maps.Point(0,0),
//this is a integer that defines the scale factor
};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(-33.91722, 151.23064),
mapTypeId: 'roadmap'
});
function makeMarkerWithImageCircle(text,location){
var iconUrl = 'https://your_circl_image_url.png';
var marker = new google.maps.Marker({
position: location,
label: text,
icon: iconUrl,
map: map
});
}
function makeMarkerWithSVGCircle(text,location){
var marker = new google.maps.Marker({
position: location,
label: text,
draggable: false,
icon: icon,
map: map
});
}
//method to generate marker with custom image url and text
makeMarkerWithImageCircle("text",my_location);
//method to generate marker with custom svg and text
makeMarkerWithSVGCircle("text",my_location);
I guess you have your initMap() method wherein you initialise a Map instance
Then you can make your custom function to instantiate a custom Marker inside the Map map with a SVG as your icon property.
I didn't run this script, just wrote to explain how you can do this.
Have a nice day and I hope this was helpful (: