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

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

ただいまの
回答率

88.13%

JavaScriptにおいて、GoogleMapsでの表示の仕方を変えたい!!

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,480

score 116

はじめまして!
現在、一番下に記載したコードを用い、GoogleMapsにおいて以下のようなXMLファイルのデータを取り出してピンを表示させています。
また、PHPで受け取った緯度・経度の変数(lat,lng)から表示する場所を動的に変更させています。


<markers>
<marker name="ストレッチ" address="岡山駅" lat="35.507458" lng="139.617584" type="stress"/>
<marker name="ランニング" address="京都駅" lat="34.997730" lng="135.726395" type="train"/>
</markers>

そこで今回、PHPから受け取った変数typeのみのピンだけを表示させれる(「変数type=XMLファイルのtype」のmarker)ようにコードを修正したいのですが、上手く出来ません。
このような場合どうすればよいでしょうか?

是非ご教授のほどよろしくお願い申し上げます。


<?php
    
    $lat=$_GET['lat'];
    $lng=$_GET['lng'];
    //$type=$_GET['type'];
    
    $lat=htmlspecialchars($lat);
    $lng=htmlspecialchars($lng);
    //$type=htmlspecialchars($type);

    
    ?>

                        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
                        <script type="text/javascript">
                            //<![CDATA[
                            
                            var customIcons = {
                                weight: {
                                    icon: 'http://略(.png)'
                                },
                                train: {
                                    icon: 'http://略(.png)'
                                },
                                stress: {
                                    icon: 'http://略(.png)'
                                },
                                exercise: {
                                    icon: 'http://略(.png)'
                                }
                            };
                        
                        var lat = <?php echo $lat; ?>;
                        var lng = <?php echo $lng; ?>;
                        //var type = <?php echo $type; ?>;
                                              
                        
                        
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
                        center: new google.maps.LatLng(lat, lng),
                        zoom: 13,
                        mapTypeId: 'roadmap'
                        });
var infoWindow = new google.maps.InfoWindow;
                                                          
                                                         
downloadUrl("http://略(XMLファイル)", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
                         for (var i = 0; i < markers.length; i++) {
                         var name = markers[i].getAttribute("name");
                         var address = markers[i].getAttribute("address");
                         var type = markers[i].getAttribute("type");
                         var point = new google.maps.LatLng(
                                                                                                                  parseFloat(markers[i].getAttribute("lat")),
                                                                                                                  parseFloat(markers[i].getAttribute("lng")));
                         var html = "<b>" + name + "</b> <br/>" + address;
                         var icon = customIcons[type] || {};
                         var marker = new google.maps.Marker({
                         map: map,
                         position: point,
                        icon: icon.icon
                        });
                        bindInfoWindow(marker, map, infoWindow, html);
                                                                      }
                                                                      });
                        }
                        
                        function bindInfoWindow(marker, map, infoWindow, html) {
                            google.maps.event.addListener(marker, 'click', function() {
                                                          infoWindow.setContent(html);
                                                          infoWindow.open(map, marker);
                                                          });
                        }
                        
                        function downloadUrl(url, callback) {
                            var request = window.ActiveXObject ?
                            new ActiveXObject('Microsoft.XMLHTTP') :
                            new XMLHttpRequest;
                            
                            request.onreadystatechange = function() {
                                if (request.readyState == 4) {
                                    request.onreadystatechange = doNothing;
                                    callback(request, request.status);
                                }
                            };
                            
                            request.open('GET', url, true);
                            request.send(null);
                        }
                        
                        function doNothing() {}
                        
                        //]]>
                        
                            </script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

こんな感じでどうでしょうか。
var markerType = '<?php echo $type; ?>';
function load() {
    var infoWindow = new google.maps.InfoWindow;
    downloadUrl("http://略(XMLファイル)", function (data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i=0; i<markers.length; i++) {
            if (markerType == markers[i].getAttribute("type")) {
                var name = markers[i].getAttribute("name");
                var address = markers[i].getAttribute("address");
                var type = markers[i].getAttribute("type");
                var lat = markers[i].getAttribute("lat");
                var lng = markers[i].getAttribute("lng");
                var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
                var html = "<b>" + name + "</b> <br/>" + address;
                var icon = customIcons[type] || {};
                var map = new google.maps.Map(document.getElementById("map"), {
                    center : new google.maps.LatLng(lat, lng), zoom : 13, mapTypeId : 'roadmap' 
                });
                var marker = new google.maps.Marker({
                    map : map, position : point, icon : icon.icon 
                });
                bindInfoWindow(marker, map, infoWindow, html);
                break;
            }
        }
    });
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/12 00:13

    ご回答ありがとうございます!

    早速やってみたのですが、ピンが何故か一つも立たなくなってしまいました(涙)

    キャンセル

0

Javascriptのエラーが出ているかもしれません。
一応全文を載せておきます。
私の方ではピンが表示されます。
<?php
  $type = @$_GET['type'];
  $type = htmlspecialchars($type);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
var customIcons = 
{
    weight : {
        icon : 'http://略(.png)' 
    },
    train : {
        icon : 'http://略(.png)' 
    },
    stress : {
        icon : 'http://略(.png)' 
    },
    exercise : {
        icon : 'http://略(.png)' 
    }
};
var markerType = '<?php echo $type; ?>';
function load() {
    var infoWindow = new google.maps.InfoWindow;
    downloadUrl("http://略(XMLファイル)", function (data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i=0; i<markers.length; i++) {
            if (markerType == markers[i].getAttribute("type")) {
                var name = markers[i].getAttribute("name");
                var address = markers[i].getAttribute("address");
                var type = markers[i].getAttribute("type");
                var lat = markers[i].getAttribute("lat");
                var lng = markers[i].getAttribute("lng");
                var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
                var html = "<b>" + name + "</b> <br/>" + address;
                var icon = customIcons[type] || {};
                var map = new google.maps.Map(document.getElementById("map"), {
                    center : new google.maps.LatLng(lat, lng), zoom : 13, mapTypeId : 'roadmap' 
                });
                var marker = new google.maps.Marker({
                    map : map, position : point, icon : icon.icon 
                });
                bindInfoWindow(marker, map, infoWindow, html);
                break;
            }
        }
    });
}
function bindInfoWindow(marker, map, infoWindow, html) 
{
    google.maps.event.addListener(marker, 'click', function () 
    {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
    });
}
function downloadUrl(url, callback) 
{
    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
    request.onreadystatechange = function () 
    {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
        }
    };
    request.open('GET', url, true);
    request.send(null);
}
function doNothing() {}
$(window).load(function() {
    load();
});
</script>
</head>
<body>
<div id="map" style="width:400px;height:400px;"></div>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る