I am trying to use a custom icon and set its size
var icon = new google.maps.Icon({
'anchor':null,
'origin':null,
'scaledSize':null,
'size':new google.maps.Size(value.width,value.height),
'url':'../maps/overlay_images/'+value.image
});
Setting the marker on the map,
var marker = new google.maps.Marker({
position: new google.maps.LatLng(parseFloat(value.latitude), parseFloat(value.longitude)),
map: map,
title: value.name,
icon: icon ,
animation: google.maps.Animation.DROP
});
I get an "Uncaught TypeError: undefined is not a function" error
I could see a Icon object in the maps reference, what am I doing wrong here?
https://developers.google.com/maps/documentation/javascript/reference#Icon
google.maps.Icon is just an object specification, not a class with a constructor. Your code should look like this:
var icon = {
'size':new google.maps.Size(value.width,value.height),
'url':'../maps/overlay_images/'+value.image
};
You can just add a link to the image to display a custom marker icon.
var marker = new google.maps.Marker({
map: map,
position: position,
icon: "img/marker.png"
});
To edit the size, you can just change the size of the image.
Related
I have a map on a view which displays some markers and with info boxes.
Everything works fine, but when I set the icon property of the map to a unique image, the marker shows both images with my unique icon overlaying the default google pin.
This is what it currently looks like:
!https://imgur.com/a/6P1tgE7
I have tried numerous definitions on the map constructor but the result has been the same.
var image = 'http://maps.google.com/mapfiles/ms/icons/rangerstation.png';
//Add markers to view
function addMarker(x, y, ward, community, lganame, projecttype) {
var location = new google.maps.LatLng(x, y);
var marker = new google.maps.Marker({
position: location,
map: map,
title: ward
});
marker.setIcon(image);
addInfoWindowToMarker(marker, ward, community, lganame, projecttype);
}
I would like the icon being displayed to be just the one I specify and completely ignore the default Google Maps marker.
I solved the problem by changing my marker definition as such.
Note I also scaled the size down or better presentation.
function addMarker(x, y, ward, community, lganame, projecttype) {
var location = new google.maps.LatLng(x, y);
var marker = new google.maps.Marker({
position: location,
map: map,
title: ward,
//icon: 'http://maps.google.com/mapfiles/ms/icons/rangerstation.png',
icon: new google.maps.MarkerImage(
'http://maps.google.com/mapfiles/ms/icons/rangerstation.png',
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(20, 20)
)
});
//Call info windows and bounce event listener so the marker animates when it is clicked
addInfoWindowToMarker(marker, ward, community, lganame, projecttype);
}
It works just fine now.
I have used the Google Maps PHP/XML Example to build a map and I want to include custom markers. Currently a marker status changes the marker icon and assigns a label as shown below. However I want to use hi-res markers so I need to resize the icons.
I understand I need to use new google.maps.Size(X,X);, but I don't know how to build this into the customLabel variable as the examples I've seen use a different method to show icons.
A nudge in the right direction would be helpful.
var customLabel = {
completed: {
label: 'C',
icon: './assets/map/images/icon_green.png'
},
failed: {
label: 'F'
icon: './assets/map/images/icon_red.png'
}
};
var status = markerElem.getAttribute('status');
var icon = customLabel[status] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label,
icon: icon.icon,
animation: google.maps.Animation.DROP
});
Have a look at the documentation of MarkerOptions interface:
https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerOptions
You will see that icon property may be a String, Icon or Symbol interfaces. Currently you are setting an icon property as a String value. In order to define size you should assign an Icon object to icon property. The Icon interface is documented in
https://developers.google.com/maps/documentation/javascript/reference/marker#Icon
So, you should use something like
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label,
icon: {
url: icon.icon,
size: new google.maps.Size(X,X)
},
animation: google.maps.Animation.DROP
});
I hope this helps!
I have the following data that come from an ajax call:
data: [
rest1: {
latlng: ["40.7143528","-74.0059731"],
link: "restaurant1.jpg"
},
rest2: {
latlng: ["40.82148067","-74.35135579"],
link: "restaurant2.jpg"
}
]
How can I show the images in my map in their specific coordinates? I know how to do it using marker and infowindow
Add a marker and then add the image in the infowindow.
But how I can show the image in the place of the marker? Without infowindow
Suppose you have stored the address of the picture in a variable address and the position of the marker in a variable position. Then, your code should looks like this:
var beachMarker = new google.maps.Marker({
position: position,
map: map,
icon: address
});
So, when you get your json file, you may first parse it like this:
data = JSON.parse (data);
Then, you can use the data like this:
var beachMarker = new google.maps.Marker({
position: {data.rest1.latlng[0], data.rest1.latlng[1]},
map: map,
icon: data.rest1.link
});
Please consult the google documentation.
Tell me if you have some comments.
I have added a customized icon to google maps and added rotation property to icon and when i run the code i get an error indicating " google.maps.number is not a constructor" can someone help me how to solve this problem.
var icon = {
url: 'newimage/unnamed.png', // url
scaledSize: new google.maps.Size(25, 25), // scaled size
origin: new google.maps.Point(0,0), // origin
rotation: new google.maps.number(90)
};
//var myLatLng = {lat:50.8274, lng:12.9161};
var myLatLng = {lat:global_latlon.lat, lng:global_latlon.lng};
var test_marker = new google.maps.Marker({
position: myLatLng,
map: map,
lat: myLatLng.lat,
lng: myLatLng.lng,
clickable: true,
name: 'test_marker',
title: 'test_marker',
offset: 0,
icon: icon
});
You are receiving the error because there is no class called number which exists in google.maps.number package.
A google.maps.Icon has the following properties
anchor
labelOrigin
origin
scaledSize
size
url
Rotation is not one of them. Refer to the the Google Map documentation : Icon for further reference.
I am sure this question is answered already but I cannot find it.
How to I change the marker layer of a marker on google maps v3 Javascript api?
For example in the image below I want the bus icon to appear above all T icons.
My bus icon is made like this:
var image = {
url: getIconUrl(bus.num),
anchor: new google.maps.Point(30,30)
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(bus.Latitude, bus.Longitude),
map: $scope.map,
animation: google.maps.Animation.DROP,
icon: image
});
My T icon is made like this:
var image = {
url: stopIcon
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(stop.Latitude, stop.Longitude),
map: $scope.map,
icon: image
});
The bus is always made after the T because T is stored locally where as bus is live data and served on demand.
you can set zIndex as per need for your marker
like:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(stop.Latitude, stop.Longitude),
map: $scope.map,
icon: image,
zIndex: 1// as needed
});
Or you can change it using setZIndex() method:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(stop.Latitude, stop.Longitude),
map: $scope.map,
icon: image
});
marker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
You can control with z-index option.
var image = {
url: getIconUrl(bus.num),
anchor: new google.maps.Point(30,30)
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(bus.Latitude, bus.Longitude),
map: $scope.map,
animation: google.maps.Animation.DROP,
icon: image,
zIndex: google.maps.Marker.MAX_ZINDEX // <--
});