CODEWITHSUNDEEP
jquerygoogle-mapsgoogle-maps-api-3google-maps-markersgoogle-maps-api-2
vmb
vmb

Reputation: 3028

How to create circle overlay with text-Google map

I want to create a circle overlay in google map with text inside it.How can i do this.

   map = new google.maps.Map(document.getElementById('map'), options);

var circle = new google.maps.Circle({
    center: centerPosition,
    map: map,
    fillColor: '#0000FF',
    fillOpacity: 0.5,
    strokeColor: '#0000FF',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    draggable:true
});

I will share fiddle for this. http://jsfiddle.net/pVh3b/434/

I need a circle with text as shown belowenter image description here

Text also should move when it is dragging.Can anyone please help on this

Upvotes: 3

Views: 6276

Answers (1)

fitch496
fitch496

Reputation: 211

Here is something that should get you started:

http://jsfiddle.net/MSY9a/1/

Using Infobox to create a text box in the center of the circle and adding a circle center_changed listener to update the position of the box.

google.maps.event.addListener(circle, 'center_changed', function () {
    label.setPosition(circle.getCenter());
});

I hope it helps! Cheers.

Edit: You can change the appearance of the box with CSS. Also, removing the option 'pane: "mapPane"' seems to put it above the circle. Here is something that looks a little bit more like your example: http://jsfiddle.net/MSY9a/2/

Edit 2: Previously linked fiddle used external Infobox link that was since removed. Updated fiddle, links to Infobox on GitHub: http://jsfiddle.net/MSY9a/291/

Upvotes: 5

Related Questions