CODEWITHSUNDEEP
google-mapswebgoogle-maps-api-3
Roland Bengtsson
Roland Bengtsson

Reputation: 5148

Image generator in Googlemaps

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?

Upvotes: 0

Views: 646

Answers (2)

xomena
xomena

Reputation: 32100

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!

Upvotes: 2

b00leant
b00leant

Reputation: 137

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 (:

Upvotes: 0

Related Questions