Hi, there！ SAmmysだよ！
Yewで作成中のアプリに地図を使う部分があって、その部分をleaflet使って実装したよ。
leaflet クレートを使った Example もあるけど、その中の記述のままだと最新バージョンではエラーが出ちゃうから、せっかくだしここでザッと最描画部分のコンポーネントの最小限な部分だけ書いちゃうね。
キミならこれ見れば実装できちゃうよ💡

Map型の変数mapとTileLayerは各自で好きなように作ってね。
以下、上記map変数の使い方とか記載。

◆任意の緯度・経度の座標にピンを立てる場合

let marker = leaflet::Marker::new(&LatLng::new(35.861683,139.645676));
marker.add_to(&map);

はい、愛するさいたま市の市役所にピンが経ちました。

◆任意の緯度・経度にコメントも立てる場合

let marker = leaflet::Marker::new(&LatLng::new(35.861683,139.645676));
let popup_options = leaflet::PopupOptions::new();
// popup_options.set_max_width(10.0); // もし横幅に制限つけたければ
// popup_options.set_max_height(30.0);  // もし高さに制限つけたければ
// popup_options.set_keep_in_view(true); // ユーザー操作時に画面移動させても描画内に必ずPopupを表示させたければ
let popup: leaflet::Popup = leaflet::Popup::new_with_lat_lng(
    &LatLng::new(35.861683,139.645676),
    &popup_options
);
popup.set_content(&wasm_bindgen::JsValue::from("さいたま市の市役所です"));
marker.add_to(&map).bind_popup(&popup).open_popup();

はい、ご覧のとおりです。

◆任意の緯度・経度を中心に円を描く場合

let circle_option = leaflet::CircleOptions::new();
circle_option.set_radius(17.0);
let circle = leaflet::Circle::new_with_options(
    &LatLng::new(35.861683,139.645676),
    &circle_option
);
circle.add_to(map);

市役所内に円形の結界が張られました（笑）

▲ もし色を変えたければ、すぐ下の線の色指定を参考にしてね。

◆任意の２点間を線で結ぶ場合（色と太さ指定付き）

let mut latlngs = js_sys::Array::new();
for item in [LatLng::new(35.861683,139.645676), LatLng::new(35.62416667,135.0611111)].iter() {
    latlngs.push(&wasm_bindgen::JsValue::from(item));
}
let polyline_option = leaflet::PolylineOptions::new();
polyline_option.set_color("#1DFFD0".to_string()); // ここで色指定してるよ！
polyline_option.set_weight(8.0); // ここで太さ指定してるよ！
let polyline = leaflet::Polyline::new_with_options(
    &latlngs,
    &polyline_option
);
polyline.add_to(map);

愛する京丹後市とさいたま市が太い絆で結ばれました。
（ヘリコプターで行くと一度日本海またぎそう！）

ということで、地図関連は色々なアプリでも使えるから参考にしてみてね。
ちなみに、GoogleMap は API Key 使ったリクエスト回数でコストかかっちゃうから僕は見送ったよ。
See ya!