Develop Reference

simply google maps rotate custom marker jquery javascript

I get my all latitude and longitude values in firebase and display all values in my google map, Its moving also good.
My problem is my car images can not rotate the drivers direction. My self load svg image also.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=myapi"></script>
<script type="text/javascript">
onload = function() {
setInterval(function() {
$.ajax({
type: 'json',
url: 'google-ajax.php',
cache: false,
data: $('#dvMap').serialize(),
dataType: 'json',
success: function(data) {
var markers = data;
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: {
url: "http://localhost/uberx/admin/images/carnew.svg"
}
//icon:"http://localhost/uberx/admin/images/carnew.svg"
});
latlngbounds.extend(marker.position);
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
});
}, 5000);
}
/*$(document).ready(function(){
onload(); //Call auto_load() function when DOM is Ready
});
//Refresh auto_load() function after 10000 milliseconds
setInterval(onload,10000);*/
</script>

Google Maps API infowindows returns same content

I have the old infowindows in a loop problem where the content for the last loop is showing in all infowindows. Yes I know there are several questions about this already on Stack Overflow but none of them seem to work for me.
<script>
var map;
var myMarker = [];
var myData = [];
function initialize() {
var Nazareth = { lat: -29.847073, lng: 30.853513 };
var myCenter = new google.maps.LatLng(-29.847073, 30.853513);
var mapOptions = {
center: Nazareth,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
SetMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);
var infoWindow = new google.maps.InfoWindow();
function SetMarkers() {
var geocoder = new google.maps.Geocoder();
$('#btnTrainer').click(function () {
var suburb = $("#address").val();
$.ajax({
type: "POST",
url: '#Url.Action("ShowAll", "Map")',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ "suburb": suburb }),
cache: false,
dataType: "json",
success: function (myData) {
for (i = 0; i < myData.length; i++) {
var data = myData[i];
var name = myData[i].FirstName;
var address = myData[i].Address;
geocoder.geocode({ 'address': data.Address },
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "Trainer" + " "
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infoWindow.setContent(name + "," + address);
infoWindow.open(map, marker);
}
})(marker, i));
}
else {
console.log("We can't found the address, GoogleMaps say..." + status);
}
});
};
}
})
})
}
</script>

Assign the JSON string value to Latitude and Longitude in google.maps.LatLng(lat,lon) in MVC 4

Controler Action code
[HttpGet]
public JsonResult findlatlon()
{
Models.Vehicle_Tracking_SystemEntities entities = new Vehicle_Tracking_SystemEntities();
var latlon = entities.LatLangs.ToList();
return Json(new { AddressResult = latlon }, JsonRequestBehavior.AllowGet);
}
findlatlon.cshtml View code
{ ViewBag.Title = "findlatlon"; }
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCM7G5ruvunb0K7qxm6jb1TssJUwROqs-g" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var myMarkers = [];
$.ajax({
async: false,
type: "POST",
dataType: "json",
url: '#Url.Action("findlatlon", "Home")',
data: '{}',
success: function(result) {
//get address from controller action.....
myMarkers = result.AddressResult;
}
});
//init google map
function googleMap() {
//alert("Hellooooooo");//alert
var mapOptions = {
center: new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//alert(myMarkers[0].Latitude);//alert
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (i = 0; i < myMarkers.length; i++) {
data = myMarkers[i];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.Latitude, data.Langitude),
map: map
});
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.Location_Adress);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
//....
google.maps.event.addDomListener(window, 'load', googleMap);
})
</script>
<div id="map_canvas" style="border-top: none; width: 100%; margin-top: -1px;
height: 250px; background-color: #FAFAFA; margin-top: 0px;">
</div>
Out-Put
{"AddressResult":[{"Id":1,"Latitude":"33.9982","Langitude":"71.4999","Address":"Peshawar","Image":null,"Title":"Peshawar"}]}
So here the AJAX call the controller and controller retrieve the longitude and latitude from the database and return it in json string to view like the above output.
But here I wants that the Latitude and longitude value which return by the json is assign to the
center: new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude)
And I wants to show the location on google map according to the Lat and Long

Here is an example of displaying google map on button clicked, which display accordingly your response, make sure use 'markers.push(v);' need to make change accordingly your code.
var markers = [];
window.onload = function () {
$('#getMap').click(function () {
var deviceId = $('#deviceNumber').val();
if (deviceId != null || deviceId != "") {
$.ajax({
type: "GET",
url: url,
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$.each(data, function (i, v) {
markers.push(v);
});
var mapOptions = {
center: new google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
//***********ROUTING****************//
//Initialize the Path Array
var path = new google.maps.MVCArray();
//Initialize the Direction Service
var service = new google.maps.DirectionsService();
//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
var path = new google.maps.MVCArray();
var poly = new google.maps.Polyline({
map: map,
strokeColor: '#4986E7'
});
poly.setPath(path);
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
}
},
error: function () {
alert('error');
}
});
}
});
}
Hope this helps!

