Google Map: - InvalidValueError: setIcon: не строка; и нет свойства url; и никакого свойства пути

Question

Я получаю эту ошибку на картах google.

Ошибка: InvalidValueError: setIcon: не строка; и нет свойства url; и нет свойства пути

Раньше он работал нормально, и я никогда не менял свой код.

Я видел сообщение Google Maps Error: Uncaught InvalidValueError: setIcon: not a string; and no url property; and no path property с той же проблемой и применил изменение, упомянутое в ответе. Раньше он работал, и теперь он тоже прекратил работать.

Похоже, что Google изменил что-то в своем API, но не уверен, что именно. Я нашел тот же вопрос, найденную некоторыми другими пользователями тоже @https://code.google.com/p/gmaps-api-issues/issues/detail?id=7423

Мой сайт ссылка http://www.advantarealty.net/Search//Condo,Single-Family-Home,Townhome_PropertyType/True_ForMap/ просто открыть в Firefox и видеть консоль ошибок. Я включил ниже js-файлы для карты.

<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=drawing"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script> 

<div id="map-canvas" class="map-view">hello</div> 

Ниже приведен полный код javascript, который я использовал.

<script> 
    var defaultLat = '@Html.Raw(Model != null && Model.Count() > 0 ? Convert.ToDouble(Model[0].Latitude) : 0)'; 
    var defaultLong = '@Html.Raw(Model != null && Model.Count() > 0 ? Convert.ToDouble(Model[0].Longitude) : 0)'; 
    if (defaultLat == 0) 
     defaultLat = $('#SearchLatitude').val(); 
    if (defaultLong == 0) 
     defaultLong = $('#SearchLongitude').val(); 

    // var json = JSON.parse('@str'); 

    // Add this for testing only 
    var json = JSON.parse('[ { "DaysOnAdvanta": "400", "Name": null, "com_address": null, "MLS_ID": "miamimls", "MLS_STATE_ID": "FL", "MLS_LISTING_ID": "A1677437", "mls_office_id": null, "MLS_Office_Name": "EWM Realty International ", "MLS_AGENT_ID": null, "MLS_Agnet_Name": null, "SALE_PRICE": "400000", "Address": "5800 N BAY RD", "city": "Miami Beach", "zip_code": "33140", "remarks": "", "property_type_code": "Residential", "County": null, "Subdivision": "LA GORCE GOLF SUB PB 14-4", "status_code": "Active", "Year_Built": "1929", "acres": "0", "LOT_SQUARE_FOOTAGE": "52881", "BUILDING_SQUARE_FOOTAGE": "12153", "Bedroom_Count": "7", "Full_Baths": "8", "Half_Baths": null, "Fire_place_Number": null, "has_virtual_tour": null, "has_garage": null, "has_firepalce": null, "has_horses": null, "has_pool": null, "has_golf": null, "has_tennis": null, "is_gated": null, "is_waterfront": null, "has_photo": null, "photo_quantity": "25", "photo_url": null, "virtual_tour_url": "http://www.obeo.com/u.aspx?ID=630180", "last_updated": null, "listing_date": null, "garage": null, "last_image_transaction": null, "complex_building": null, "display_address": null, "advertise": null, "IMAGE": "/images/PhotoNotAvailable_Large.gif ", "visit": null, "inforequest": null, "FollwID": 0, "Latitude": "25.83835", "Longitude": "-80.13273", "Special": "", "price_change_direction": "", "location_id": "48153" } ]'); 
    // console.log(json); 
    var contentString = "<div style='width: 200px; height: 250px;text-align: center;'>" + 
     "<img src='//image6.sellectrified.com/flex/RX-3/113/RX-3113755-1.jpeg' width='200' alt='No Image' style='max-height: 130px;' />" + 
     "<table style='width: 100%; border-collapse: collapse;'>" + 
      "<tr>" + 
       "<td style='text-align:left;height:20px;'>" + 
        "$155,000" + 
       "</td>" + 
       "<td style='text-align:right;height:20px;'>" + 
        "2754, Dora Ave" + 
       "</td>" + 
      "</tr>" + 
      "<tr>" + 
       "<td>" + 
       "</td>" + 
       "<td>" + 
        "<a href='javascript:void(0);'>" + 
         "<div class='btn btn-primary card-btn'>Details</div>" + 
        "</a>" + 
       "</td>" + 
      "</tr>" + 
     "</table>" + 
     "<table style='width: 100%; border-collapse: collapse;border-top:1px solid gray;'>" + 
      "<tr>" + 
       "<td style='text-align:center;font-size: 10px;'>" + 
        "2 BEDS" + 
       "&nbsp;&nbsp;" + 
        "1 BATH" + 
       "&nbsp;&nbsp;" + 
        "1,235 Sq.ft." + 
       "&nbsp;&nbsp;" + 
       "1.3 ACRE" + 
       "</td>" + 
      "</tr>" + 
     "</table>" + 
    "</div>"; 

    var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
    }); 
    var m = []; 

    function initialize() { 
     var bounds = new google.maps.LatLngBounds(); 
     var infowindow = new google.maps.InfoWindow(); 
     var myLatlng = new google.maps.LatLng(defaultLat, defaultLong); 
     var mapOptions = { 
      center: myLatlng, 
      zoom: 8 
      //mapTypeId: google.maps.MapTypeId.HYBRID 
     }; 

     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
     if (json.length > 0) { 
      $(json).each(function (i) { 
       var latlng = new google.maps.LatLng(json[i].Latitude, json[i].Longitude); 
       var marker = new MarkerWithLabel({ 
        position: latlng, 
        draggable: false, 
        raiseOnDrag: false, 
        map: map, 
        labelContent: "$" + (json[i].SALE_PRICE/1000) + 'k', 
        labelAnchor: new google.maps.Point(22, 0), 
        labelClass: "marker", // the CSS class for the label 
        icon: {}, 
        title: json[i].Address, 
        id: json[i].MLS_ID + '-' + json[i].MLS_LISTING_ID 
       }); 
       m.push(marker); 
       google.maps.event.addListener(marker, 'mouseover', function() { 
        var contentString = "<div style='width: 200px; text-align: center;'>" + 
              "<img src='" + json[i].IMAGE + "' width='200' alt='' style='max-height: 130px;' />" + 
              "<table style='width: 100%;'>" + 
               "<tr>" + 
                "<td style='text-align:left;padding: 5px 0;'>" + 
                 "$" + json[i].SALE_PRICE + 
                "</td>" + 
                "<td style='text-align:right;padding: 5px 0;'>" + 
                 json[i].Address + 
                "</td>" + 
               "</tr>" + 
               "<tr>" + 
                "<td colspan='2' style='text-align:right;padding: 5px 0;'>" + 
                 "<a class='orange-btn-small' href='/Home/PropertyDetail/" + json[i].location_id + "/" + json[i].MLS_ID + "/" + json[i].MLS_LISTING_ID + "/" + json[i].Address + "'>Details</a>" + 
                "</td>" + 
               "</tr>" + 
              "</table>" + 
              "<table style='width: 100%; border-top:1px solid gray;'>" + 
               "<tr>" + 
                "<td style='text-align:center;font-size: 10px;'>" + 
                 json[i].Bedroom_Count + " BEDS" + 
                "&nbsp;&nbsp;" + 
                 json[i].Full_Baths + " BATH" + 
                "&nbsp;&nbsp;" + 
                 json[i].BUILDING_SQUARE_FOOTAGE + " Sq.ft." + 
                "</td>" + 
               "</tr>" + 
              "</table>" + 
             "</div>"; 
        infowindow.setContent(contentString); 
        infowindow.open(map, marker); 
        //getFocusLeftList(sn); 
       }); 
       //extend the bounds to include each marker's position 
       bounds.extend(marker.position); 
      }); 
      //now fit the map to the newly inclusive bounds 
      map.fitBounds(bounds); 
     } 
     var drawingManager = new google.maps.drawing.DrawingManager({ 
      drawingMode: null, 
      //drawingMode: google.maps.drawing.OverlayType.MARKER, 
      drawingControl: true, 
      drawingControlOptions: { 
       position: google.maps.ControlPosition.TOP_CENTER, 
       drawingModes: [ 
        google.maps.drawing.OverlayType.POLYGON 
       ] 
      }, 
      circleOptions: { 
       fillColor: '#ffff00', 
       fillOpacity: 1, 
       strokeWeight: 5, 
       clickable: false, 
       editable: true, 
       zIndex: 1 
      } 
     }); 
     //To add event on circle complete. 
     google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) { 
      var radius = circle.getRadius(); 
      //alert(radius); 
     }); 
     //To add event on drawing complete. 
     google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) { 
      if (event.type == google.maps.drawing.OverlayType.CIRCLE) { 
       DrawCircleMarker(event.overlay); 
       var radius = event.overlay.getRadius(); 
       //alert(radius); 
      } 
      else if (event.type == google.maps.drawing.OverlayType.RECTANGLE) { 
       var cordinates = event.overlay.getBounds(); 
       // alert(cordinates); 
      } 
      else if (event.type == google.maps.drawing.OverlayType.POLYGON) { 
       var arrayPath = event.overlay.getPath().b; 
       GetMaxMinLatLng(event.overlay); 
       $('#Polygon').val(MasterPoly); 
       changeView($('#map-canvas'), 'map'); 
      } 
     }); 
     drawingManager.setMap(map); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 

    var MaxLat = 0; 
    var MaxLng = 0; 
    var MinLat = 0; 
    var MinLng = 0; 
    var MasterPoly = ''; 
    var Polygon; 
    function GetMaxMinLatLng(poly) { 
     var polyPoints = poly.getPath(); 
     var oddNodes = false; 
     if (Polygon != null) 
      Polygon.setMap(null); 
     Polygon = poly; 
     for (var i = 0; i < polyPoints.getLength() ; i++) { 
      if (i == 0) { 
       MaxLat = polyPoints.getAt(i).lat(); 
       MaxLng = polyPoints.getAt(i).lng(); 
       MinLat = polyPoints.getAt(i).lat(); 
       MinLng = polyPoints.getAt(i).lng(); 
       var con = new Contour(polyPoints.j); 
       var c = con.centroid(); 
       centerLat = c.y; 
       centerLong = c.x; 
       centerPoint = new google.maps.LatLng(centerLat, centerLong); 
      } 
      if (polyPoints.getAt(i).lat() > MaxLat) { 
       MaxLat = polyPoints.getAt(i).lat(); 
       $('#SearchLatitude').val(MaxLat); 
      } 
      if (polyPoints.getAt(i).lat() < MinLat) { 
       MinLat = polyPoints.getAt(i).lat(); 
      } 
      if (polyPoints.getAt(i).lng() > MaxLng) { 
       MaxLng = polyPoints.getAt(i).lng(); 
       $('#SearchLongitude').val(MaxLng); 
      } 
      if (polyPoints.getAt(i).lng() < MinLng) { 
       MinLng = polyPoints.getAt(i).lng(); 
      } 
     } 
     MasterPoly = MinLng + ' ' + MaxLat + ',' + MinLng + ' ' + MinLat + ',' + MaxLng + ' ' + MinLat + ',' + MaxLng + ' ' + MaxLat + ',' + MinLng + ' ' + MaxLat; 
    } 

    function Point(x, y) { 
     this.x = x; 
     this.y = y; 
    } 

    // Contour object 
    function Contour(points) { 
     this.pts = points || []; // an array of Point objects defining the contour 
    } 

    Contour.prototype.area = function() { 
     var area = 0; 
     var pts = this.pts; 
     var nPts = pts.length - 1; 
     var j = nPts - 1; 
     var p1; var p2; 

     for (var i = 0; i < nPts; j = i++) { 
      p1 = pts[i]; p2 = pts[j]; 
      area += p1.A * p2.k; 
      area -= p1.k * p2.A; 
     } 
     area /= 2; 
     return area; 
    }; 

    Contour.prototype.centroid = function() { 
     var pts = this.pts; 
     var nPts = pts.length - 1; 
     var x = 0; var y = 0; 
     var f; 
     var j = nPts - 1; 
     var p1; var p2; 

     for (var i = 0; i < nPts; j = i++) { 
      p1 = pts[i]; p2 = pts[j]; 
      f = p1.A * p2.k - p2.A * p1.k; 
      x += (p1.A + p2.A) * f; 
      y += (p1.k + p2.k) * f; 
     } 

     f = this.area() * 6; 

     return new Point(x/f, y/f); 
    }; 

    $(".SearchProp").hover(function() { 
     var lat = $(this).attr("lat"); 
     var long = $(this).attr("long"); 
     var sequence = $(this).attr("seq") 
     google.maps.event.trigger(m[sequence], "mouseover"); 
     var laLatLng = new google.maps.LatLng(lat, long); 
    }); 
