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!
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 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'm making a Google Maps application where a user can search for a location. This location must point into the direction of a predefined marker.
Given the following pieces of code:
The predefined marker:
var station = new google.maps.LatLng(52.375401, 5.218824);
var stationMarker = new google.maps.Marker({
position: station,
map: map,
});
The marker that will be placed on the location that the user searched:
var direction = new google.maps.LatLng(52.376423, 4.887234);
var directionMarker = new google.maps.Marker({
position: direction,
map: map,
draggable: false,
title: "test"
});
directionMarker.setIcon(({
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 6
}));
How can I make sure that the direction marker (i.e the marker from the user search result) always points to the predefined marker?
I'm making use of the Google Maps API v3.
I've created a jsFiddle, which you can find here
Ok here you go:
Use the google.maps.SymbolPath.FORWARD_CLOSED_ARROW so that it points to the north.
Add the Geometry library to be able to compute a heading.
Use the rotation parameter on your direction icon.
Here is how to compute the heading from your direction marker to the station:
var heading = google.maps.geometry.spherical.computeHeading(direction,station);
Then use it to rotate your icon accordingly:
directionMarker.setIcon({
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 6,
rotation: heading
});
You also had one unnecessary pair of () in the above code which I have removed.
JSFiddle demo
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.
I have several markers on a google map api v3 and i need to reposition the markers at regular intervals. I have given my markers specific names like markerA, markerB, ... markerO.
im trying to run this function to get access to right marker to reposition:
function moveMarker(marker,lat,lng) {
var newLatLng = new google.maps.LatLng(lat,lng);
marker.setPosition(newLatLng);
}
markers are created in the load process along with the map.
markerA = new google.maps.Marker({position: new google.maps.LatLng(59.870131, 10.819168), map: map, icon: rodIcon, title: 'Car A'});
markerB = new google.maps.Marker({position: new google.maps.LatLng(59.870131, 10.819168), map: map, icon: rodIcon, title: 'Car B'});
markerC = new google.maps.Marker({position: new google.maps.LatLng(59.870131, 10.819168), map: map, icon: blaIcon, title: 'Car C'});
however, it seems like my function fails, and doesnt recognize the marker "name" given in the "marker" input of the function.
input to the function is similar to:
moveMarker(markerA,60,10)
but the marker doesnt move at all...
Am i missing something seriously basic, or is my idea repositioning each single marker by its name not the way to go?
i mean, i can hardcode
markerA.setPosition
markerB.setPosition etc... but that seems to be overkill?
Just use .setPosition() method. See http://jsfiddle.net/Ln2BM/1/ :
google.maps.event.addListener(marker, 'click', function() {
var pos = this.getPosition();
this.setPosition(new google.maps.LatLng(pos.lat(), pos.lng() + 1));
});
If it doesn't work, then you must have made a different mistake. Quite suspicious sounds your sentence "my function fails, and doesnt recognize the marker "name" given in the "marker" input of the function". You probably have something wrong in your function call.