Step-1 First of all Create the Controller Action :
public ActionResult googlemap()
{
return View();
}
Step-2 Create Empty View to this action:
#{
ViewBag.Title = "Google Map";
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR-KEY" type="text/javascript"></script>
<script type="text/javascript">
var myMarkers = [];
$.ajax({
async: false,
type: "POST",
dataType: "json",
url: '#Url.Action("googlemapfindlatlon", "Home")',
data: '{}',
success: function (data) {
$.each(data, function (i, v) {
myMarkers.push(v);
});
var mapOptions = {
center: new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//alert(myMarkers[0].Latitude)
//alert(myMarkers[0].Langitude)
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < myMarkers.length; i++) {
var data = myMarkers[i]
var myLatlng = new google.maps.LatLng(data.Latitude, data.Langitude);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.Address);
infoWindow.open(map, marker);
});
})(marker, data);
}
//map.setCenter(latlngbounds.getCenter());
//map.fitBounds(latlngbounds);
}
});
//init google map
}
</script>
<div id="map_canvas" style="border-top: none; width: 100%; margin-top: -1px;
height: 250px; background-color: #FAFAFA; margin-top: 0px;">
</div>
Step-3 From the above View the ajax call is made i.e,
url: '#Url.Action("googlemapfindlatlon", "Home")'
so create the "googlemapfindlatlon" JsonResult action in controller:
public JsonResult googlemapfindlatlon()
{
Models.Vehicle_Tracking_SystemEntities entities = new Vehicle_Tracking_SystemEntities();
var latlon = entities.LatLangs.ToList();
//var latlon = entities.LatLangs.OrderByDescending(x => x.Id).Take(1).ToList();
return Json(latlon, JsonRequestBehavior.AllowGet);
}
This is do work correctly for me.
Thank You very much

How to remove all markers from google map before adding new ones

There is an asp.net web form to show the location of a moving object in google map. According to a given interval it fetches the current location of the object from the database and update it on the map.
Everything works fine. But per each interval it adds same markers on top of the previous ones. I want to clear the markers on the map before fetch the current data from database. I used markers.setMap(null) before calling current values. Then it doesn't show any marker on the map. Any help would be appreciated.
window.onload = function () {
LoadGoogleMap();
}
var markers = [];
var map;
function LoadGoogleMap() {
markers = GetMapData();
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
setInterval(SetMarker, 5000);
}
function SetMarker() {
//markers.setMap(null)
markers = [];
markers = GetMapData();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
icon = data.color;
icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.Name,
icon: new google.maps.MarkerImage(icon)
});
}
};
function GetMapData() {
var json = '';
$.ajax({
type: "POST",
url: "WebForm4.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (resp) {
json = resp.d;
},
error: function () { debugger; }
});
return json;
}

I found the answer as follows....
<script type="text/javascript">
window.onload = function () {
LoadGoogleMap();
}
var markers;
var map;
var markers1 = [];
function LoadGoogleMap() {
var mapOptions = {
center: new google.maps.LatLng('6.894373', '79.857963'),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
setInterval(SetMarker, 3000);
}
function SetMarker() {
for (i = 0; i < markers1.length; i++) {
markers1[i].setMap(null);
}
markers1 = [];
markers = [];
markers = GetMapData();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
icon = data.color;
icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.Name,
icon: new google.maps.MarkerImage(icon)
});
markers1.push(marker);
//var infoWindow = new google.maps.InfoWindow();
//infoWindow.setContent("<div style = 'width:50px;min-height:20px'>" + data.Description + "</div>");
//infoWindow.open(map, marker);
}
};
function GetMapData() {
var json = '';
$.ajax({
type: "POST",
url: "WebForm5.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function (resp) {
json = resp.d;
},
error: function () { debugger; }
});
return json;
}
</script>

Google map marker not displaying dynamically via ajax

