. .
I've created a Google map (V3) that includes multiple markers. I've come across a need to redefine properties for specific markers. However, I have not been able to find any way to refer to specific marker objects.
To give you an example of what I'm trying to do, let's say I have a US map onto which I've placed markers on New York, Chicago, and Los Angeles. Let's say I've defined them as follows:
var marker = new google.maps.Marker({map: map, position: lat-long-NY, title: "Yankees"}); // NY
var marker = new google.maps.Marker({map: map, position: lat-long-Chi, title: "White Sox"}); // Chicago
var marker = new google.maps.Marker({map: map, position: lat-long-LA, title: "Angels"}); // LA
Now, let's say I want to go back and reset the marker titles as follows:
google.maps.Marker({map: map, position: lat-long-NY, title: "Mets"}); // NY
google.maps.Marker({map: map, position: lat-long-Chi, title: "Cubs"}); // Chicago
google.maps.Marker({map: map, position: lat-long-LA, title: "Dodgers"}); // LA
So, how do I do this (or, for that matter, is it even possible)? I've tried putting the markers in an array and setting an ID for them, but to no avail. I've also thought about, but haven't tried, referring to them by their title (that's probably next), but I'm not even sure if this is possible. I have not been able to find anything like this in Google's documentation.
Does anyone know if this is possible?
Thanks in advance . . .
You should use better names when you create the markers.
var NY_marker = new google.maps.Marker({map: map, position: lat-long-NY, title: "Yankees"}); // NY
var Chi_marker = new google.maps.Marker({map: map, position: lat-long-Chi, title: "White Sox"}); // Chicago
var LA_marker = new google.maps.Marker({map: map, position: lat-long-LA, title: "Angels"}); // LA
Then, you just need to do this:
NY_marker.setTitle("Mets");
Chi_marker.setTitle("Cubs");
LA_marker.setTitle("Dodgers");
More getters and setter for you to manipulate your markers:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker
Related
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'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.