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

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

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

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

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

javascript
1<?php
2    
3    $lat=$_GET['lat'];
4    $lng=$_GET['lng'];
5    //$type=$_GET['type'];
6    
7    $lat=htmlspecialchars($lat);
8    $lng=htmlspecialchars($lng);
9    //$type=htmlspecialchars($type);
10
11    
12    ?>
13
14                        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
15                        <script type="text/javascript">
16                            //<![CDATA[
17                            
18                            var customIcons = {
19                                weight: {
20                                    icon: 'http://略(.png)'
21                                },
22                                train: {
23                                    icon: 'http://略(.png)'
24                                },
25								stress: {
26                                    icon: 'http://略(.png)'
27                                },
28                                exercise: {
29                                    icon: 'http://略(.png)'
30                                }
31                            };
32                        
33                        var lat = <?php echo $lat; ?>;
34                        var lng = <?php echo $lng; ?>;
35                        //var type = <?php echo $type; ?>;
36                                              
37                        
38                        
39function load() {
40var map = new google.maps.Map(document.getElementById("map"), {
41                        center: new google.maps.LatLng(lat, lng),
42                        zoom: 13,
43                        mapTypeId: 'roadmap'
44                        });
45var infoWindow = new google.maps.InfoWindow;
46                                                          
47                                                         
48downloadUrl("http://略(XMLファイル)", function(data) {
49var xml = data.responseXML;
50var markers = xml.documentElement.getElementsByTagName("marker");
51                         for (var i = 0; i < markers.length; i++) {
52                         var name = markers[i].getAttribute("name");
53                         var address = markers[i].getAttribute("address");
54                         var type = markers[i].getAttribute("type");
55                         var point = new google.maps.LatLng(
56                                                                                                                  parseFloat(markers[i].getAttribute("lat")),
57                                                                                                                  parseFloat(markers[i].getAttribute("lng")));
58                         var html = "<b>" + name + "</b> <br/>" + address;
59                         var icon = customIcons[type] || {};
60                         var marker = new google.maps.Marker({
61                         map: map,
62                         position: point,
63                        icon: icon.icon
64                        });
65                        bindInfoWindow(marker, map, infoWindow, html);
66                                                                      }
67                                                                      });
68                        }
69                        
70                        function bindInfoWindow(marker, map, infoWindow, html) {
71                            google.maps.event.addListener(marker, 'click', function() {
72                                                          infoWindow.setContent(html);
73                                                          infoWindow.open(map, marker);
74                                                          });
75                        }
76                        
77                        function downloadUrl(url, callback) {
78                            var request = window.ActiveXObject ?
79                            new ActiveXObject('Microsoft.XMLHTTP') :
80                            new XMLHttpRequest;
81                            
82                            request.onreadystatechange = function() {
83                                if (request.readyState == 4) {
84                                    request.onreadystatechange = doNothing;
85                                    callback(request, request.status);
86                                }
87                            };
88                            
89                            request.open('GET', url, true);
90                            request.send(null);
91                        }
92                        
93                        function doNothing() {}
94                        
95                        //]]>
96                        
97                            </script>

行動規範の内容に同意します

回答2件

Javascriptのエラーが出ているかもしれません。
一応全文を載せておきます。
私の方ではピンが表示されます。

Javascript
1<?php
2  $type = @$_GET['type'];
3  $type = htmlspecialchars($type);
4?>
5<!DOCTYPE html>
6<html>
7<head>
8<meta charset="utf-8">
9<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
10<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
11<script type="text/javascript">
12var customIcons = 
13{
14    weight : {
15        icon : 'http://略(.png)' 
16    },
17    train : {
18        icon : 'http://略(.png)' 
19    },
20    stress : {
21        icon : 'http://略(.png)' 
22    },
23    exercise : {
24        icon : 'http://略(.png)' 
25    }
26};
27var markerType = '<?php echo $type; ?>';
28function load() {
29    var infoWindow = new google.maps.InfoWindow;
30    downloadUrl("http://略(XMLファイル)", function (data) {
31        var xml = data.responseXML;
32        var markers = xml.documentElement.getElementsByTagName("marker");
33        for (var i=0; i<markers.length; i++) {
34            if (markerType == markers[i].getAttribute("type")) {
35                var name = markers[i].getAttribute("name");
36                var address = markers[i].getAttribute("address");
37                var type = markers[i].getAttribute("type");
38                var lat = markers[i].getAttribute("lat");
39                var lng = markers[i].getAttribute("lng");
40                var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
41                var html = "<b>" + name + "</b> <br/>" + address;
42                var icon = customIcons[type] || {};
43                var map = new google.maps.Map(document.getElementById("map"), {
44                    center : new google.maps.LatLng(lat, lng), zoom : 13, mapTypeId : 'roadmap' 
45                });
46                var marker = new google.maps.Marker({
47                    map : map, position : point, icon : icon.icon 
48                });
49                bindInfoWindow(marker, map, infoWindow, html);
50                break;
51            }
52        }
53    });
54}
55function bindInfoWindow(marker, map, infoWindow, html) 
56{
57    google.maps.event.addListener(marker, 'click', function () 
58    {
59        infoWindow.setContent(html);
60        infoWindow.open(map, marker);
61    });
62}
63function downloadUrl(url, callback) 
64{
65    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
66    request.onreadystatechange = function () 
67    {
68        if (request.readyState == 4) {
69            request.onreadystatechange = doNothing;
70            callback(request, request.status);
71        }
72    };
73    request.open('GET', url, true);
74    request.send(null);
75}
76function doNothing() {}
77$(window).load(function() {
78    load();
79});
80</script>
81</head>
82<body>
83<div id="map" style="width:400px;height:400px;"></div>
84</body>
85</html>

投稿2015/08/12 00:59

退会済みユーザー

総合スコア0

こんな感じでどうでしょうか。

Javascript
1var markerType = '<?php echo $type; ?>';
2function load() {
3    var infoWindow = new google.maps.InfoWindow;
4    downloadUrl("http://略(XMLファイル)", function (data) {
5        var xml = data.responseXML;
6        var markers = xml.documentElement.getElementsByTagName("marker");
7        for (var i=0; i<markers.length; i++) {
8            if (markerType == markers[i].getAttribute("type")) {
9                var name = markers[i].getAttribute("name");
10                var address = markers[i].getAttribute("address");
11                var type = markers[i].getAttribute("type");
12                var lat = markers[i].getAttribute("lat");
13                var lng = markers[i].getAttribute("lng");
14                var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
15                var html = "<b>" + name + "</b> <br/>" + address;
16                var icon = customIcons[type] || {};
17                var map = new google.maps.Map(document.getElementById("map"), {
18                    center : new google.maps.LatLng(lat, lng), zoom : 13, mapTypeId : 'roadmap' 
19                });
20                var marker = new google.maps.Marker({
21                    map : map, position : point, icon : icon.icon 
22                });
23                bindInfoWindow(marker, map, infoWindow, html);
24                break;
25            }
26        }
27    });
28}