Google のｻﾝﾌﾟﾙです｡
https://developers.google.com/maps/documentation/javascript/examples/circle-simple

1)現在地を取得してGoogleMaps上に表示する

はできているようなので以下の変数は設定されているはずです｡

• 地図を表す google.maps.Map
• 中心の位置を表す google.maps.LatLng

それを使って以下のような感じで円が書けます｡

 var circleOpt = {
 strokeColor: '#000000',
 strokeOpacity: 1,
 strokeWeight: 10, // 太さ(ﾋﾟｸｾﾙ)
 fillColor: '#000000',
 fillOpacity: 0,
 map: map, // google.maps.Map
 center: center, // 中心の google.maps.LatLng
 radius: rad // 半径をﾒｰﾄﾙで
 };
 var circle = new google.maps.Circle(circleOpt);

API のﾘﾌｧﾚﾝｽです｡
https://developers.google.com/maps/documentation/javascript/reference#Circle
https://developers.google.com/maps/documentation/javascript/reference#CircleOptions

できるかやったことないですが､まず一番簡単な方法を｡
GMAPのAPIを使うのなら､ﾏｰｶｰ画像を変更できるはずです｡
おそらくその周辺nﾒｰﾄﾙに円を書く処理をすると
相当面倒なｺｰﾄﾞになるでしょう｡
そうではなくﾏｰｶｰ自体を円が既についているﾏｰｶｰにしてしまえばいいのでは？

http://www.nanchatte.com/map/changeMarkerImage.html
こんなｲﾒｰｼﾞ｡青丸をもっと広げて､
真ん中に点がある画像を作って置き換えればどうでしょう
(縮尺はmapに書いてあるのでそれを見てｻｲｽﾞをあわせて画像を作るとか)
まあmapの＋?でﾕｰｻﾞｰが大きさ変えられる場合はつらいですけどね｡


あと他の方法は､ｶﾞｯﾁﾘﾌﾟﾛｸﾞﾗﾑになりますが･･･
考え方として､3)で画像として加工するときに､
ﾄﾘﾐﾝｸﾞして最終的な画像ｻｲｽﾞにするんだと思いますが､
たとえば最終的に300×300の画像の場合､
200×200の円画像を別に用意しておいて画像の左50上50の位置から貼り付けるとか｡
ｳｪﾌﾞ製作のｶﾃｺﾞﾘなのでPHPかjavaかC++かそのあたりでしょうけど､
どの言語でもこの手法は有効でしょう｡面倒ですが｡


画像編集系の操作は複雑だったり､言語によってだいぶ違ったり
ﾆｯﾁな分野で本もﾈｯﾄ情報が乏しいので
ひとつずつ試していくしかないでしょう｡
画像編集を使わずAPIの機能だけでできれば一番楽なんですけどね｡


質問に書かれてる情報ではこのぐらいしか答えられませんが･･･