Menu
I am getting this error in google maps.
Error: InvalidValueError: setIcon: not a string; and no url property; and no path property
Earlier it was working fine and i never changed my code.
I have seen a post Google Maps Error: Uncaught InvalidValueError: setIcon: not a string; and no url property; and no path property with same issue and applied the change mentioned in the answer. Earlier it was working and now it also stopped working.
It Seems that google has changed something in their API but not sure what exactly. I found the same issue found by some other users too @ https://code.google.com/p/gmaps-api-issues/issues/detail?id=7423
My website link is http://www.advantarealty.net/Search//Condo,Single-Family-Home,Townhome_PropertyType/True_ForMap/ just open in firefox and see the error console. I have included below js files for map.
<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>
Below is the complete javascript code which i used.
<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" +
" " +
"1 BATH" +
" " +
"1,235 Sq.ft." +
" " +
"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" +
" " +
json[i].Full_Baths + " BATH" +
" " +
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>
593
Finally I figured out the issue. Earlier markerwithlabel javascript library, if we want to hide the marker and only want to show the label, we just pass an empty braces to icon parameter like below
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: {},
But now it doesn't work, you must have to supply an image icon for that. SO when I supplied a transparent image to icon, it works now.
icon: '/images/transparent-1x1.png',
Also I am now using latest js library for that
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.10/src/markerwithlabel.js
I happened to fall in the same issue and below is the solution which helped me, I hope this helps you too.
First add this google marker with label script in a JS file- (mine is MarkerWithLabel.js) https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerwithlabel/src/markerwithlabel.js?r=131
Then add the below mentioned google map JS libraries on the 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); });
}
});
In my code above I am using Google GeoCoder to convert address to Latitudes and Longitudes. You can modify the above code according to your requirements.
You can also follow these links and they might be helpful- http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html
Let me know if you need more details from me.
Regards,
Manik
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
