質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
pgAdmin

pgAdminは、オープンソースのPostgreSQL管理ツール。様々な機能を持ち、コマンドラインベースでPostgreSQLへ行う操作のほとんどをpgAdminを用いて実行することができます。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Q&A

0回答

377閲覧

GoogleMap APIを使ったMap表示について

yo-gult

総合スコア0

pgAdmin

pgAdminは、オープンソースのPostgreSQL管理ツール。様々な機能を持ち、コマンドラインベースでPostgreSQLへ行う操作のほとんどをpgAdminを用いて実行することができます。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

0グッド

0クリップ

投稿2023/02/06 07:09

実現したいこと

area[i][1]とarea[i][2]がNULLならばピンは出さないGoogleMapだけを表示して、NULLじゃなければ複数の場所をピンで表示したい

前提

Djangoを使ってGoogleMapを表示するシステムを作成しています。
配列の使い方などがあっているのか、心配なところと、ピンで表示がされないのでそこを解決したいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<map_event_search.html>
{% extends 'base.html' %}
{% load static %}

{% block title %}周辺イベント | EVRE{% endblock %}

{% block active_map_event_search %}active{% endblock %}

{% block head %}

<link href="{% static 'css/clean-blog.css' %}" rel="stylesheet"> <link href="{% static 'css/mystyle.css' %}" rel="stylesheet"> {% endblock %}

{% block contents %}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXrLk1rTefMBJYc5KoOKALXE6Cha-C_3Y&callback=initMap" async defer ></script> <div class="container"> <div class="row"> <div class="my-div-style w-100"> <div class="col-lg-8 col-md-10 mx-auto"> <input type="text" class="eventsearch" placeholder="イベントを検索"> <button onclick="location.href='http://127.0.0.1:8000/map_filter'" class="siborikomi_button"><p class="button_size">絞り込み</p></button> </div> <div id="local_map"> <script> var map; console.log("aaaaaaaa"); var area = [ {% for info in event_info %}
['{{ info.area }}','{{ info.lat }}','{{ info.lon }}'], {% endfor %} ]; for (var i = 0; i < 2; i++) { for (var j = 0; j < 3; j++) { console.log("+++"); } }

console.log("bbbbbbb");
console.log(area[0]['lng']);

