Как добавить Overlay Google Maps

Question

Я пытаюсь интегрировать карты google на веб-сайтах, чтобы показывать местоположения с листингами. Я хочу показать значок категории на карте в отличие от обычного маркера, я попробовал маркеры, но у меня есть ощущение, что это создаст какую-то проблему в будущем, когда добавятся больше категорий, я хочу использовать шрифт для этого, я уже пробовал так много библиотек, но ни один, кажется, обеспечивает решение, я теперь решили наложения, которые я знаю, могу обрабатывать HTML элементы, но я не уверен, как интегрировать его в этом коде .. Вот мой код

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

Я думаю, что я нашел solution..` $ (функция() {

  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'); 

`