googlemapとmysqlについて
- 評価
- クリップ 0
- VIEW 1,484
---###前提・実現したいこと
springbootでgooglemapの接続した画面を作成しています。
mysqlのDB上で登録した住所に基づいて、その住所の場所がgooglemap上に表示させたいのですが
googlemapすら表示されずうまくいきません。
おそらくjsファイルのソースの
・main.js
geocoder.geocode(
{
'address': address,//検索する住所 〒◯◯◯-◯◯◯◯ 住所 みたいな形式でも検索できる
'region': 'jp'
}
の箇所で、mysqlの登録した住所の情報を入れたら、登録した住所の情報を所得できると思ってます。
どのように処理すれば登録した住所の情報を所得できるでしょうか?
ご回答のほど宜しくお願い致します
・HeloController
package com.tuyano.springboot;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;
import com.tuyano.springboot.repositories.MyDataMongoRepository;
@Controller
public class HeloController {
@Autowired
MyDataMongoRepository repository;
@RequestMapping(value="/",method=RequestMethod.GET)
public ModelAndView index(@ModelAttribute("formModel")MyDataMongo mydatamongo,ModelAndView mav){
mav.setViewName("index");
mav.addObject("title","Find Page");
mav.addObject("msg","サンプルです");
List<MyDataMongo> list=repository.findAll();
mav.addObject("datalist",list);
System.out.println(mav);
return mav;
}
@RequestMapping(value="/",method=RequestMethod.POST)
public ModelAndView form(
@ModelAttribute("formModel")MyDataMongo mydatamongo,ModelAndView mav){
repository.saveAndFlush(mydatamongo);
mav =new ModelAndView("redirect:/");
System.out.println("mov"+mav);
return mav;
}
@RequestMapping(value="/first",method=RequestMethod.GET)
public ModelAndView find(@ModelAttribute("formModel")MyDataMongo mydatamongo,ModelAndView mav){
mav.setViewName("first");
mav.addObject("title","Find Page");
mav.addObject("msg","サンプルです");
mav.addObject("value","");
List<MyDataMongo> list=repository.findAll();
mav.addObject("datalist",list);
System.out.println(mav);
return mav;
}
@RequestMapping(value="/first",method=RequestMethod.POST)
public ModelAndView search(@RequestParam("name")String param,ModelAndView mav){
//mav.setViewName("first");
if(param ==""){
mav =new ModelAndView("redirect:/first");
}else{
System.out.println("param"+param);
mav.addObject("title","Find Result");
mav.addObject("msg","["+param+"]の検索結果");
mav.addObject("value",param);
List<MyDataMongo> list=repository.findByName(param);
System.out.println(list);
mav.addObject("dataList",list);
//mav.setViewName("login");
mav.setViewName("login");
}
System.out.println(mav);
//mav =new ModelAndView("redirect:/login");
return mav;
}
@RequestMapping(value="/login",method=RequestMethod.GET)
public ModelAndView login(ModelAndView mav){
mav.addObject("title","Find Page");
mav.addObject("msg","loginです");
mav.addObject("value","loginページです");
System.out.println(mav);
return mav;
}
}
・MyDataMongo.java
package com.tuyano.springboot;
import java.util.Date;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Entity
@Table(name="Linefriend")
public class MyDataMongo {
@Id
@GeneratedValue(strategy=GenerationType.AUTO)
@Column
private Long id;
@Column
private String name;
@Column
private String password;
@Column
private String address;
//
public MyDataMongo() {
this.name="田中";
this.password="田中";
this.address="田中";
}
public void setId(Long id){
this.id=id;
}
public Long getId(){
return id;
}
public String getName(){
return name;
}
public void setName(String name){
this.name=name;
}
public String getPassword(){
return password;
}
public void setPassword(String password){
this.password=password;
}
public String getAddress(){
return address;
}
public void setAddress(String address){
this.address=address;
}
}
・main.js
function drawMap(address) {
var geocoder = new google.maps.Geocoder();
//住所から座標を取得する
geocoder.geocode(
{
'address': address,//検索する住所 〒◯◯◯-◯◯◯◯ 住所 みたいな形式でも検索できる
'region': 'jp'
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
google.maps.event.addDomListener(window, 'load', function () {
var map_tag = document.getElementById('map');
// 取得した座標をセット緯度経度をセット
var map_location = new google.maps.LatLng(results[0].geometry.location.lat(),results[0].geometry.location.lng());
//マップ表示のオプション
var map_options =
{
zoom: 13,//縮尺
center: map_location,//地図の中心座標
//ここをfalseにすると地図上に人みたいなアイコンとか表示される
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP//地図の種類を指定
};
//マップを表示する
var map = new google.maps.Map(map_tag, map_options);
//地図上にマーカーを表示させる
var marker = new google.maps.Marker({
position: map_location,//マーカーを表示させる座標
map: map//マーカーを表示させる地図
});
});
}
}
);
}
・MyDataMongoRepository.java
package com.tuyano.springboot.repositories;
import java.util.List;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import com.tuyano.springboot.MyDataMongo;
@Repository
public interface MyDataMongoRepository extends JpaRepository<MyDataMongo,String>{
public List<MyDataMongo> findByName(String s);
}
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
まだ回答がついていません
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 89.98%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正の依頼
popobot
2016/09/11 22:12
質問の意図がわかりません。コードを見るとresultsに緯度経度などの情報が入ってくるように見えますが、うまくいかないということでしょうか?
osmoc-1970
2016/09/16 13:58
javaサーブレットの呼び出し方がわからないということにもよめますが、でしたらjavaというタブを追加して質問されてはいかがでしょうか。javaとJavaScript はまったく別物です。
heavyuseman
2016/09/18 20:27 編集
>icchiiさん
返信が遅れてしまい申しわけありません。
'address': addressの場所にMysqlで登録した住所に関するコードを記載し、
googlemap上にその住所が表示されるようにしたいです。
この場合、何かAPIなどを作って、Mysqlの情報を取ってくると思ったのですが、
どのようにして取得すればいいのか悩んでいます
heavyuseman
2016/09/18 20:30
>osmoc-1970さん
返信が遅れてしまい申しわけありません。
ご指摘を受けましたようにjavaのタブを追加しておきましたので宜しくお願いします