<script src="//maps.googleapis.com/maps/api/js?key=【APIキー】"></script>
jQuery(()=>{
var map1 = jQuery('#map1')
var map = new google.maps.Map( map1[0], {
center: new google.maps.LatLng(26.698820, 127.933059 ),
zoom: 15 ,
});
});
<div id="map1" style="width:480px;height:320px;"></div>
lat: <span id="lat"></span><br>
lng: <span id="lng"></span><br>
place_id: <span id="place_id"></span><br>
jQuery(()=>{
var map1 = jQuery('#map1')
var map = new google.maps.Map( map1[0], {
center: new google.maps.LatLng(26.698820, 127.933059 ),
zoom: 15 ,
});
map.addListener( "click", function ( argument ) {
console.log( argument ) ;
var latLng = argument.latLng;
var lat = latLng.lat();
var lng = latLng.lng();
var place_id = argument.placeId;
jQuery('#lat').html(lat);
jQuery('#lng').html(lng);
if(place_id == null) place_id = '';
jQuery('#place_id').html(place_id);
}) ;
});
<div id="map1" style="width:640px;height:480px;"></div>
var map; // Mapsオブジェクト
var infoWindow1; // 吹き出しウィンドウ
var marker; // マーカーオブジェクト
jQuery(()=>{
var mapElm = jQuery('#map1')
// 地図を作成
map = new google.maps.Map( mapElm[0], {
center: new google.maps.LatLng(26.698820, 127.933059 ),
zoom: 15 ,
});
// マーカーの作成
marker = new google.maps.Marker( {
map: map ,
position: new google.maps.LatLng( 26.69740142087048, 127.9333379497375 ) ,
}) ;
// アイコンを変更する
marker.setOptions({
icon: {
url: 'icon/sakana.png',
scaledSize: new google.maps.Size(32, 32) // サイズ
}
});
// 吹き出しオブジェクトの作成
infoWindow1 = new google.maps.InfoWindow({
content: '<div class="text-success">テスト<br>畑</div>'
});
// マーカーのクリックイベント
marker.addListener('click', ()=> {
infoWindow1.open(map, marker); // 吹き出し表示
});
});
動的に吹き出しのコンテンツを変更する場合
infoWindow1.setContent("<div>うなご</div>");
HTML
<div id="map1" style="width:640px;height:320px;"></div>
<div>
<input type="checkbox" checked onclick="check1(this, 0)" /> テスト1<br>
<input type="checkbox" checked onclick="check1(this, 1)" /> テスト2<br>
<input type="checkbox" checked onclick="check1(this, 2)" /> テスト3<br>
<input type="checkbox" checked onclick="check1(this, 3)" /> テスト4<br>
<input type="checkbox" checked onclick="check1(this, 4)" /> テスト5<br>
</div>
JavaScript
var m_map; // Mapsオブジェクト
var m_infoWindows = []; // 吹き出しウィンドウ
var m_markers = []; // マーカーオブジェクト
jQuery(()=>{
var mapElm = jQuery('#map1')
// 地図を作成
m_map = new google.maps.Map( mapElm[0], {
center: new google.maps.LatLng(26.698820, 127.933059 ),
zoom: 15 ,
});
// データ
var data = [
{icon:'sakana.png', hukidasi_html:"<span>テスト1</span>", lat:26.69740142, lng:127.9333379},
{icon:'book.png', hukidasi_html:"<span>テスト2</span>", lat:26.7011587, lng:127.938874},
{icon:'inu.png', hukidasi_html:"<span>テスト3</span>", lat:26.70100534, lng:127.9283598},
{icon:'tatunootosigo.png', hukidasi_html:"<span>テスト4</span>", lat:26.69640457, lng:127.927244},
{icon:'tougyu.png', hukidasi_html:"<span>テスト5</span>", lat:26.69723524, lng:127.9286671},
];
for(var i in data){
var ent = data[i];
// マーカーを作成
var marker = new google.maps.Marker( {
map: m_map ,
position: new google.maps.LatLng( ent.lat, ent.lng ) ,
}) ;
// アイコンを変更する
marker.setOptions({
icon: {
url: 'icon/' + ent.icon,
scaledSize: new google.maps.Size(32, 32) // サイズ
}
});
// 吹き出しオブジェクトの作成
var infoWindows = new google.maps.InfoWindow({
content: ent.hukidasi_html
});
m_infoWindows.push(infoWindows);
m_markers.push(marker);
}
// マーカーにクリックイベントを追加
for(var i in data){
markerEvent(i);
}
});
/**
* マーカーにクリックイベントを追加
* @param i インデックス
*/
function markerEvent(i) {
m_markers[i].addListener('click', ()=> {
m_infoWindows[i].open(m_map, m_markers[i]); // 吹き出しの表示
});
}
/**
* チェックボックスのクリックイベント
* @param elm チェックボックス要素
* @param i インデックス
*/
function check1(elm, i){
var elm = jQuery(elm);
if(elm.prop('checked')){
m_markers[i].setVisible(true);
}else{
m_markers[i].setVisible(false);
}
}
<div id="map1" style="width:640px;height:480px;"></div>
var map; // Mapsオブジェクト
var infoWindow1; // 吹き出しウィンドウ
var marker; // マーカーオブジェクト
jQuery(()=>{
var mapElm = jQuery('#map1')
// 地図を作成
map = new google.maps.Map( mapElm[0], {
center: new google.maps.LatLng(26.698820, 127.933059 ),
zoom: 15 ,
});
// マーカーの作成
marker = new google.maps.Marker( {
map: map ,
position: new google.maps.LatLng( 26.69740142087048, 127.9333379497375 ) ,
}) ;
// アイコンを変更する
marker.setOptions({
icon: {
url: 'icon/sakana.png',
scaledSize: new google.maps.Size(32, 32) // サイズ
}
});
// 地図上をクリックしたらマーカーを移動させる
map.addListener( "click", function ( argument ) {
marker.setPosition(argument.latLng);
// var latLng = argument.latLng;
// var lat = latLng.lat();
// var lng = latLng.lng();
//
// var latLng = new google.maps.LatLng( lat, lng);
// marker.setPosition(latLng);
}) ;
});
for(var i in data){
var marker = new google.maps.Marker( ... 略 ...
// マーカーのクリックイベント
google.maps.event.addListener(marker, 'click', function(self, marker, index) {
return function() {
console.log('index=' + index);
self._exsample(index); // 同じクラス内のメソッドを呼び出す thisは使えない。
}}(this, marker,i));
}
マーカーから緯度経度を取得
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
緯度経度をマーカーにセットする
var lat = 26.69740142087048;
var lng = 127.9333379497375;
var latLng = new google.maps.LatLng(lat, lng);
marker.setPosition(latLng);
HTML
<div id="map1" style="width:640px;height:480px;float:left;"></div>
<div style="padding:10px">
<div id="err" class="text-danger"></div>
<div>
<select id="travel_mode">
<option value="DRIVING">自動車</option>
<option value="BICYCLING">自転車</option>
<option value="TRANSIT">電車/公共交通機関</option>
<option value="WALKING">徒歩</option>
</select>
</div>
<div>
距離:<span id="dist1"></span> (<span id="dist2"></span>)
</div>
<div>
時間:<span id="time1"></span> (<span id="time2"></span>)
</div>
<div>
開始住所：<span id="start_address"></span>
</div>
<div>
終了住所：<span id="end_address"></span>
</div>
</div>
JavaScript
var map; // Mapsオブジェクト
var infoWindow1; // 吹き出しウィンドウ
var marker; // マーカーオブジェクト
var marker2; // マーカーオブジェクト
var linePath; // ラインオブジェクト
jQuery(()=>{
var mapElm = jQuery('#map1')
// 地図を作成
map = new google.maps.Map( mapElm[0], {
center: new google.maps.LatLng(26.698820, 127.933059 ),
zoom: 13 ,
});
// マーカーの作成
marker = new google.maps.Marker( {
map: map ,
position: new google.maps.LatLng( 26.69740142087048, 127.9333379497375 ) ,
}) ;
marker2 = new google.maps.Marker( {
map: map ,
position: new google.maps.LatLng( 26.698666640945667, 127.92767312429805 ) ,
}) ;
// アイコンを変更する
marker.setOptions({
icon: {
url: 'icon/sakana.png',
scaledSize: new google.maps.Size(32, 32) // サイズ
}
});
marker2.setOptions({
icon: {
url: 'icon/inu.png',
scaledSize: new google.maps.Size(32, 32) // サイズ
}
});
// 吹き出しオブジェクトの作成
infoWindow1 = new google.maps.InfoWindow({
content: '<div class="text-success">テスト<br>畑</div>'
});
// マーカーのクリックイベント
marker.addListener('click', ()=> {
infoWindow1.open(map, marker); // 吹き出し表示
});
// ▼ 地図上をクリックしたらマーカーを移動、および距離、所要時間、ルートを描画する
map.addListener( "click", function ( argument ) {
jQuery('#err').html('');
// マーカーの位置をクリック位置に移動する。
marker2.setPosition(argument.latLng);
// 開始位置を取得
var origLatLng = marker.getPosition();
var origin = origLatLng.lat() + ',' + origLatLng.lng();
// 終了位置（クリック位置）を取得
var destLatLng = marker2.getPosition();
var destination = destLatLng.lat() + ',' + destLatLng.lng();
// 移動方法を取得
var travel_mode = jQuery('#travel_mode').val();
if(travel_mode == null) return;
// 距離やルート情報を取得する
var directionsService = new google.maps.DirectionsService();
var directionsRequest = {
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode[travel_mode],
unitSystem: google.maps.UnitSystem.METRIC
};
directionsService.route(directionsRequest, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
console.log('routes_count=' + response.routes.length);
if(response.routes[0] == null){
jQuery('#err').append('No root');
return;
}
var route = response.routes[0];
var legs = route['legs'];
console.log('legs_count=' + legs.length);
if(legs[0] == null){
jQuery('#err').append('No root 2');
return;
}
var leg = legs[0];
// 距離：distance: {text: "3.7 km", value: 3693}
// 時間：duration: {text: "6分", value: 342}
var dist1 = leg.distance.text;
var dist2 = leg.distance.value;
var time1 = leg.duration.text;
var time2 = leg.duration.value;
jQuery('#dist1').html(dist1);
jQuery('#dist2').html(dist2);
jQuery('#time1').html(time1);
jQuery('#time2').html(time2);
// 開始住所、終了住所
jQuery('#start_address').html(leg.start_address);
jQuery('#end_address').html(leg.end_address);
// ライン（ルート）をクリアする
if(linePath) linePath.setMap(null);
// ラインを描画する
linePath = new google.maps.Polyline({
path: route.overview_path,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 6
});
linePath.setMap(map);
}
else{
//Error has occured
alert(status);
jQuery('#err').append('アクセスエラー');
jQuery('#err').append(status);
}
});
}) ;
});
<div id="map1" style="width:300px;height:200px;"></div>
<div id="a1" style="width:auto;height:80px;background-color:#b6ebce">
マップを移動します。<br>
<input type="button" value="↓" onclick="test1()" class="btn btn-success" />
<input type="button" value="↑" onclick="test2()" class="btn btn-success" />
</div>
var map; // Mapsオブジェクト
var infoWindow1; // 吹き出しウィンドウ
var marker; // マーカーオブジェクト
jQuery(()=>{
var mapElm = jQuery('#map1')
// 地図を作成
map = new google.maps.Map( mapElm[0], {
center: new google.maps.LatLng(26.698820, 127.933059 ),
zoom: 15 ,
});
// マーカーの作成
marker = new google.maps.Marker( {
map: map ,
position: new google.maps.LatLng( 26.69740142087048, 127.9333379497375 ) ,
}) ;
// アイコンを変更する
marker.setOptions({
icon: {
url: 'icon/sakana.png',
scaledSize: new google.maps.Size(32, 32) // サイズ
}
});
// 吹き出しオブジェクトの作成
infoWindow1 = new google.maps.InfoWindow({
content: '<div class="text-success">テスト<br>畑</div>'
});
// マーカーのクリックイベント
marker.addListener('click', ()=> {
infoWindow1.open(map, marker); // 吹き出し表示
});
});
function test1(){
$('#a1').insertBefore('#map1');
}
function test2(){
$('#a1').insertAfter('#map1');
}
<input type="text" id="address_text" value="東京スカイツリー" />
<input type="button" class="btn btn-success" value="TEST実行" onclick="test1()" />
<div id="err" style="color:red"></div>
<div id="full_address"></div>
<div id="place_id"></div>
<div id="lat_lng"></div>
<div id="map1" style="width:640px;height:480px;"></div>
var map; // Mapsオブジェクト
var infoWindow1; // 吹き出しウィンドウ
var marker; // マーカーオブジェクト
jQuery(()=>{
var mapElm = jQuery('#map1')
// 地図を作成
map = new google.maps.Map( mapElm[0], {
center: new google.maps.LatLng(26.698820, 127.933059 ),
zoom: 15 ,
});
// マーカーの作成
marker = new google.maps.Marker( {
map: map ,
position: new google.maps.LatLng( 26.69740142087048, 127.9333379497375 ) ,
}) ;
});
function test1(){
jQuery('#err').html('');
// 住所、地名、ランドマークなどを入力
var address_text = jQuery('#address_text').val();
// 住所、地名、ランドマークなどから正規住所、プレースID、緯度経度を取得する
var geocoder = new google.maps.Geocoder(); //ジオコーディングのインスタンスの生成
geocoder.geocode({address: address_text}, (results, status) => {
if (status === 'OK' && results[0]){
var result = results[0];
// 地図を住所の位置へ移動させる
map.setCenter(result.geometry.location);
// マーカーを住所の位置へ移動させる
marker.setPosition(result.geometry.location)
// 正規住所
jQuery('#full_address').html(result.formatted_address);
// プレースID
jQuery('#place_id').html('プレースID:' + result.place_id);
// 緯度経度
var lat = result.geometry.location.lat();
var lng = result.geometry.location.lng();
jQuery('#lat_lng').html(lat + ', ' + lng);
}else{
jQuery('#err').html('失敗:' + status);
}
});
}
<script src="//maps.googleapis.com/maps/api/js?key=APIキー"></script>
/**
* 住所から緯度経度を取得する
*
* @note
* 住所、地名、ランドマークなどから正規住所、プレースID、緯度経度を取得する
*
* @param string address_text 住所
* @param function callback コールバック(緯度経度など）
*/
_getLatLngByAddr(address_text, callback){
// ジオコーダーオブジェクトの生成
if(this.geocoder == null){
this.geocoder = new google.maps.Geocoder(); //ジオコーディングのインスタンスの生成
}
var geocoder = this.geocoder;
// 住所から緯度経度などの情報を取得する
geocoder.geocode({address: address_text}, (results, status) => {
if (status === 'OK' && results[0]){
var result = results[0];
// 正規住所
var formatted_address = result.formatted_address;
// プレースID
var place_id = result.place_id;
// 緯度経度
var lat = result.geometry.location.lat();
var lng = result.geometry.location.lng();
// レスポンスに値をセットし、レスポンスをコールバックに渡す
var res = {
formatted_address:formatted_address,
place_id:place_id,
lat:lat,
lng:lng,
};
callback(res);
}else{
var res = {
err:'見つかりませんでした。',
err_status:status
}
callback(res);
}
});
}
<script src="//maps.googleapis.com/maps/api/js?key=APIキー"></script> ～ 略 ～ <input type="text" id="test_tb" value='@26.6944679,127.8773471' style="width:70%" /><br> <button onclick="test()">住所取得</button><br> <div id="res" class="text-success"></div>
function test(){
let latlng_str = jQuery('#test_tb').val();
let res = _strToLatLng(latlng_str);
if(res==null) {
console.log('エラー');
return;
}
let lat = res.lat;
let lng = res.lng;
_getAddrFromLatLng(lat, lng, callback1);
}
/**
* 緯度経度文字列を緯度と経度に分割する
* @param latlng_str 緯度経度文字列
* @returns object 緯度経度
*/
function _strToLatLng(latlng_str){
latlng_str=latlng_str.replace('@', '');
let ary = latlng_str.split(',');
if(ary.length != 2) return null;
let lat = ary[0] + '';
let lng = ary[1] + '';
lat = lat.trim();
lng = lng.trim();
return {lat:lat, lng:lng};
}
function callback1(res){
let addr = res.formatted_address;
jQuery('#res').html(addr);
}
/**
* 緯度経度から住所を取得する
*
* @param function callback コールバック(緯度経度など）
*/
function _getAddrFromLatLng(lat, lng, callback){
// ジオコーダーオブジェクトの生成
if(this.geocoder == null){
this.geocoder = new google.maps.Geocoder(); //ジオコーディングのインスタンスの生成
}
var geocoder = this.geocoder;
let latLng = new google.maps.LatLng( lat, lng );
// 住所から緯度経度などの情報を取得する
geocoder.geocode({latLng: latLng}, (results, status) => {
if (status === 'OK' && results[0]){
var result = results[0];
// 正規住所
var formatted_address = result.formatted_address;
// プレースID
var place_id = result.place_id;
// 緯度経度
var lat = result.geometry.location.lat();
var lng = result.geometry.location.lng();
// レスポンスに値をセットし、レスポンスをコールバックに渡す
var res = {
formatted_address:formatted_address,
place_id:place_id,
lat:lat,
lng:lng,
};
callback(res);
}else{
var res = {
err:'見つかりませんでした。',
err_status:status
}
callback(res);
}
});
}
<div id="map1" style="width:640px;height:480px;"></div>
<table class="tbl2"><tbody>
<tr><td id="l_t">xxx</td><td></td><td id="r_t">xxx</td></tr>
<tr><td></td><td id="center">xxx</td><td></td></tr>
<tr><td id="l_b">xxx</td><td></td><td id="r_b">xxx</td></tr>
</tbody></table>
var map; // Mapsオブジェクト
var infoWindow1; // 吹き出しウィンドウ
var marker; // マーカーオブジェクト
jQuery(()=>{
var mapElm = jQuery('#map1')
// 地図を作成
map = new google.maps.Map( mapElm[0], {
center: new google.maps.LatLng(26.698820, 127.933059 ),
zoom: 15 ,
});
// マーカーの作成
marker = new google.maps.Marker( {
map: map ,
position: new google.maps.LatLng( 26.69740142087048, 127.9333379497375 ) ,
}) ;
// アイコンを変更する
marker.setOptions({
icon: {
url: 'icon/sakana.png',
scaledSize: new google.maps.Size(32, 32) // サイズ
}
});
// 吹き出しオブジェクトの作成
infoWindow1 = new google.maps.InfoWindow({
content: '<div class="text-success">テスト<br>畑</div>'
});
// ▼ マップ読込完了イベント
google.maps.event.addListener(map, 'bounds_changed', function() {
// 中央座標
var latLng = map.getBounds().getCenter();
var lat = latLng.lat();
var lng = latLng.lng();
jQuery('#center').html(lat + ', ' + lng);
// 左上
var lat = map.getBounds().getNorthEast().lat();
var lng = map.getBounds().getNorthEast().lng();
jQuery('#r_t').html(lat + ', ' + lng);
// 右下
var lat = map.getBounds().getSouthWest().lat();
var lng = map.getBounds().getSouthWest().lng();
jQuery('#l_b').html(lat + ', ' + lng);
});
// マーカーのクリックイベント
marker.addListener('click', ()=> {
infoWindow1.open(map, marker); // 吹き出し表示
});
// 地図上をクリックしたらマーカーを移動させる
map.addListener( "click", function ( argument ) {
marker.setPosition(argument.latLng);
var latLng = argument.latLng;
var lat = latLng.lat();
var lng = latLng.lng();
// 中央座標
jQuery('#center').html(lat + ', ' + lng);
// 左上
var lat = map.getBounds().getNorthEast().lat();
var lng = map.getBounds().getNorthEast().lng();
jQuery('#r_t').html(lat + ', ' + lng);
// 右下
var lat = map.getBounds().getSouthWest().lat();
var lng = map.getBounds().getSouthWest().lng();
jQuery('#l_b').html(lat + ', ' + lng);
}) ;
});
var visible = marker.getVisible();
if(visible == true){
marker.setVisible(false);
}else{
marker.setVisible(true);
}