</script> 

Answer 1

Наконец я понял вопрос. Ранее markerwithlabel библиотеки JavaScript, если мы хотим, чтобы скрыть маркер и только хотим показать этикетку, мы просто передать пустые скобки для параметра значка как ниже

var marker = new MarkerWithLabel({ 
        position: latlng, 
        draggable: false, 
        raiseOnDrag: false, 
        map: map, 
        labelContent: "$" + (json[i].SALE_PRICE/1000) + 'k', 
        labelAnchor: new google.maps.Point(22, 0), 
        labelClass: "marker", // the CSS class for the label 
        icon: {}, 
        title: json[i].Address, 
        id: json[i].MLS_ID + '-' + json[i].MLS_LISTING_ID 
       }); 

значка: {},

Но теперь это не сработает, вам нужно предоставить значок изображения для этого. Итак, когда я поставил прозрачный образ на значок, он работает сейчас.

icon: '/images/transparent-1x1.png', 

Кроме того, я теперь использует последнюю версию библиотеки JS для этого

http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.10/src/markerwithlabel.js 

Answer 2

Я попал в одну и ту же проблему, и ниже это решение, которое помогло мне, я надеюсь, что это тоже поможет.

Сначала добавьте Google маркер с скриптом этикетки в Файл- JS (шахта MarkerWithLabel.js) https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerwithlabel/src/markerwithlabel.js?r=131