My problem is my map marker didn't update dynamically via ajax, by right once my xml file being updated the map marker will change accordingly to the xml but it wasn't working, i have to re run the whole website in order to get the changes from the xml (refresh doesn't work as well).
Here is my code
function createTooltip(marker, key) {
//create a tooltip
var tooltipOptions = {
marker: marker,
content: places[key].tooltip_html,
cssClass: 'tooltip' // name of a css class to apply to tooltip
};
var tooltip = new Tooltip(tooltipOptions);
}
function refresh() {
setInterval(function () {
loadMarker();
}, 5000);
};
function initialize() {
var initialLocation;
var northpole = new google.maps.LatLng(90, 105);
var KL = new google.maps.LatLng(3.1597, 101.7000);
var browserSupportFlag = new Boolean();
var map;
var marker;
var mapOptions;
var mapDiv = document.getElementById("map_canvas");
if (places.length) {
mapOptions = {
center: new google.maps.LatLng(3.1597, 101.7000),
maxZoom: 21,
zoom: 17,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_LEFT
}
};
map = new google.maps.Map(mapDiv, mapOptions);
var markers = [];
for (var key in places) {
(function (myPlace) {
if (myPlace) {
var icon = {
url: myPlace.icon_html,
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(8, 41)
};
var shadow = {
url: "image/shadow.png",
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(8, 41)
};
var marker = new google.maps.Marker({
map: map,
shadow: shadow,
url: myPlace.URL_html,
icon: icon,
position: new google.maps.LatLng(myPlace.position.lat, myPlace.position.lng)
});
markers.push(marker);
createTooltip(marker, key);
google.maps.event.addListener(marker, 'click', function () {
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout(function () {
marker.setAnimation(null);
}, 2000);
openNewBackgroundTab(marker.url);
});
function openNewBackgroundTab(url) {
var a = document.createElement("a");
a.href = url;
var evt = document.createEvent("MouseEvents");
//the tenth parameter of initMouseEvent sets ctrl key
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
true, false, false, false, 0, null);
a.dispatchEvent(evt);
}
}
})(places[key]);
}
}
var markerCluster = new MarkerClusterer(map, markers);
// Try W3C Geolocation (Preferred)
if (navigator.geolocation) {
browserSupportFlag = true;
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({
position: initialLocation,
icon: 'image/footprint.png',
title: 'You are here !'
});
$('#findout').on('shown', function (e) {
google.maps.event.trigger(map, 'resize');
marker.setMap(map);
map.setCenter(initialLocation);
});
}, function () {
handleNoGeolocation(browserSupportFlag);
});
}
// Browser doesn't support Geolocation
else {
browserSupportFlag = false;
handleNoGeolocation(browserSupportFlag);
}
function handleNoGeolocation(errorFlag) {
if (errorFlag === true) {
alert("Geolocation service failed.");
initialLocation = KL;
} else {
alert("Stop using IE");
initialLocation = northpole;
}
map.setCenter(initialLocation);
}
}
google.maps.event.addDomListener(window, "load", initialize);
var places = Array();
function loadMarker() {
$.ajax({
url: "js/datatesting.xml",
dataType: 'xml',
success: onLoadMarker
});
};
function onLoadMarker(data) {
$(data).find("merchantMarker").each(function () {
places.push({
URL_html: "" + $(this).find('merchantProfileUrl').text() + "", //mapshop profile url
tooltip_html: "<div id='tooltips'>\n\
<div class='cover' style='background-image:url(image/default.jpg);'>\n\
<table style='margin-left:20px;'>\n\
<tr>\n\
<td><img class='photo img-circle' src='" + $(this).find('merchantProfilPicture').text() + "'>\n\
</td>\n\
</tr>\n\
<tr>\n\
<th class='text-center'>\n\
" + $(this).find('merchantName').text() + "\n\
</th>\n\
</tr>\n\
</table>\n\
</div>\n\
<div class='status'>\n\
<p>" + $(this).find('merchantAboutUs').text() + "</p>\n\
</div>\n\
</div>",
icon_html: '' + $(this).find('merchantMapMarker').text() + '', //mapshop marker
position: {
lat: $(this).find('merchantLat').text(),
lng: $(this).find('merchantLon').text()
} // shop lat and lon
});
});
};
$(document).ready(function () {
$('#findout').click(function () {
$('#suggestion').hide();
$('#function_stream').hide();
$('#function_me').hide();
$('#function_findout').show();
});
loadMarker();
refresh();
});
I'm not sure what's wrong with it, please enlighten me your help is appreciated.
UPDATED
var page = new Date().getTime();
$.ajax({
url:"js/datatesting.xml",
dataType: 'xml',
data: {page: page},
success: onLoadMarker
});
and another problem occurs , may i know how to delete the existing marker ? and replace it with the new one ? because now the new marker is stack on the old one if i'm not mistaken , usually, i will use $(#something).children().remove; before append some data into it , but for map i have no idea ..

The xml is being cached by the browser, add a URL parameter that changes every time the content changes (I usually use a function of the current time)
function loadMarker() {
var page = new Date().getTime();
$.ajax({
url: "js/datatesting.xml,
dataType: 'xml',
data: {page: page},
success: onLoadMarker
});
};
Related question:
Prevent caching of AJAX call