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.
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 a database of locations which I want to be able to print on a map. Ideally there should be one map with multiple pins for each location you have toggled on. So click a button for location X and it shows up on the map. Click the button for location Y and it shows up on the same map. Click X again and it hides from the map.
Currently I have it so I click on X and the map gets redrawn centered around point X.
Here is the HTML for each button:
<input type='button' data-lat='38.89864400' data-long='-77.05283400'
data-when='20 Aug at 2:00am' value='Location X' class='click' />
The jQuery I'm using is:
jQuery(document).ready(
function initialize() {
jQuery("input.click").click(function() {
showOnMap(jQuery(this).data('lat'), jQuery(this).data('long'), jQuery(this).data('when'));
});
}
);
function showOnMap(lat, long, message) {
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
zoom: 13,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: message
});
google.maps.event.addDomListener(window, 'load', showOnMap);
}
Is there an easy way to switch from what I have to what I want? I've searched for a while but no one seems to be asking this use case in a browser, just Android (which I'm not doing).
Thanks!
There is an example in the documentation on how to hide/show markers. In short, a marker is:
hidden by setting its map to null
showed by setting its map to map
To do so, you will need to access each marker individually. If you have a definite number of locations, it can be done by naming them with different names (eg var markerLocationX, var markerLocationY, etc). Otherwise, the markers need to be stored in an array.
Supposing you have a definite number of known locations to toggle the markers, your javascript code may look like this:
function toggleMarker(markerName) {
if (markerName.getMap() == null) {
markerName.setMap(map);
} else {
markerName.setMap(null);
}
}
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.
well im trying to set the BOUNCE animation to a specific marker but whenever i call the marker.setAnimation(google.maps.Animation.BOUNCE) method console says "Cannot read property 'BOUNCE' of undefined" this means that marker is not defined right? but if I use marker.setTitle('Bouncing') the title does change. am i doing something wrong , here is the code
<script type="text/javascript">
function addMarker(lat,lng,img,title,bounce)
{
var myLatLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: img,
title: title,
zIndex: 1
});
if(bounce=='set'){marker.setAnimation(google.maps.Animation.BOUNCE);
marker.setTitle('Bouncing');};
}
</script>
php script
for($i=0;$i<count($losDatos);$i++)
{
$utc=new DateTime($losDatos[$i]['fechaUtc']);
$utc->modify('-'.horarioVerano().' hours');
echo $utc->format("Y-m-d H:i:s");
if($losDatos[$i]['camion']==$camion)
{
$script.="addMarker(".$losDatos[$i]['latitud'].",".$losDatos[$i]['longitud'].",".$losDatos[$i]['img'].",".$losDatos[$i]['nombre'].",'set');";
}else
{
$script.="addMarker(".$losDatos[$i]['latitud'].",".$losDatos[$i]['longitud'].",".$losDatos[$i]['img'].",".$losDatos[$i]['nombre'].");";
}
}
echo $script;
try:
marker.setAnimation(google.maps.Animation.BOUNCE)
The way You specified it in you code is correct.
{
marker.setAnimation(google.maps.Animation.BOUNCE);
}
What you should check is if the marker is really referencing a marker object on the map.
OR
You can try setting the animation through marker options.
var markerOptions = {animation:google.maps.Animation.BOUNCE}
or Try setting the animation without the if(condition) to to see if it bounces.
Also please check for equality this way in your if statement
if(bounce==="set"){ /*animate marker*/}
The setAnimation param should be a string of either "BOUNCE" or "DROP".
marker.setAnimation("BOUNCE");
or
marker.setAnimation("DROP");
where marker is a google maps marker object: