So fügen Sie Google Maps Overlay hinzu

Question

Ich versuche, Google Maps auf einer Angebotswebsite zu integrieren, um Standorte mit Angeboten anzuzeigen. Ich möchte zeigen Kategorien Symbol auf der Karte im Gegensatz zu den üblichen Marker, ich habe versucht, Marker Symbole, aber ich habe das Gefühl, es wird ein Problem in der Zukunft, wenn mehr Kategorien hinzugefügt werden, möchte ich Schriftart super für diese verwenden, habe ich bereits versucht so viele Bibliotheken, aber keiner scheint eine Lösung zu schaffen, habe ich nun beschlossen, Overlays, die ich kenne können hTML-Elemente handhaben, aber ich bin nicht sicher, wie es in diesem Code zu integrieren .. Hier ist mein Code

function load_map(keyword, category) { 
    var map = new google.maps.Map(document.getElementById('indexmap'), { 
    zoom: 2, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 
    var markers = new Array(); 
    var jsondt; 
    var jsonfile; 
    var results = []; 

    $.getJSON("<?php echo osc_base_url(); ?>?soko-ajax=maps-items", function(data) { 
    jsondt = data.markersmap; 
    for (i = 0; i < jsondt.length; i++) { 
     if (keyword != 'all' && category != 'all') { 
     if (jsondt[i].country == keyword && jsondt[i].category == category) { 
      results.push(jsondt[i]); 
     } 
     } else if (keyword == 'all' && category != 'all') { 
     if (jsondt[i].category == category) { 
      results.push(jsondt[i]); 
     } 
     } else if (keyword != 'all' && category == 'all') { 
     if (jsondt[i].country == keyword) { 
      results.push(jsondt[i]); 
     } 
     } else { 
     results.push(jsondt[i]); 
     } 
    } 

    for (i = 0; i < results.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(results[i].latitude, results[i].longitude), 
     map: map, 
     icon: "<?php echo osc_current_web_theme_url();?>" + results[i].image 
     }); 

     markers.push(marker); 

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(results[i].content); 
      infowindow.open(map, this); 
     } 
     })(marker, i)); 

    } 

    var bounds = new google.maps.LatLngBounds(); 
    $.each(markers, function(index, marker) { 
     bounds.extend(marker.position); 
    }); 
    map.fitBounds(bounds); 
    map.setZoom(2); 
    }); 
} 

load_map('all', 'all'); 

}); 

Answer 1

ich glaube, ich die solution..` $ gefunden (function() {

  function CustomMarker(latlng, map, args) { 
       this.latlng = latlng; 
       this.args = args; 
       this.setMap(map); 
      } 

      CustomMarker.prototype = new google.maps.OverlayView(); 

      CustomMarker.prototype.draw = function() { 

       var self = this; 

       var i = this.i; 

       if (!i) { 

        i = this.div = document.createElement('i'); 

        i.className = 'map-category fa-2x fa '+self.args.class; 

        if (typeof(self.args.marker_id) !== 'undefined') { 
         i.dataset.marker_id = self.args.marker_id; 
        } 


        var panes = this.getPanes(); 
        panes.overlayImage.appendChild(i); 
       } 

       var point = this.getProjection().fromLatLngToDivPixel(this.latlng); 

       if (point) { 
        i.style.left = (point.x - 15) + 'px'; 
        i.style.top = (point.y -51) + 'px'; 
       } 
      };//category overlay 

      function load_map(keyword,category){ 
       var map = new google.maps.Map(document.getElementById('indexmap'), { 
        zoom: 2,  
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }); 

       var infowindow = new google.maps.InfoWindow(); 

       var marker, i; 
       var markers = new Array(); 
       var jsondt; 
       var jsonfile; 
       var fillColors = Array('#10A592', '#F54F4D', '#5489DE', '#FF9900', '#EA6164', '#5F7225', '#8D671C', '#DC2C6E', '#03956D', '#705950', '#119717', '#029440', '#8FB442', '#6E7A87', '#0787C4', '#A75E99', '#28825D');    
       var results = []; 

       $.getJSON("<?php echo osc_base_url(); ?>?soko-ajax=maps-items", function(data) { 
        jsondt = data.markersmap;   
        for(i = 0; i < jsondt.length; i++) { 
         if(keyword != 'all' && category != 'all'){ 
          if(jsondt[i].country == keyword && jsondt[i].category == category){ 
           results.push(jsondt[i]); 
          } 
         }else if(keyword == 'all' && category != 'all'){ 
          if(jsondt[i].category == category){ 
           results.push(jsondt[i]); 
          } 
         }else if(keyword != 'all' && category == 'all'){ 
          if(jsondt[i].country == keyword){ 
          results.push(jsondt[i]); 
          } 
         }else{ 
          results.push(jsondt[i]);     
         } 
        } 

        for(i = 0; i < results.length; i++) { 

         var myLatlng = new google.maps.LatLng(results[i].latitude, results[i].longitude); 

         marker = new google.maps.Marker({ 
          position: myLatlng, 
          map: map, 
          icon: { url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(

           [ 
          '<?xml version="1.0"?>', 
           '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40.248px" height="56.567px" viewBox="0 0 40.248 56.567" enable-background="new 0 0 40.248 56.567" xml:space="preserve">', 
            '<g xmlns="http://www.w3.org/2000/svg">', 
             '<path fill="#ffffff" d="M 34.568 20.414 c -0.005 -8.39 -6.487 -15.319 -14.421 -15.419 C 11.473 4.886 4.631 11.66 4.617 20.37 c -0.014 8.932 6.059 15.04 14.955 15.045 C 28.488 35.419 34.573 29.333 34.568 20.414 Z" />', 
             '<path fill="'+fillColors[i]+'" d="M 31.87 2.957 C 25.867 -1.077 13.928 -0.966 8.09 3.179 C 1.602 7.787 -1.827 16.909 0.997 24.5 C 5.31 36.096 12.302 46.202 20.186 56.567 c 7.904 -10.353 14.956 -20.608 19.148 -32.413 C 42.077 16.428 38.372 7.327 31.87 2.957 Z M 4.617 20.37 c 0.014 -8.71 6.856 -15.483 15.53 -15.375 c 7.934 0.1 14.417 7.029 14.421 15.419 c 0.005 8.919 -6.08 15.006 -14.997 15.001 C 10.676 35.41 4.604 29.301 4.617 20.37 Z" />', 
            '</g>', 
           '</svg>' 
          ].join('\n') 

         ) }//"<?php //echo osc_current_web_theme_url();?>" + results[i].image 
         }); 

         markers.push(marker); 

         google.maps.event.addListener(marker, 'click', (function(marker,i) { 
          return function() { 
           infowindow.setContent(results[i].content); 
           infowindow.open(map, this);      
          } 
         })(marker, i)); 

         overlay = new CustomMarker(myLatlng, map,{marker_id: '123', class: '<?php echo soko_category_icon(0); ?>'}); 

        } 

        var bounds = new google.maps.LatLngBounds(); 
         $.each(markers, function (index, marker) { 
         bounds.extend(marker.position); 
        });  
        map.fitBounds(bounds); 
        map.setZoom(2); 
       }); 
      } 

      load_map('all','all'); 

`