I was trying to center the map at the calculated geographic center and then add markers to show the original points, as well as one for the center but they don't seem to be showing up. When I submit the data to getdata.php it just shows a blank screen. Does anyone see a problem with the javascript for the marker? Any help would be great. Thanks!
Did you check value of location[i]? If you are in default [latitude, longitude], try:
position: new google.maps.LatLng(location[i])
EDITED Try this again:
for(var i = 0; i<(<?php echo json_encode($counter); ?>;); i++ ){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitudesoflocation[i], longitudesoflocation[i]),
map: map,
title: ("Point " + String.fromCharCode(94 + i))
});
There is a typo:
position: new google.maps.LatLng(latitudesoflocation[i],longitudesoflocation[i]);,
//______________________________________________________________________________^
remove the semicolon
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 come for help for a javascript problem.
I'm adding a Google map to my website; this map is currently integrated in my page and works fine.
My problem is that i have a lot of markers to place on the map and i want to use a loop to do it.
The coordinates of the markers are stored in a Site[] table.
For now i have this :
// Create markers on the map
for( i = 0; i < Site.length; i++ )
{
var pos = new google.maps.LatLng(Site[i][7], Site[i][8]); //7 and 8 are the latitude and longitude of the markers.
marker = new google.maps.Marker({
position: pos,
map: maCarte, //my map
title: Site[i][1] //1 is the description of the marker
}
});
And, of course, this doesn't work. Does anybody have an idea ?
You messed up with the different parenthesis... If you would indent your code properly, this would be quite obvious.
// Create markers on the map
for (i = 0; i < Site.length; i++) {
var pos = new google.maps.LatLng(Site[i][7], Site[i][8]); //7 and 8 are the latitude and longitude of the markers.
marker = new google.maps.Marker({
position: pos,
map: maCarte, //my map
title: Site[i][1] //1 is the description of the marker
});
}
If it still doesn't work after you corrected this, then problem must be somewhere else. Without knowing the content of the Site array, we can't help any further.
JSFiddle demo
I implemented google map in jsp. everything is fine. our project is ITS(Intelligent Transport System). Here every time we have to track the vehicle and show its position and direction of vehicle in map.For that we used map and create markers according to lat and lng values we are getting. We use a Bus icon to show a vehicle but its not looking good. So we thought to change it to arrow (like Navigation in smartphone).
The code for creating marker is,
function createMarker(point, number,vn,position) {
var busimage="";
if(position=="same")
{
busimage="Resources/travel_bus1.png";
}else if(position=="notsame")
{
busimage="Resources/travel_bus3.png";
}
var marker = new google.maps.Marker({
position: point,
map: map,
raiseOnDrag: true,
icon:busimage,
// animation: google.maps.Animation.DROP,
draggable: false,
zIndex: number,
id:vn
});
var html = number;
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + point.lat() +
'<br>Longitude: ' + point.lng() + '<br>BusNo : '+ marker.get("id"),
maxwidth: 1000
});
So now we have to change bus icon to arrow icon and also we have to show the direction of the vehicle is moving. I have searched some online resources but it was useless. I am getting only implementing map in jsp. So can anyone help me to add arrow in map according to lat lng I am getting along with the direction. If you know any online resource also help full to me. Thank you . .
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);
}
}
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: