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 . .
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'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 creating a web app that has 2 instances of Google Maps API: one which has many points, and one which only has one point.
They seem to be conflicting with each other, because when I view one page before the other, the other map is not centered in the correct spot.
First Page:
Second Page:
Here is a link to my project: http://jakeserver.com/Apps/BostonLandmarks/B12/index.html
Here is the code that is generating the Google Maps:
var detailsMap = new google.maps.Map(document.getElementById("map_" + this.id), {
zoom: 10,
center: new google.maps.LatLng(landmarkList[rowCount].landmarkGPSNorth, landmarkList[rowCount].landmarkGPSWest),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var detailsInfoWindow = new google.maps.InfoWindow();
var detailsMarker, j;
detailsMarker = new google.maps.Marker({
position: new google.maps.LatLng(landmarksArray[rowCount].landmarkGPSNorth, landmarksArray[rowCount].landmarkGPSWest),
map: detailsMap,
icon: "Icons/red-pin.pdf"
});
detailsInfoWindow.setContent(landmarksArray[rowCount].landmarkName);
detailsInfoWindow.open(detailsMap, detailsMarker);
google.maps.event.addListener(detailsMarker, 'click', (function(detailsMarker, j) {
return function() {
detailsInfoWindow.open(detailsMap, detailsMarker);
}
})(detailsMarker, j));
}
document.getElementById("map_" + this.id).style.height = 300 + "px";
document.getElementById("map_" + this.id).style.width = 300 + "px";
Any ideas?
A long ago I'd a similar problem with a Ajax-Based navigation in a website, each page had a map, the first one working normally, but the next ones had the same problem you're having.
Before displaying the map you should create a new bound object. Just like this:
var bounds = new google.maps.LatLngBounds();
After that. You've to extend the bounds passing your markers positions. Like this:
bounds.extend(marker.position);
And finally, when the map is actually visible and rendered. Run the following lines.
google.maps.event.trigger(secondMapInstance, 'resize');
secondMapInstance.fitBounds(bounds);
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.
I am mapping some concert locations on google maps, using data from Songkick.com's API. I'm making a call to the data using jQuery. When mapping a concert, if a single venue has multiple concerts scheduled, all of the markers are placed in the exact same location. This means that only the marker of the most recent concert is visible, and the google maps infoWindow only displays the data for that most recent concert.
I would like to make it so that all concerts taking place at that exact same lat/long display their info in the infoWindow. So when you click on the marker, all scheduled shows are displayed in the infoWindow, not just the most recent show.
Here is part of my javascript:
function doSearch(locations) {
deleteOverlays();
jQuery.getJSON("http://api.songkick.com/api/3.0/search/locations.json?query=" + locations + "&apikey=XXXXXXXX&jsoncallback=?", function(data){
var id = data.resultsPage.results.location[0].metroArea.id;
jQuery.getJSON("http://api.songkick.com/api/3.0/metro_areas/" + id + "/calendar.json?apikey=XXXXXXXX&jsoncallback=?", function(data){
var bounds = new google.maps.LatLngBounds();
var point;
$.each(data.resultsPage.results.event, function(i, item) {
var event = item;
point = new google.maps.LatLng(
parseFloat(item.location.lat),
parseFloat(item.location.lng));
var marker = new google.maps.Marker({
map : map,
animation: google.maps.Animation.DROP,
position : point
});
markersArray.push(marker);
var contentString = '<p><b>' + item.displayName + '</b></p>' + '<p>' + item.location.city + '</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
if (currentInfoWindow != null) {
currentInfoWindow.close();
}
infowindow.open(map, marker);
currentInfoWindow = infowindow;
});
To see this application in action, I have set up a temporary website.
http://129.219.78.186/~masgis/tward/songkick/Metro.html
To see what I am talking about, type in the name of a major city, and click a marker that drops. Only the most recent concert will show up.
Thanks in advance, any help is much appreciated.
It looks like the SongKick API call returns a unique ID for each venue. So here's what you can do:
Add each event object to an array.
Pull out unique venue IDs from the events in the array.
Loop through each unique venue ID, pulling out each event with that venue ID, and build the info window string by looping through this subset of events.
Build the marker using the venue info, setting the info window string to the marker.
It's a bit of JavaScript code, nested loops, and a bit of a performance hit, but it should do the trick.