sql >> データベース >  >> RDS >> Mysql

Google Maps APIを使用したクラスターマーカー、データベースからの場所

    見つけた!これが解決策です。これは更新されたjavascriptファイルです:

        var customIcons = {
                    type1: {
                      icon: 'icon_type1.png'
                    },
                    type2: {
                      icon: 'icon_type2.png'
                    },
                    type3: {
                      icon: 'icon_type3.png'
                    },
                    type4: {
                      icon: 'icon_type4.png'
                    }
            };
    
            function initMap() {
              var cluster = [];
              var map = new google.maps.Map(document.getElementById("map"), {
                center: new google.maps.LatLng(0, 0),
                zoom: 1,
                mapTypeId: 'roadmap'
              });
        var infowindow = new google.maps.InfoWindow();
    
              // Change this depending on the name of your PHP file
              downloadUrl('https://my-website.com/the-sweet-sweet-xml-info.php', 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>" + 
                  markers[i].getAttribute("name") + 
                  "</b> <br/>" + 
                  markers[i].getAttribute("address");
    
                  var icon = customIcons[type] || {};
                  var marker = new google.maps.Marker({
                    map: map,
                    position: point,
                    icon: icon.icon,
                  });
                  google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                return function() {
                                    infowindow.setContent(
                                    "<b>" + 
                                    markers[i].getAttribute("name") + 
                                    "</b> <br/>" + 
                                    markers[i].getAttribute("address")
                                    );
                                    infowindow.open(map, marker);
    
                                    //This sends information from the clicked icon back to the serverside code
                                    document.getElementById("setlatlng").innerHTML = markers[i].getAttribute("name");
                                }
                            })(marker, i));
                  cluster.push(marker);
                }
    
                var options = {
                      imagePath: '/location-of-cluster-icons/m'
                  };
    
                var mc = new MarkerClusterer(map,cluster,options);
              });
            }
    
            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('the-sweet-sweet-xml-info.php') :
                  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() {}
    


    1. 最も一般的なオブジェクトを取得するRailsアクティブレコードクエリ

    2. 2つの異なるテーブルの要素で更新/削除する方法SQLite

    3. ORDER BY句のパラメータをバインドしないと結果が順序付けられないのはなぜですか?

    4. 長いSQLステートメントをJavaScriptでラップする便利な方法