I am able to display my mp ok, but when I go to add markers it is no longer loading the map... i.e. when I add the latter php code to my initialize function it doesn't work! Any ideas??!
<script type="text/javascript">
var map = null;
function addMarker(lat, lng){
var point = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: point,
map: map
});
}
function initialize() {
var mapOptions = {
center: {lat: 54.872128, lng: -6.284874},
zoom: 15
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
<?php
$query = mysqli_query("select * from tester") or die(mysqli_error());
while($row = mysqli_fetch_array($query)){
$lat = $row['lat'];
$lng = $row['lng'];
echo ("addMarker($lat, $lng);");
?>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="height:600px; width:600px;
margin-top:100px; margin-bottom: 100px;
">
</div>
You have an issue with the scope of map, in your initialize function you are redeclaring it inside that scope instead of populating the previous map var, remove the var from your function as follows:
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); //Note i've removed the "var" keyword from this line.
A little more explanation:
var map = null; -> declared in global scope.
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); -> declared inside initialize function scope.
var marker = new google.maps.Marker({
position: point,
map: map // -> NULL because it will look for map in the parent scope.
});
I've found the issue, you are missing the closing bracers of your while statement:
<?php
$query = mysqli_query("select * from tester") or die(mysqli_error());
while ($row = mysqli_fetch_array($query)) {
$lat = $row['lat'];
$lng = $row['lng'];
echo ("addMarker($lat, $lng);");
} //Missing!!!
?>
Related
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
I have created a map to pin point the exact location for the customer's provided address. I am getting lat long for the address but it is not pointing out with a map marker on the map I do not know why it is not pointing out can anyone help me out pleasen here is my code
<?php
$addresse = $_POST['address'];
$prepAddr = str_replace(' ','+',$addresse);
$geocode = file_get_contents('https://maps.google.com/maps/api/geocode/json?address='.$prepAddr.'&sensor=false');
$output = json_decode($geocode);
$latitude = $output->results[0]->geometry->location->lat;
$longitude = $output->results[0]->geometry->location->lng;
?>
<div id="map" style="width:400px;height:400px;"></div>
<script>
function unick() {
var mapOptions = {
center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
zoom: 10,
mapTypeId: google.maps.MapTypeId.satellite
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
You have to add a marker to the map, like this:
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var latLng = new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: 'You are here'
label: 'You are here'
});
Edit: added title and label properties. For more information, see the Google Maps API Reference
I'm trying to load marker from database but those markers doesn't loaded. However if I try to load manually it's working.
my view view_file.php
var map;
function initialize(lt,lg) {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lt, lg),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
<?php foreach ($position as $row) { ?>
$lat = $row['lat'];
$longi = $row['longi'];
var latLng = new google.maps.LatLng($lat,$longi);
new google.maps.Marker({
position: latLng,
map: map
})
<?php } ?>
}
</script>
</head>
<body onload="initialize(-0.165343, 113.930935)">
<div id="map-canvas" style="width: 100%; height: 600px"></div>
my controller map.php
public function __construct(){
parent::__construct();
$this->load->model('maps');
}
function index(){
$data['position'] = $this->maps->marker();
$this->load->view('include/header');
$this->load->view('view_file', $data);
$this->load->view('include/footer');
}
my model maps.php
function marker(){
$post = $this->db->get('koor');
return $post->result();
}
This code below is works (entered coordinate manually). controller are same like above.
var map;
function initialize(lt,lg) {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lt, lg),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker(-0.735467, 110.521677);
marker(1.549480, 116.124705);
marker(-2.558367, 115.179880);
}
function marker(lt,lg){
var latLng = new google.maps.LatLng(lt,lg);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
</script>
</head>
<body onload="initialize(-0.165343, 113.930935)">
<div id="map-canvas" style="width: 100%; height: 600px"></div>
I've tried to modified my code, searched similiar problem but nothing works, this is last shape of my code.
UPDATE
I've already solve this
var map;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(-0.165343, 113.930935),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lat, longi, marker;
<?php foreach ($position as $row) { ?>
lat = <?php echo $row->lat ?>,
longi = <?php echo $row->longi ?>,
marker = new google.maps.LatLng(lat,longi);
new google.maps.Marker({
position: marker,
map: map
});
<?php } ?>
}
Your error:
$lat = $row['lat'];
$longi = $row['longi'];
This is showing up in the javascript.
Make sure that it is going to be executed in php and not javascript.
The right code:
<?php
$lat = $row['lat'];
$longi = $row['longi'];
?>
var map;
function initialize(lt,lg) {
var mapDiv = document.getElementById('map-canvas');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lt, lg),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var lat, longi;
<?php foreach ($position as $row) { ?>
lat = <?= $row->lat ?>;
longi = <?= $row->longi ?>;
marker(lat, longi);
<?php } ?>
}
function marker(lt,lg){
var latLng = new google.maps.LatLng(lt,lg);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
</script>
</head>
<body onload="initialize(-0.165343, 113.930935)">
<div id="map-canvas" style="width: 100%; height: 600px"></div>
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>