I am trying to update marker on google map for every x seconds based on the data returned from a AJAX call. The Ajax function is called for every x seconds but the marker is not shown. Below is the JavaScript I wrote. Anyone know the reason? Thanks.
<script type="text/javascript">
var map
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(1.32643, 103.79426),
zoom: 11
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
//Ajax call to get position
function set_center() {
var feedback = $.ajax({
type: 'GET',
url: 'get_gps_position',
success: function (data) {
console.log(data);
if (data['gps_position_longitude'] != null && data['gps_position_latitude'] != null ) {
var latlng = new google.maps.LatLng(data['gps_position_longitude'], data['gps_position_latitude']);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"});
};
},
error: function(data) {
$("#result").html(data);
console.log(data)
}
});
}
setInterval(set_center, 10000);
</script>
Assuming that the request runs as expected and returns a valid JSON:
var latlng = new google.maps.LatLng(data['gps_position_longitude'], data['gps_position_latitude']);
A google.maps.LatLng expects the arguments to be in the order latitude, longitude , not longitude,latitude .
Furthermore: instead of creating new markers on each request you better create a single marker and use setPosition() to update the position.
Additionally: to ensure that the marker is visible inside the viewport also set the center of the map to latlng
Try use javascript to alert a message with the new marker's position to see if it really gets updated in the background. If it dose, then its to do with refreshing the dom or something.
Related
I'm using google maps API with multiple equipment locations fed from a Mysql database. I can successfully show the markers on the map and make them draggable. If I drag any marker to a new location, it prompts to ask if you want to update the database and if yes, supposedly sends the updated lat/lng to the database. This isn't working correctly, and instead always only updates the last item in the markers array.
Note that I have done this successfully with a single marker, and am able to update it anywhere I drag the new marker. But for multiple markers, I just don't seem to be able to get the current dragged marker's id and new lat/lon data to send back to the ajax call to update the database for that particular marker. I'm thinking it's because I'm not accessing the current marker's data, but I'm struggling with how to get that.
Any ideas what I'm doing wrong? I know it's got to be something simple I'm overlooking.
Here's a Fiddle to demonstrate my issue: JSFiddle
<!-- php stuff would be up here to get the database and feed the google API. Instead here I've just created the const markers to show the markers. -->
<html>
<head>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</head>
<body>
<div id="mapCanvas"></div>
</body>
</html>
<style>#mapCanvas {
width: 100%;
height: 850px;
}
</style>
<script>
function initMap() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'hybrid'
};
// Display a map on the web page
map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
map.setTilt(100);
// Multiple markers location, latitude, and longitude
const mapIcon = "https://maps.google.com/mapfiles/marker_grey.png";
const markers = [
['Pike-1', 35.42526738862006, -81.172076628969, mapIcon, 10819],
['Pike-2', 35.425311504805924, -81.17216095766817, mapIcon, 10820],
['Pike-3', 35.425171475622824, -81.17188553479076, mapIcon, 10821],
['Pike-4', 35.42530668524588, -81.17134696588283, mapIcon, 10822],
['Pike-5', 35.42559347700399, -81.17218140606506, mapIcon, 10823],
['Pike-5', 35.426094498781885, -81.17195101338058, mapIcon, 26455],
['Pike-6', 35.42532308059036, -81.17215505637606, mapIcon, 26456]
];
// Place each marker on the map
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
var eid = markers[i][4];
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
icon: markers[i][3],
equipid: markers[i][4],
title: markers[i][0]
});
//Add listener if marker is moved, then ask to update and call function if yes.
google.maps.event.addListener(marker, 'dragend', function() {
var mytitle = marker.equipid;
var latLng = marker.latLng;
let updateDB = confirm('Update location to database?');
if (updateDB) {
update_marker(latLng, mytitle);
console.log(latLng, mytitle);
}
});
// Center the map to fit all markers on the screen
map.fitBounds(bounds);
function update_marker(Marker, mytitle)
//This is the function that sends the update to the ajax call. Currently not working.
//with multiple markers, I can't get the selected marker equipment ID and new lat/lng.
{
//Update saved marker from DB and map using jQuery Ajax
var mLatLang = marker.getPosition().toUrlValue(); //get marker position - this does not get the marker position, but the last row of the result set from mysql
var mytitle = marker.equipid; //get marker equipment id - this currently gets the last row[id] of the mysql result set.
var myData = {
update: 'true',
name: mytitle,
latlang: mLatLang
};
$.ajax({
type: "POST",
url: "equipment-ajaxupdate-gps.php",
data: myData,
success: function(data) {
alert(data);
console.log(mytitle, mLatLang);
},
error: function(xhr, ajaxOptions, thrownError) {
alert("Error! Update Failed!")
console.log(mytitle, mLatLang);
}
});
}
} //end of for( i = 0)
// Set zoom level
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(19);
google.maps.event.removeListener(boundsListener);
});
} //End of function(initmap)
// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);
</script>
I made a few changes to your code - this seems to work OK as it sends the correct details via the ajax call so updating the db should be trivial from that point forth.
With the script tag that loads the Google Maps api you specify the callback function so there is no need to then manually call initMap function as you are with google.maps.event.addDomListener(window, 'load', initMap);
The update_marker function can be simplified to use a single argument that is the reference to the marker itself. This greatly simplifies accessing properties of the marker itself as you can see below where self is used within the function ( could be any name - it is a reference to the marker )
Rather than the clunky for (i = 0; i < markers.length; i++) { loop to iterate through the array elements a simpler forEach loop means you no longer need to use the name[i][2] type syntax - though if the actual data is coming from your db you'll likely be using JSON anyway which would necessitate a different loop strategy.
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' && isset(
$_POST['update'],
$_POST['name'],
$_POST['latlang']
)){
$_POST['date']=date( DATE_RSS );
$payload=json_encode( $_POST );
exit( $payload );
}
?>
<html>
<head>
<style>
#mapCanvas {
width: 100%;
height: 850px;
}
</style>
<script src='//code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<div id="mapCanvas"></div>
<script>
function initMap() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId:'hybrid'
};
map = new google.maps.Map( document.getElementById("mapCanvas"), mapOptions );
map.setTilt(100);
const mapIcon = "https://maps.google.com/mapfiles/marker_grey.png";
const markers = [
['Pike-1', 35.42526738862006, -81.172076628969, mapIcon, 10819],
['Pike-2', 35.425311504805924, -81.17216095766817, mapIcon, 10820],
['Pike-3', 35.425171475622824, -81.17188553479076, mapIcon, 10821],
['Pike-4', 35.42530668524588, -81.17134696588283, mapIcon, 10822],
['Pike-5', 35.42559347700399, -81.17218140606506, mapIcon, 10823],
['Pike-6', 35.426094498781885, -81.17195101338058, mapIcon, 26455],
['Pike-7', 35.42532308059036, -81.17215505637606, mapIcon, 26456]
];
// Place each marker on the map.
// A forEach loop is, IMO, cleaner than the for(i=0;i<n;i++) {} etc
markers.forEach(a=>{
let title=a[0];
let latlng=new google.maps.LatLng( a[1], a[2] );
let icon=a[3];
let eid=a[4];
let marker=new google.maps.Marker({
position: latlng,
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
icon:icon,
/* custom properties */
equipid:eid,
title:title
});
bounds.extend( latlng );
google.maps.event.addListener( marker, 'dragend', function(e) {
if( confirm('Update location to database?') ) {
/*
Within the context of this function `this` refers
to the marker itself that invoked the event handler.
Passing `this` as the function parameter to `update_marker`
allows us to access all properties of the marker from
within that function.
As the marker has been assigned custom properties when it was
added to the map we can access those easily within `update_marker`
*/
update_marker( this );
console.log('Update - Position:%s, Title:%s', this.getPosition().toUrlValue(), this.title );
}
});
function update_marker( self ){
/*
self is the marker reference
*/
$.ajax({
type:"POST",
url:location.href, //"equipment-ajaxupdate-gps.php"
data: {
update:'true',
name:self.title,
latlang:self.getPosition().toUrlValue()
},
success: function( response ) {
console.log( 'Ajax response: %o',response );
bounds.extend( latlng );
map.fitBounds( bounds );
},
error: function( error ) {
alert( "Error! Update Failed!\n"+error )
}
});
};
});//end forEach loop
map.fitBounds( bounds );
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"></script>
</body>
</html>
I have some JSON data which i want to appear on google map. But the thing is its showing nothing. The JSON data will load from a server where the index file is also located. when i try to debug the problems i got some errors that i didn't understood. So, here is my data:
var map, infowindow; ////
var json = $.getJSON( "file.json", function( json ) {
function initialize() {
var mapOptions = {
////
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var bounds = new google.maps.LatLngBounds();
var responses = json.ResponseData;
for(var i = 0; i <= responses.length; i++) {
// Adding a new marker for the object
var position =
new google.maps.LatLng( responses.CoordinateY, responses.CoordinateX ); ////
bounds.extend( position ); ////
var marker = new google.maps.Marker({
position: position, ////
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
title: responses.BuildingName
});
// Adding a new info window for the object
var clicker = addClicker(marker, responses.BuildingName); ////
} map.fitBounds( bounds ); ////
// Adding a new click event listener for the object
function addClicker(marker, content) {
google.maps.event.addListener(marker, 'click', function() {
if (infowindow) {infowindow.close();}
infowindow = new google.maps.InfoWindow({content: content});
infowindow.open(map, marker);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
});
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6U22yg_ty9a4LFvJi6E0rYCyGwYt04Xk&callback=json">
</script>
<script src="https:////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="map-canvas"></div>
the json data file link is JSON DATA
and here is the link of the html file HTML
The thing is i want to show the markers on google map. The json file will be updating all time.
Thanks
The callback in your API load is incorrect. json is not a function.
I have put together this script (note: I'm using jQuery 1.11.2) that gets lat long coordinates from a PHP operation (used for something else) and displays a map with a customized marker and infowindow that includes HTML for formatting the information that is displayed.
<script src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>
<script type="text/javascript">
var maplat = 41.36058;
var maplong = 2.19234;
function initialize() {
// Create a Google coordinate object for where to center the map
var latlng = new google.maps.LatLng( maplat, maplong ); // Coordinates
var mapOptions = {
center: latlng,
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
streetViewControl: false,
zoomControl: false,
mapTypeControl: false,
disableDoubleClickZoom: true
};
map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
// CREATE AN INFOWINDOW FOR THE MARKER
var content = 'This will show up inside the infowindow and it is here where I would like to show the converted lat/long coordinates into the actual, human-readable City/State/Country'
; // HTML text to display in the InfoWindow
var infowindow = new google.maps.InfoWindow({
content: content,maxWidth: 250
});
var marker = new google.maps.Marker( {
position: latlng,
map: map,
title: "A SHORT BUT BORING TITLE",
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
What I'm trying to achieve is to do a reverse geocode on the coordinates stored in the latlng variable and get back the results of that in a "City, State, Country" format and insert that into the HTML for the informarker stored in the "content" variable.
Have tried multiple approaches without success. Please note that I've deliberately left out the reverse geocoding script I tried to use for clarity purposes.
Edit: I've adjusted the script presented here to comply with the rules about it being clear, readable and that it actually should work. I also include a link to a CodePen so that you can see it in action: Script on CodePen
Regarding including the script for reverse geocoding, what I did was a disaster, only breaking the page and producing "undefined value" errors. I'd like to learn the correct way of doing this by example, and that's where the wonderful StackOverflow community comes in. Thanks again for your interest in helping me out.
Use a node instead of a string as content , then you may place the geocoding-result inside the content, no matter if the infoWindow is already visible or not or when the result is available(it doesn't even matter if the InfoWindow has already been initialized, a node is always "live").
Simple Demo:
function initialize() {
var geocoder = new google.maps.Geocoder(),
latlng = new google.maps.LatLng(52.5498783, 13.42520);
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 18,
center: latlng
}),
marker = new google.maps.Marker({
map: map,
position: latlng
}),
content = document.createElement('div'),
infoWin = new google.maps.InfoWindow({
content: content
});
content.innerHTML = '<address>the address should appear here</address>';
google.maps.event.addListener(marker, 'click', function() {
infoWin.open(map, this);
});
geocoder.geocode({
location: latlng
}, function(r, s) {
if (s === google.maps.GeocoderStatus.OK) {
content.getElementsByTagName('address')[0].textContent = r[0].formatted_address;
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>
Here's how I would do it:
function reverseGeocoder(lat, lng, callback) {
var geocoder = new google.maps.Geocoder();
var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
geocoder.geocode({"latLng" : point }, function(data, status) {
if (status == google.maps.GeocoderStatus.OK && data[0]) {
callback(null, data[0].formatted_address);
} else {
console.log("Error: " + status);
callback(status, null);
}
});
};
And basically you would call the function like:
reverseGeocoder(lat, lng, function(err, result){
// Do whatever has to be done with result!
// EDIT: For example you can pass the result to your initialize() function like so:
initialize(result); // And then inside your initialize function process the result!
});
I am learning to use javascript right now with Rails and I'm having some issues with updating my markers according to my current position using AJAX. I believe the ready page:load is not running the updated coords that have been attached as a data-attribute, coords since the page is not technically reloading. How can I use my current position data and update it with events with longitude/latitude values?
var map;
$(document).on('ready page:load', function() {
if ("geolocation" in navigator) {
myMap.init();
var coords = $('#map-canvas').data('coords');
if (coords){
myMap.addMarkers(coords);
}
}
});
myMap.init = function() {
if(navigator.geolocation){
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
navigator.geolocation.getCurrentPosition(function(position){
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var infoWindow = new google.maps.InfoWindow({
map: map,
position: pos
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
map: map
});
map.setCenter(pos);
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
$.ajax({
url:"/all_events",
method: "GET",
data: {
latitude: latitude,
longitude: longitude
},
dataType: 'script'
});
});
} else {
document.getElementById('map-canvas').innerHTML = 'No Geolocation Support.';
}
};
myMap.addMarkers = function(coords){
var image = "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"
coords.forEach(function(coord){
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(coord.latitude, coord.longitude),
map: map,
icon: image
});
});
}
In order to make your script work in the way you want please try out the following steps:
Put your foreach loop in a function and call it at the end of your successive AJAX callbacks.
Load the AJAX once the Google Maps have finished loading completely. If Google Maps library has not finished loading than you wont be able to create a Google LatLng object, this is what is probably happening over here.
Hope this would help
I've been following the official documentation on how to add markers on the map so far
Nevertheless, I can see only one marker at a time max. If I try to add another one, then it doesn't work (I can't even see the first one).
My process is the following:
I initialize gmaps api:
jQuery(window).ready(function(){
//If we click on Find me Lakes
jQuery("#btnInit").click(initiate_geolocation);
});
function initiate_geolocation() {
if (navigator.geolocation)
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBbfJJVh0jL1X9b7XFDcPuV7nHD1HlfsKs&sensor=true&callback=initialize";
document.body.appendChild(script);
navigator.geolocation.getCurrentPosition(handle_geolocation_query, handle_errors);
}
else
{
yqlgeo.get('visitor', normalize_yql_response);
}
}
Then, I display it on the appropriate div. But when it comes to make the AJAX call, in order to get my locations of the different markers I'd like to display, It just doesn't work properly. Here is the code with a simple map displayed (since that's the only thing working for me so far).
function handle_geolocation_query(position){
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeId: google.maps.MapTypeId.SATELLITE
}
alert('Lat: ' + position.coords.latitude + ' ' +
'Lon: ' + position.coords.longitude);
$('#map-canvas').slideToggle('slow', function(){
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
});
$.when( getLakes(position.coords.latitude, position.coords.longitude)).done(function(results) {
// InitializeGoogleMaps(results);
if(results)
var data = results.map(function (lake) {
//Check if the lake has any open swims, if not, the button will not be clickable and an alert will pop up
if (lake.available>0)
clickable=true;
else
clickable=false;
return {
name: lake.name,
fishs: lake.fisheryType,
swims: lake.swims,
dist: lake.distance,
lat: lake.latitude,
long: lake.longitude,
id: lake.id,
avail: lake.available,
clickable: clickable,
route: Routing.generate('lake_display', { id: lake.id, lat: position.coords.latitude, lng: position.coords.longitude})
}
});
var template = Handlebars.compile( $('#template').html() );
$('#list').append( template(data) );
} );
};
So I'd like to add markers after the AJAX call. I've set up a function that I should call in the when()
function InitializeGoogleMaps(results) {
};
to display the markers in a foreach loop but nope, can't make it work. It looks like this :
CentralPark = new google.maps.LatLng(37.7699298, -122.4469157);
marker = new google.maps.Marker({
position: location,
map: map
});
Any help would be great !
Thanks
The main issue is that the map variable is declared only in the scope of the anonymous callback on slideToggle. First of all declare at the top-level function scope.
function handle_geolocation_query(position){
var map,
mapOptions = {
zoom: 14,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeId: google.maps.MapTypeId.SATELLITE
}
...
Then change the slideToggle callback to initialise the variable instead of redeclaring:
$('#map-canvas').slideToggle('slow', function(){
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
});
Then you should pass map as a second parameter to your InitializeGoogleMaps function and call it using InitializeGoogleMaps(results, map). See where this gets you and hit me back with any questions.