Затем добавьте ниже упомянутые библиотеки Google Map JS на PAGE-

https://maps.googleapis.com/maps/api/js?key=some_key_here&sensor=false
~/Scripts/MarkerWithLabel.js

function showMap() { 
    var address = $('#corp-add').text(); 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': address }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var latitude = results[0].geometry.location.lat(); 
      var longitude = results[0].geometry.location.lng(); 
      var mapOptions = { 
       center: new google.maps.LatLng(latitude, longitude), 
       zoom: 16 
      }; 

      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

      var marker = new MarkerWithLabel({ 
       position: new google.maps.LatLng(latitude, longitude), 
       draggable: true, 
       raiseOnDrag: true, 
       map: map, 
       labelContent: "$425K", 
       labelAnchor: new google.maps.Point(22, 0), 
       labelClass: "labels", // the CSS class for the label 
       labelStyle: { opacity: 0.75 } 
      }); 
      var iw1 = new google.maps.InfoWindow({ 
       content: "This is a test marker" 
      }); 
      google.maps.event.addListener(marker, "click", function (e) { iw1.open(map, this); }); 
     } 
    }); 

в моем коде выше я использую Google Geocoder для преобразования адреса в широтах d Долгота. Вы можете изменить приведенный выше код в соответствии с вашими требованиями.

Вы также можете следовать этим ссылкам и они могут быть helpful- http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html

Позвольте мне знать, если вам нужно больше информации от меня.

С уважением,

Маник