I have a map with several markers where the location comes from firebase up to that point, all right. The problem is when the possiblity of the marked update it to create a new marker rather than deletes the old one.
I have already researched here on the site but none answered the question.
Either delete all or only one at a time.
That is why I am opening this new question. Thank you all right away.
<?php
mysql_select_db($database_vpt2, $vpt2);
$query_onlines = "SELECT * FROM motoristas WHERE `online` = 1";
$onlines = mysql_query($query_onlines, $vpt2) or die(mysql_error());
$row_onlines = mysql_fetch_assoc($onlines);
$totalRows_onlines = mysql_num_rows($onlines);
?>
<script type="text/javascript">
var markers = [];
function initMap() {
var myLatLng = {lat: -5.079166, lng: -42.812019};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: myLatLng
});
<?php do { ?>
var adaRef = firebase.database().ref("local/<?php echo $row_onlines['id_motorista']; ?>");
adaRef.on("value", function(snapshot) {
var rodar = parseInt(snapshot.val() .giro);
var lat1 = snapshot.val() .latitude;
var lng1 = snapshot.val() .longitude;
var myLatLng = {lat: lat1, lng: lng1};
var image = '../icon/marker.png';
var marker = new google.maps.Marker({
id: <?php echo $row_onlines['id_motorista']; ?>,
position: myLatLng,
map: map,
title: 'OK',
icon: image,
});
markers.push(marker);
});
<?php } while ($row_onlines = mysql_fetch_assoc($onlines)); ?>
}
</script>
You can update the marker by keeping the reference of markers in an array. Then update it something like below.
var myNewLatlng = new google.maps.LatLng(-2.363882,131.044922);
marker.setPosition(myNewLatlng);
Reference: https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker
Related
The problem is when I pass the data controller to blade/JS, first I am converting it to JSON(because no other way) and then pass it to da javascript. But my label is not work properly. The script code is right below.
var estates = <?php echo json_encode($estates);?>
function initMap()
{
var options =
{
zoom : 10,
center : {lat:34.652500, lng:135.506302}
};
var map = new google.maps.Map(document.getElementById('map'), options);
for (var i=0; i < estates.length; i++) {
#foreach ($estates as $est)
var marker = new google.maps.Marker({
map: map,
label: estates.price,
position: {
lat: {{$est->lat}},
lng: {{$est->lng}}
}
});
#endforeach
}
}
So if I try to pass price is like this {{$est->price}} then I get syntax token error. Because price is varchar with Japanese characters. So I need to convert it Json first and itetare it. But when I do that, there are no markers and label in the map. Just empty map, also there is no error in the console too? If I delete the JS for loop then markers are coming but no label...
Is anyone know what am I missing here?
Try to use new google.maps.LatLng() function:
var estates = <?php echo json_encode($estates);?>
//estates = <?php echo json_decode($estates);?>
function initMap()
{
var options =
{
zoom : 10,
center : {lat:34.652500, lng:135.506302}
}
var map = new google.maps.Map(document.getElementById('map'), options);
for (var i=0;i<estates.length;i++){
var latLng_ = new google.maps.LatLng(estates['lat'],estates['lng']);
var marker = new google.maps.Marker({
map: map,
position: latLng_,
icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAy10Br9W1wWCSQNPc6f9CarvNEO4qqCg1BDbe7_mYZqHwXj3v',
label: estates['price']
});
var infoWindow = new google.maps.InfoWindow({
content: estates['price']
});
marker.addListener('click', function () {
infoWindow.open(map, marker)
});
}
}
I wrote the code below... this code is to select to long and lati already inserted in database and create a marker in the google map, I tried to put the selected data in a table, it worked fine, but once I put them on the map as marker, it show me only on marker, can anyone help please?
<?php
$conn = getConn();
$sql ="select Latitude,Longtitude from location";
$result=$conn->query($sql);
while($row = mysqli_fetch_array($result)){
$locations = array(
$row['Latitude'],
$row['Longtitude']
);
foreach ($locations as $loc){
// echo $loc . "</br>";
$Latitude = $row['Latitude'];
$Longtitude = $row['Longtitude'];
echo $Latitude . "</br>" . $Longtitude;
}
}
?>
<script>
function initMap(){
var location = {lat: <?=$Latitude?>, lng: <?=$Longtitude?>};
var map= new google.maps.Map(document.getElementById("map"),{
zoom: 13,
center: location});
var marker = new google.maps.Marker({position:location, map:map});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByZSFwCa5FByzySCLUPzLqzeWKt3RyNwA&callback=initMap">
</script>
You'll need to create an instance of marker for every one you want to appear on the map.
The location variable only holds the last one; you'll have to do something like:
var location = {lat: <?=$Latitude?>, lng: <?=$Longtitude?>};
var map = new google.maps.Map(document.getElementById("map"),{
zoom: 13,
center: location});
for (let loc of <?=$locations?>) {
new google.maps.Marker({position:loc, map:map});
}
I am trying to include google maps on a homepage for the first time and just found the code which creates a google map with a particular location -
var myLatlng1 = new google.maps.LatLng(53.65914, 0.072050)
and I don't know how to change the location where the marker is- where can I find the location coordinates? Thanks!
<html>
<head>
<title> Map </title>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 500px;
width: 800px;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script>
var map;
function initialize()
{
var myLatlng1 = new google.maps.LatLng(53.65914, 0.072050);
var mapOptions =
{
zoom: 10,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
<?php
$sql = mysql_query("SELECT * FROM data ORDER BY ID DESC");
while($row =mysql_fetch_array($sql))
{
$desc = $row['DESCRIPTION'];
$location = $row['LOCATION'];
$counter += 1;
?>
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $location; ?>),
map: map,
title: '<?php echo $desc; ?>',
icon: '/image/cam.png'
});
navigator.geolocation.getCurrentPosition(showPosition);
}
var showPosition = function (position)
{
map.setCenter(new google.maps.LatLng(position.coords.latitude,
position.coords.longitude), 16);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
This is easy . First go to google maps and select the location you want to zoom in on. Once there look at the url at the top of the page it should look like this:
https://www.google.com/maps/#44.0005355,-71.0799974,12z
This is your lat long 44.0005355 and -71.0799974 Just replace them with the ones you have.
The portion of code that set the marker ( included the position) is this
var yourLat = 45.2323; // is only sample value
ver yourLng = 14.1818; // is only sample value
var marker = new google.maps.Marker({
position: new google.maps.LatLng(yourLat, yourLng),
map: map,
title: 'your title',
icon: '/image/cam.png'
});
You must assign the coord in google map notation so if you haven't this coord use google maps and click the point you desise. the coord appear in a box
i have a code that is supposed to fetch data (latitude and longitude) from database and display it on google map along with markers, the problem is that it fetches and displays latitude and longitude of only one row, but it is supposed to show all the places. Would appreciate if anyone could help me.
<script>
<?php
require 'connection.php';
$parent_id = $_GET['country'];
$fid = $_GET['fid'];
$sql = "SELECT * FROM features_for_office WHERE parent_id='".$parent_id."' and fid='".$fid."' ";
$result = mysqli_query($con, $sql);
if (mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$officeid= $row["officeid"];
$sql1 = "SELECT * FROM register_office WHERE id='".$officeid."' ";
$result1 = mysqli_query($con, $sql1);
if (mysqli_num_rows($result1) > 0)
{
while($row1 = mysqli_fetch_assoc($result1))
{
$officelat= $row1["lat"];
$officelon= $row1["lon"];
$officetitle= $row1["officetitle"];
//echo $officelat;
//echo $officelon;
//echo $officetitle;
?>
var myCenter=new google.maps.LatLng(<?php echo $officelat;?>,<?php echo $officelon;?>);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"<?php echo $officetitle;?>"
});
infowindow.open(map,marker);}
google.maps.event.addDomListener(window, 'load', initialize);
<?}
}
}
}
mysqli_close($con);
?>
</script>
<div id="googleMap" style="width:1145px;height:380px;"></div>
The error is that you are initializing the map every time until the loop completes,it will recreate the map every time and the last latlon marker will be shown on the map.Call the initialize method on page load and place the following code inside the loop.
var myCenter=new google.maps.LatLng(<?php echo $officelat;?>,<?php echo $officelon;?>);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
using SQL you can fetch Latitude and Longitude from Database using this code:
protected void googleMap_Load(object sender, EventArgs e)
{
//Establishing SQL connection
SqlConnection connStr = new
SqlConnection(ConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString);
connStr.Open();//Open the connection to Database
//Generate the database query to fetch the content details
SqlCommand cmd = new SqlCommand("select LAT,LON from DATA where ID=9", connStr);
SqlDataAdapter sqlda = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
sqlda.Fill(ds);
}
The Problem still remains as how to use this dataTable to set marker on google map...
The problem can be re-framed as to fetch the LatLng from database
I used the script to display map
<script>
var myLatLon = new google.maps.LatLng(13, 77);//Defining Latitude and Longitude
var mapProp = {
center: myLatLon, // Center of display page.
zoom: 8, //Zoom level
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('dvMap'), mapProp);
var marker = new google.maps.Marker({
position: myLatLon,
map: map,
});
</script>
I am using google maps api to place markers on a map. The gps coordinates of the markers are stored in a mySQL database. I have been able to create the markers however the locations will constantly changing so I was wondering how I would go about updating the markers' locations so that the markers will move across the map. Here is my code so far:
<!DOCTYPE html>
<html>
<head><title>Map</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(36.9947935, -122.0622702);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = new google.maps.MarkerImage('busIcon.png',
// The image size
new google.maps.Size(44, 46),
// The origin
new google.maps.Point(0,0),
// The anchor
new google.maps.Point(22, 23));
var shadow = new google.maps.MarkerImage('busIcon_shadow.png',
new google.maps.Size(58, 46),
new google.maps.Point(0,0),
new google.maps.Point(22, 23)
);
var shape = {
coord: [1, 1, 1, 45, 43, 45, 43 , 1],
type: 'poly'
};
var markers = [
<?php
// Make a MySQL Connection
mysql_connect("**********", "**********", "**********") or die(mysql_error());
mysql_select_db("matsallen") or die(mysql_error());
//Get number of rows
$result = mysql_query
(
'SELECT COUNT(*) FROM busTrack AS count'
)
or die(mysql_error());
$row = mysql_fetch_array( $result );
$length = $row["COUNT(*)"];
for ($count = 1; $count <= $length; $count++) {
//Get data from MySQL database
$result = mysql_query
(
'SELECT * FROM busTrack WHERE busID = '.$count
)
or die(mysql_error());
// store the record of the "busTrack" table into $row
$row = mysql_fetch_array( $result );
// Echo the data into the array 'markers'
$output = '{id: "Bus '.$row[busID].'", lat: '.$row[lat].', lng: '.$row[lon].'}';
if ($count != $length) {
$output = $output.',';
};
echo $output;
};
?>
];
for (index in markers) addMarker(map, markers[index]);
function addMarker(map, data) {
//create the markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.id,
icon: image,
shape: shape,
shadow: shadow
});
//create the info windows
var content = document.createElement("DIV");
var title = document.createElement("DIV");
title.innerHTML = data.id;
content.appendChild(title);
var infowindow = new google.maps.InfoWindow({
content: content
});
// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:75%; height:75%; margin:10%; allign:center;"></div>
</body>
</html>
To change the location of a marker, call setPosition() on that marker:
marker.setPosition(new google.maps.LatLng(newLat,newLng);
To do this, you will need to save all your markers in an array. Perhaps something like this would work:
var myMarkers = new Array();
for (index in markers) {
myMarker[ markers[index]['id'] ] = addMarker(map, markers[index]);
}
function addMarker(map, data) {
//create the markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.id,
icon: image,
shape: shape,
shadow: shadow
});
//create the info windows
var content = document.createElement("DIV");
var title = document.createElement("DIV");
title.innerHTML = data.id;
content.appendChild(title);
var infowindow = new google.maps.InfoWindow({
content: content
});
// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
return marker;
}
Then, when the position of a marker needs to change, hopefully you know the bus ID and can just call:
myMarkers['Bus 47'].setPosition(new google.maps.LatLng(newLat,newLng);
I didn't test the above code so there may be small syntax errors or something, but it should give you the idea.