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:
Related
My google map is not showing correctly. It shows "for development purposes only" and google says I need to create and enable a billing account and create an API key. I have done this but do I need to change or add something in the code?
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
var image = 'http://filmservice.no/wp-content/themes/filmservice16/img/ikon/map-marker.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(59.969826, 10.905725),
animation: google.maps.Animation.DROP,
map: map,
icon: image,
title: 'Filmservice AS'
});
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
The change you'll need to make is actually in your HTML markup, where you include the google maps API script:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
See the tutorial at https://developers.google.com/maps/documentation/javascript/tutorial for more information.
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.
Upon creating many custom markers from within a loop, I cannot seem to find a solution to being able to link to external websites while each marker has a unique link.
I have tried many variations of this code, but seem to keep running into undefined variables (code below demonstrates undefined map_markers variable)
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
var map;
// generated by PHP, but output looks like this...
var map_markers = [[43.536396, -110.740956, "T1", "/test-url"],[43.812092, -111.097181, "T2", "/test-url2"],[43.53640889360323, -110.74090051257326, "T3", "/test-url3"],[43.463373, -110.762519, "T4", "/test-url4"]];
google.maps.event.addDomListener(window, 'load', function() {
var mapCanvas = document.getElementById('map');
map = new google.maps.Map(mapCanvas, {
center: new google.maps.LatLng(37.8846194, -95.660041),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for (var i = 0; i < map_markers.length; i++) {
var marker = new google.maps.Marker({
position: {'lat': map_markers[i][0], 'lng': map_markers[i][1]},
map: map,
title: map_markers[i][2]
});
google.maps.event.addListener(marker, 'click', (function(markers, index) {
return function() {
window.open("http://www.example.com/" . markers[index][3], '_blank');
}
})(map_markers, i));
}
});
</script>
Note: The code above uses an enclosure, but i've tried many variations like adding a "url" param to the marker (but this results in the url property being undefined?), i've tried this.url when having that property too, but no luck...
Above code generates this error upon clicking a marker:
Uncaught TypeError: Cannot read property '135' of undefined where 135 is the index number for the marker clicked
I have searched the web, but no solution seems to fix my problem. Maybe i'm missing something simple, but it's stumped me [?]
PS: The map and markers generate perfect, just the JS error upon clicking a marker that i'm having issues with!
TIA!
Looks like
window.open("http://www.example.com/" . markers[index][3], '_blank');
should be
window.open("http://www.example.com/" + map_markers[index][3], '_blank');
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 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.