Google mapをWeb表示　ルート表示　(Vue.js)

GoogleMap

APIを使わずにGoogleMapをWebで表示する際、埋め込みでもWebに表示可能です。
その時に、埋め込みのURLで使えるGoogle Map Parametersがあったので下記忘れない様に記載。

すべて無料で使えるのでほぼほぼこちらで表示できるなと思いました。
API利用は従量課金制なので無料で使えるのですが、お金もかかります。

無料でどこまでつかえるのかを追求した結果下記を見つけた様な形です。

パラメーターの記載先

下位URLはパラメーターの記載先です。
https://stackoverflow.com/questions/11354211/google-maps-query-parameter-clarification

経度緯度、クエリで絞り込み

下記記載でURLから指定緯度経度とクエリで場所を表示可能。

const latitude = '35.6818563'
const longitude = '139.775256'
const q = '東京駅'

const map = `https://www.google.com/maps?output=embed&z=15&ll=${latitude},${longitude},13&q=${q}`

 ll= ←緯度経度
 q= ←クエリ

<template>
    <div class="mapn">
        <iframe :src="map"
        style="border:0;" 
        allowfullscreen="false" 
        loading="lazy" 
        referrerpolicy="no-referrer-when-downgrade">    
        </iframe>
    </div>
</template>

経路を表示

下記記載でURLから自動車での経路を表示
※ルートが表示されるのみでルート案内はできません。

const map = `https://www.google.com/maps?output=embed&saddr='東京駅'&daddr='スカイツリー'`

saddr=　←出発点
daddr= ←目的地

<template>
    <div class="mapn">
        <iframe :src="map"
        style="border:0;" 
        allowfullscreen="false" 
        loading="lazy" 
        referrerpolicy="no-referrer-when-downgrade">    
        </iframe>
    </div>
</template>

Google Map Parameters

下記がURLで使えるパラメーターです。
URL先の内容を引用しています。

Google Map Parameters

From Google Mapki (no longer live)

Here's a list of some of the parameters that can be passed to maps.google.com. You might want to pass such parameters if you want to get Google Maps to display driving directions, which are not available under the API.

q= Query - anything passed in the q parameter is treated as if it had been typed into the query box on the maps.google.com page. In particular:
a precise address is looked up and a marker and info box is displayed at the specified point

a town name, or the first half of a postcode causes the region to be displayed with to marker or info box

an exact location can be specified as latitude,longitude, in decimal form (52.123N,2.456W or 52.123,-2.456) or as degrees, minutes and seconds (52 7 22.8N,2 27 21.6W or 52 7 22.8,-2 27 21.6) or as degrees and minutes (52 7.38N,2 27.36W or 52 7.38,-2 27.36).

any text added in parentheses () is displayed in the info window and sidebar in bold, there appears to be no way to cause a line break, but you can use %A0 as a "no break space" to prevent line breaks happening where you don't want them.

the words "to" and "from" cause the driving directions function to be activated.

the word "near" or "loc:" causes the local search function to be activated

space-ampersand-space (use +%26+ or %20%26%20 in URLs, not +&+ or +&+ otherwise the ampersand gets treated as a separator) can be used between the names of two streets to specify an intersection.

A location can also be specified after an at sign, in decimal form (@52.123,-2.456). This gives a lower zoom level than using the same values without the at sign. Using this format interferes with other options of the query parameter. The @ sign instead of "near" or "loc:" tends to cause only a single business result to be displayed, compare (Church near Hallows Road Blackpool, Lancashire) which returns over 1000 results to (Church @ Hallows Road Blackpool, Lancashire) which returns one result.

The full URL of a Google Earth .KML/.KMZ file or a RSS feed that includes GeoRSS data, can be used, and the contained information will be displayed on the map.

ll= Latitude,longitude of map centre - Note the order. Only decimal format is accepted. If this is used without a query, then the map is centred at the point but no marker or info window is displayed

sll= Latitude,longitude of the point from which the business search should be performed. You could use this to perform an off-centre busness search. Google use it so "link to this page" can record a map that has had the centre moved after performing a business search.

spn= Approximate lat/long span. The zoom level will be adjusted to fit if there's no &z parameter. Use this Mapki tool to find a lat and long.
sspn= ?? lat/long of... what?

hl= Host language - only a few languages are supported, e.g. &hl=fr for French.
t= Map Type. The available options are "m" map, "k" satellite, "h" hybrid
saddr= Source address. Use this when asking for driving directions any text added in brackets is displayed in the sidebar in bold

daddr= Destination address(es). Use this when asking for driving directions any text added in brackets is displayed in the sidebar in bold "+to:" clauses can be appended to the destination to request multiple destination routing, like this "&dadr=Blackpool+to:Manchester+to:Leeds" text in brackets can also be added to the "+to:" clauses.

mrad= Additional destination address. If you've got three points in your trip you can use &saddr, &daddr and &mrad instead of "+to:" clauses.
start= Skips the first (start-1) matches

num= Display, at most, this number of matches. The valid range is 0 to 10 (but 0 is a bit pointless).

near= Can be used as the location part of a query instead of putting the whole thing into &q.

f= Controls the style of query form to be displayed. &f=d displays the "directions" form (two input boxes: from, to), &f=l displays the "local" form (two input boxes: what, where). Otherwise the default search form is displayed (single input).

output=html Uses the old style Google Local page format from before it merged with Google Maps, with the small map and large sidebar.

output=js Outputs JavaScript object literals and function calls used by Google Maps, including encoded polyline data for driving directions, and stage information in HTML format.

output=kml Outputs a KML file containing full Placemark information representing the current map.

output=nl Outputs a small KML file containing a NetworkLink wrapper linking to a URL from which Google Earth and Google Maps can obtain the Placemark information.

latlng= This is a weird one. It takes three numbers separated by commas. The first two numbers (presumably representing latitude and longitude multiplied by 1000000) are ignored. The third number seems to be a Google internal "Company ID" number for a particular business. E.g. &latlng=0,0,14944637421527611642 represents Blackpool Community Church. Specifying this parameter performs a Google Search for pages that reference that business, and displays a tiny map. Other parameters, in particular &q, must have valid contents (but need not relate to the target business) for this to work.

cid= Similar to latlng, but generating a different map size. It takes three numbers separated by commas. The first two numbers (presumably representing latitude and longitude multiplied by 1000000) are ignored. The third number seems to be a Google internal "Company ID" number for a particular business. E.g. &cid=0,0,14944637421527611642 represents Blackpool Community Church. Specifying this parameter displays a large map of the identified company location. Other parameters, in particular &q, must have valid contents (but need not relate to the target business) for this to work.

vp= The presence of this parameter causes maps.google.com to switch into Copyright Service mode. Instead of returning the html that draws a map, it returns information about the copyright ownership in Javascript format. The &vp parameter specifies the viewpoint (i.e. the centre of the map). Copyright Service only works when the &spn and &z parameters are also supplied, indicating the span and the zoom. Optional parameters are &t, which specifies the map type, and &key which specifies the API key of the site performing the request. E.g. http://maps.google.com/maps?spn=0.030372,0.068665&z=6&t=h&vp=53.859462,-3.038235

om= The presence of this parameter with a value other than 1 causes the overview map to be closed. If the parameter is omitted, or present with the value 1, then the overview map is open.

ie= Can be used to specify the character set. e.g. &ie=UTF8.

pw= Activates print mode and initiates printing. There seems to be a problem at the moment with &pw=1, but using settings like &pw=2 is OK.
z= Sets the zoom level.

iwloc= Specifies where the infowindow will be displayed. In a business search &iwloc=A to &iwloc=J will open the info window over the corresponding business marker, and &iwloc=near will place it over the big green arrow if that's currently displayed. &iwloc=addr can be used on map search to explicitly request the info window to be open on the address, but that's the default anyway. Directions search supports &iwloc=start, &iwloc=end and &iwloc=pause1 etc.
layer=t Activates the traffic overlay

msa=b Activates the "My Maps" sidebar when used in conjunction with "maps.google.com/ms". It does nothing without the "/ms" and "/ms" does nothing without the "&msa=b".

msa=0 Involved in My Maps processing. Possibly specifies the My Maps server number.

msid= Specifies a My Maps identifier. When used in conjunction with "maps.google.com/ms" and &msa=0, the corresponding My Map is displayed.

mrt=kmlkmz Skips the normal search and goes directly to User-Created Content. Only works if the query contains a location and something to search for. E.g.

q=hotel&near=london&mrt=kmlkmz or q=hotel+in+london&mrt=kmlkmz.

view= Can be used to select text view (view=text) or the normal map view (view=map)
dirflg=h Switches on "Avoid Highways" route finding mode. Retrieved from "http://mapki.com/wiki/Google_Map_Parameters"