はじめまして!
現在、以下のGoogle Maps公式サイトを参考にしながら、XMLファイルを読み込みマップに表示させようとしている者です。
https://developers.google.com/maps/articles/phpsqlajax_v3?hl=ja#createtable
上記のURLの最後に、XMLファイルをよみこみピンを表示させるサンプルコードが記載されていたのですが、ピンが表示しませんでした。
var customIconsのレストラン、バーの部分を自分のXMLファイルのタイプに書き換えることはもちろんのこと、
lang
1<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
の部分を
lang
1 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=略"></script>
に変更しても変化はありませんでした。
このコードをご覧になって、何かおかしい部分等ございましたら是非ご教授ください!!
よろしくお願い申し上げます。
lang
1<!DOCTYPE html > 2 <head> 3 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 5 <title>PHP/MySQL & Google Maps Example</title> 6 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> 7 <script type="text/javascript"> 8 //<![CDATA[ 9 10 var customIcons = { 11 restaurant: { 12 icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png' 13 }, 14 bar: { 15 icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png' 16 } 17 }; 18 19 function load() { 20 var map = new google.maps.Map(document.getElementById("map"), { 21 center: new google.maps.LatLng(47.6145, -122.3418), 22 zoom: 13, 23 mapTypeId: 'roadmap' 24 }); 25 var infoWindow = new google.maps.InfoWindow; 26 27 // Change this depending on the name of your PHP file 28 downloadUrl("phpsqlajax_genxml.php", function(data) { 29 var xml = data.responseXML; 30 var markers = xml.documentElement.getElementsByTagName("marker"); 31 for (var i = 0; i < markers.length; i++) { 32 var name = markers[i].getAttribute("name"); 33 var address = markers[i].getAttribute("address"); 34 var type = markers[i].getAttribute("type"); 35 var point = new google.maps.LatLng( 36 parseFloat(markers[i].getAttribute("lat")), 37 parseFloat(markers[i].getAttribute("lng"))); 38 var html = "<b>" + name + "</b> <br/>" + address; 39 var icon = customIcons[type] || {}; 40 var marker = new google.maps.Marker({ 41 map: map, 42 position: point, 43 icon: icon.icon 44 }); 45 bindInfoWindow(marker, map, infoWindow, html); 46 } 47 }); 48 } 49 50 function bindInfoWindow(marker, map, infoWindow, html) { 51 google.maps.event.addListener(marker, 'click', function() { 52 infoWindow.setContent(html); 53 infoWindow.open(map, marker); 54 }); 55 } 56 57 function downloadUrl(url, callback) { 58 var request = window.ActiveXObject ? 59 new ActiveXObject('Microsoft.XMLHTTP') : 60 new XMLHttpRequest; 61 62 request.onreadystatechange = function() { 63 if (request.readyState == 4) { 64 request.onreadystatechange = doNothing; 65 callback(request, request.status); 66 } 67 }; 68 69 request.open('GET', url, true); 70 request.send(null); 71 } 72 73 function doNothing() {} 74 75 //]]> 76 77 </script> 78 79 </head> 80 81 <body onload="load()"> 82 <div id="map" style="width: 500px; height: 300px"></div> 83 </body> 84 85</html> 86
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。