if (!area[0][1] == 'None' && area[0][2] == 'None') { //alert("true") function initMap() { map = new google.maps.Map(document.getElementById('local_map'), { center: { lat: 34.7019399, lng: 135.51002519999997 }, zoom: 19 // 地図のズームを指定 });} }else { var marker = []; var infoWindow = []; function initMap() { // 地図の作成 var mapLatLng = new google.maps.LatLng({lat: Number(area[0][1]), lng: Number(area[0][2])}); // 緯度経度のデータ作成 map = new google.maps.Map(document.getElementById('local_map'), { // #sampleに地図を埋め込む center: mapLatLng, // 地図の中心を指定 zoom: 15 // 地図のズームを指定 }); // マーカー毎の処理 for (var i = 0; i < area.length; i++) { if(!(isNaN(area[i][1]) || isNaN(area[i][2]))) { markerLatLng = new google.maps.LatLng({lat: area[i][1], lng: area[i][2]}); // 緯度経度のデータ作成 marker[i] = new google.maps.Marker({ // マーカーの追加 position: markerLatLng, // マーカーを立てる位置を指定 map: map // マーカーを立てる地図を指定 }); infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加 content: '<div class="sample">' + area[i][0] + '</div>' // 吹き出しに表示する内容 }); markerEvent(i); // マーカーにクリックイベントを追加 } } } // マーカーにクリックイベントを追加 function markerEvent(i) { marker[i].addListener('click', function() { // マーカーをクリックしたとき infoWindow[i].open(map, marker[i]); // 吹き出しの表示 }); } </script> </div> </div> </div>
</div> {% endblock %}

<views.py>
class Map_Event_SearchView(generic.TemplateView):
model = Event
template_name = "map_event_search.html"

def get_context_data(self, **kwargs): context = super(Map_Event_SearchView, self).get_context_data() context['event_info'] = Event.objects.all() context['event_count'] = len(Event.objects.all()) return context

<models.py>
class Event(models.Model):
"""イベントテーブル"""

event_id = models.AutoField(verbose_name='イベントID', primary_key=True) event_name = models.CharField(verbose_name='イベント名', max_length=254) tel_number_regex = RegexValidator(regex=r'^[0-9]+$', message=("Tel Number must be entered in the format: '09012345678'. Up to 15 digits allowed.")) tel_number = models.CharField(validators=[tel_number_regex], max_length=15, verbose_name='電話番号') start_date = models.DateField(verbose_name='開始日時') end_date = models.DateField(verbose_name='終了日時') start_time = models.TimeField(verbose_name='開始時間') end_time = models.TimeField(verbose_name='終了時間') area = models.CharField(verbose_name='場所', max_length=254) lat = models.FloatField(verbose_name='経度', max_length=20, null=True) lon = models.FloatField(verbose_name='緯度', max_length=20, null=True) summary = models.CharField(verbose_name='概要', max_length=254) price = models.IntegerField(verbose_name='入場料') update_date = models.DateField(verbose_name='更新日', null=True) twitter_link = models.CharField(verbose_name='公式Twitter', max_length=254, null=True) instagram_link = models.CharField(verbose_name='公式Instagram', max_length=254, null=True) event_link = models.CharField(verbose_name='公式URL', max_length=254) event_image1 = models.ImageField(verbose_name='画像1', max_length=254, null=True ) event_image2 = models.ImageField(verbose_name='画像2', max_length=254, null=True, blank=True) event_image3 = models.ImageField(verbose_name='画像3', max_length=254, null=True, blank=True) event_image4 = models.ImageField(verbose_name='画像4', max_length=254, null=True, blank=True) event_image5 = models.ImageField(verbose_name='画像5', max_length=254, null=True, blank=True) sports = models.BooleanField(verbose_name='スポーツ', null=True, default=False) anime = models.BooleanField(verbose_name='アニメ', null=True, default=False) game = models.BooleanField(verbose_name='ゲーム', null=True, default=False) animal = models.BooleanField(verbose_name='動物', null=True, default=False) exhibition = models.BooleanField(verbose_name='展示会', null=True, default=False) art_exhibition = models.BooleanField(verbose_name='美術展', null=True, default=False) show = models.BooleanField(verbose_name='ショー', null=True, default=False) hanami = models.BooleanField(verbose_name='花見', null=True, default=False) department_store = models.BooleanField(verbose_name='デパートイベント', null=True, default=False) firework = models.BooleanField(verbose_name='花火', null=True, default=False) hands_on = models.BooleanField(verbose_name='体験型', null=True, default=False) science = models.BooleanField(verbose_name='科学', null=True, default=False) history = models.BooleanField(verbose_name='歴史', null=True, default=False) traditional_culture = models.BooleanField(verbose_name='伝統芸能', null=True, default=False) free_market = models.BooleanField(verbose_name='フリマ', null=True, default=False) product_exhibition = models.BooleanField(verbose_name='物産展', null=True, default=False) sweets = models.BooleanField(verbose_name='スイーツ', null=True, default=False) gourmet = models.BooleanField(verbose_name='グルメ', null=True, default=False) local_cuisine = models.BooleanField(verbose_name='郷土料理', null=True, default=False) school_fes = models.BooleanField(verbose_name='学祭', null=True, default=False) summer_fes = models.BooleanField(verbose_name='夏祭り', null=True, default=False) music = models.BooleanField(verbose_name='音楽', null=True, default=False) child = models.BooleanField(verbose_name='子供向け', null=True, default=False) art = models.BooleanField(verbose_name='芸術', null=True, default=False) picking = models.BooleanField(verbose_name='味覚狩り', null=True, default=False) class Meta: verbose_name_plural = 'Event' def __str__(self): return str(self.event_name)

試したこと

配列を色々いじってやりましたが、難しくてうまくできなかった
2週間くらい試行錯誤していますが、全然できません。
ほんとにお願いします

補足情報(FW/ツールのバージョンなど)

pgAdmin使ってます

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問