WORK FINE YET
I need to show only the items entered username and password.
I can not send php variables to javascript to call back to the database and update the map
I have this code work fine ( only part):
function initialize() {
var myOptions = {
zoom: 10,
//center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
<?
$query = mysql_query("SELECT lat2,lon2,idruta,FROM_UNIXTIME(time) as time FROM bus");
$valores="[";
$indice = 0;
while ($row = mysql_fetch_array($query)){
$namex=$row['idruta'];
$lat=$row['lat2'];
$lon=$row['lon2'];
$desc = $row['time'];
$name = $namex ." ".$desc;
$indice++;
$valores = $valores. "['$name',$lat,$lon,$indice],";
}
$valores = substr($valores, 0, -1);
$valores = $valores ."]";
echo ("setMarkers(map, $valores)");
?>
// setMarkers(map, beaches);
}
function codeAddress() {
var myOptions = {
zoom: 10,
//center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
<?
$query = mysql_query("SELECT lat2,lon2,idruta,FROM_UNIXTIME(time) as time FROM bus where user = $user");
$valores="[";
$indice = 0;
while ($row = mysql_fetch_array($query)){
$namex=$row['idruta'];
$lat=$row['lat2'];
$lon=$row['lon2'];
$desc = $row['time'];
$name = $namex ." ".$desc;
$indice++;
$valores = $valores. "['$name',$lat,$lon,$indice],";
}
$valores = substr($valores, 0, -1);
$valores = $valores ."]";
echo ("setMarkers(map, $valores)");
?>
}
function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('marker-panel.png',
new google.maps.Size(220, 39),
new google.maps.Point(0,0),
new google.maps.Point(50, 39));
/* var shadow = new google.maps.MarkerImage('marker-panel.png',
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));*/
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
//shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
bounds.extend(myLatLng);
var label = new Label({
map: map
});
label.set('zIndex', 1234);
label.bindTo('position', marker, 'position');
label.set('text', beach[0]);
//label.bindTo('text', marker, 'position');
}
map.fitBounds(bounds);
}
</script>
</head>
<body onload="initialize()">
<div>
<input id="usuario" type="textbox" value="usuario">
<input id="password" type="password" value="password">
<input type="button" value="Enviar" onclick="codeAddress()">
</div>
<div id="map_canvas" style="height:90%;top:30px"></div>
</body>
</html>
but I need to show only the user points and password entered. And i don´t know
thanks
Before calling those java script function write one php code to check userpoints and password.If userpoints and password is correct means only those scripts are called.
Related
<script type='text/javascript'>
jQuery(document).ready(function($){
var geocoder;
var map;
var markersArray = [];
var infos = [];
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bounds = new google.maps.LatLngBounds();
var encodedString;
var stringArray = [];
encodedString = document.getElementById("encodedString").value;
stringArray = encodedString.split("****");
var x;
for (x = 0; x < stringArray.length; x = x + 1)
{
var addressDetails = [];
var marker;
addressDetails = stringArray[x].split("&&&");
var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
marker = new google.maps.Marker({
map: map,
position: lat,
//Content is what will show up in the info window
content: addressDetails[0]
});
markersArray.push(marker);
google.maps.event.addListener( marker, 'click', function () {
closeInfos();
var info = new google.maps.InfoWindow({content: this.content});
//On click the map will load the info window
info.open(map,this);
infos[0]=info;
});
//Extends the boundaries of the map to include this new location
bounds.extend(lat);
}
//Takes all the lat, longs in the bounds variable and autosizes the map
map.fitBounds(bounds);
//Manages the info windows
function closeInfos(){
if(infos.length > 0){
infos[0].set("marker",null);
infos[0].close();
infos.length = 0;
}
}
});
</script>
</head>
<body>
<div id='input'>
<?php
$encodedString = "";
$x = 0;
$result = mysql_query("SELECT * FROM `table-name`");
while ($row = mysql_fetch_array($result, MYSQL_NUM))
{
if ( $x == 0 )
{
$separator = "";
}
else
{
$separator = "****";
}
$encodedString = $encodedString.$separator.
"<p class='content'><b>Lat:</b> ".$row[1].
"<br><b>Long:</b> ".$row[2].
"<br><b>Name: </b>".$row[3].
"<br><b>Address: </b>".$row[4].
"</p>&&&".$row[1]."&&&".$row[2];
$x = $x + 1;
}
?>
<input type="hidden" id="encodedString" name="encodedString" value="<?php echo $encodedString; ?>" />
</div>
<div id="map_canvas"></div>
I have used above code for google map location from MySQL database.
Above code fetch lat, Lang from MySQL database and dynamically create google map.
When I run above code It gave me error like that:
There are two errors named too much recursion & initMap is not function.
Can anybody help me to sort out it.
Thanks in advance.
You have not defined initMap in your js file. That's why you are getting that error. You probably need to remove the callback part from the google map api script
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
To
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
Also check if the lat and lon contain valid numeric values in the following statement
var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]);
I am wondering how I might add variables from my php code into a javascript code.
For example, my query results in vertreklat, vertreklong, aankomstlat, aankomstlong
My javascript code:
echo "<script src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>
<script>
/* ***** Start CustomMarker ***** */
function CustomMarker(latlng, map, marker_id, hovercard) {
this.latlng_ = latlng;
this.marker_id = marker_id;
this.hovercard_content = hovercard;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var me = this;
var div = this.div_;
if (!div) {
div = this.div_ = document.createElement('DIV');
div.id=me.marker_id;
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
div.className = 'map-marker show-hovercard';
div.style.left = (point.x-6) + 'px';
div.style.top = (point.y-23) + 'px';
$(div).attr('data-hovercard-content', me.hovercard_content);
}
};
CustomMarker.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
CustomMarker.prototype.getPosition = function() {
return this.latlng_;
};
/* ***** End CustomMarker ***** */
function initialize() {
var markers = [];
var bounds = new google.maps.LatLngBounds();
var myOptions = {
center: new google.maps.LatLng(20, 20),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN,
panControl: false,
streetViewControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
pos = new google.maps.LatLng(vertreklat, vertreklong);
overlay = new CustomMarker(pos, map, 'marker_KMSP', 'some name');
overlay.setMap(map);
bounds.extend(pos);
pos = new google.maps.LatLng(aankomstlat, aankomstlong);
overlay = new CustomMarker(pos, map, 'marker_RJAA', 'some name');
overlay.setMap(map);
bounds.extend(pos);
var flightPath = new google.maps.Polyline({path: [new
google.maps.LatLng(vertreklat, vertreklong),new google.maps.LatLng(aankomstlat,
aankomstlong)], strokeColor: '#ffffff', strokeOpacity: 0.7, strokeWeight: 2, geodesic:
true });
flightPath.setMap(map);
map.fitBounds(bounds);google.maps.event.addListener(map, 'zoom_changed',
function() {
if(map.getZoom()<2) {
map.setZoom(2);
}
});
}
$(document).ready(function() {
initialize();
});
</script>";
All of the data that needs to come from my query goes within this part of the script:
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
pos = new google.maps.LatLng(**vertreklat, vertreklong**);
overlay = new CustomMarker(pos, map, 'marker_KMSP', 'some name');
overlay.setMap(map);
bounds.extend(pos);
pos = new google.maps.LatLng(**aankomstlat, aankomstlong**);
overlay = new CustomMarker(pos, map, 'marker_RJAA', 'some name');
overlay.setMap(map);
bounds.extend(pos);
var flightPath = new google.maps.Polyline({path: [new
google.maps.LatLng(**vertreklat, vertreklong**),new google.maps.LatLng(**aankomstlat,
aankomstlong**)], strokeColor: '#ffffff', strokeOpacity: 0.7, strokeWeight: 2, geodesic:
true });
flightPath.setMap(map);
But I am confused as to how to accomplish this task....
Try this:
var flightPath = new google.maps.Polyline({path: [new
google.maps.LatLng(".$row['vertreklat'].",".$row['vertreklong']."),new google.maps.LatLng(".$row['aankomstlat'].",".$row['aankomstlong'].")], strokeColor: '#ffffff', strokeOpacity: 0.7, strokeWeight: 2, geodesic:
true });
Since you started the echo wqith double quotes you can use them again to break the string and concatenate with dot .. By the way should your PHP variables not have a $ ?
For such long blocks of output, instead of echo return back literal output with ?>. Then insert small blocks of <?php ... ?> where you need to echo variables.
?>
<script src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>
<script>
/* ***** Start CustomMarker ***** */
function CustomMarker(latlng, map, marker_id, hovercard) {
this.latlng_ = latlng;
this.marker_id = marker_id;
this.hovercard_content = hovercard;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var me = this;
var div = this.div_;
if (!div) {
div = this.div_ = document.createElement('DIV');
div.id=me.marker_id;
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
div.className = 'map-marker show-hovercard';
div.style.left = (point.x-6) + 'px';
div.style.top = (point.y-23) + 'px';
$(div).attr('data-hovercard-content', me.hovercard_content);
}
};
CustomMarker.prototype.remove = function() {
if (this.div_) {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
};
CustomMarker.prototype.getPosition = function() {
return this.latlng_;
};
/* ***** End CustomMarker ***** */
function initialize() {
var markers = [];
var bounds = new google.maps.LatLngBounds();
var myOptions = {
center: new google.maps.LatLng(20, 20),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN,
panControl: false,
streetViewControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
pos = new google.maps.LatLng(<?php echo $vertreklat ?>, <?php echo $vertreklong ?>);
overlay = new CustomMarker(pos, map, 'marker_KMSP', 'some name');
overlay.setMap(map);
bounds.extend(pos);
pos = new google.maps.LatLng(<?php echo $aankomstlat ?>, <?php echo $aankomstlong ?>);
overlay = new CustomMarker(pos, map, 'marker_RJAA', 'some name');
overlay.setMap(map);
bounds.extend(pos);
var flightPath = new google.maps.Polyline({path: [new
google.maps.LatLng(vertreklat, vertreklong),new google.maps.LatLng(<?php echo $aankomstlat ?>, <?php echo $aankomstlong ?>)], strokeColor: '#ffffff', strokeOpacity: 0.7, strokeWeight: 2, geodesic:
true });
flightPath.setMap(map);
map.fitBounds(bounds);google.maps.event.addListener(map, 'zoom_changed',
function() {
if(map.getZoom()<2) {
map.setZoom(2);
}
});
}
$(document).ready(function() {
initialize();
});
</script>
You can use short echo open tag:
<script>
var foo = <?=$foo?>;
console.log(foo);
</script>
or use AJAX
I have this code that was once working but now is not. It is for displaying multiple locations on a map using Google maps version 3, by getting the locations from a table in the database, and looping through them using a PHP WHILE loop. Only one location is being displayed. The code is as below:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map ;
function initialize() {
var latlng = new google.maps.LatLng(53.933056, 9.503611);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<?
$query = mysql_query("SELECT
markers.id,
markers.place,
markers.address,
markers.lat,
markers.lng,
markers.description,
markers.type,
images.id,
images.thumb_path,
images.main
FROM
markers,images
WHERE
markers.type = '".$type."'
AND markers.id = images.id
AND images.main = 1
");
$numRows = mysql_num_rows($query);
if($numRows > 0){
while($row = mysql_fetch_assoc($query)){
?>
var contentString = '<div id="content">'+
'<img src="<?=$row['thumb_path'];?>" width="100" height="100" hspace="2" align="left" />'+
'<h4><?=$row['place'];?></h4><p><?=$row['address'];?></p>'+
'<p align="right">More Details'+
'</div>';
var marker = add_marker(<?=$row['lat'];?>, <?=$row['lng'];?>,"<?=strtoupper($row['place']);?>",contentString);
marker.setMap(map);
<? } ?>
<? } ?>
}
function add_marker(lat,lng,title,box_html) {
var infowindow = new google.maps.InfoWindow({
content: box_html
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
title: title
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
return marker;
}
Kindly assist.
I am working on this from several hours but no success.
This code is working fine one time and add 100 records on map. Then I want to add more results from db after first 100. how can I do that please guide me. Here is the code.
I also try with ajax but json damage after result came back from php so that is also not work for me.
<div class="span12 geoData">
<?php
$db = new db();
$data = array();
$tweets = array();
$counter = 0;
$query = "SELECT * FROM `tweets` WHERE `geo_lat` != 0 LIMIT 100";
$results = $db->select($query);
$count = mysqli_num_rows($results);
while (($row = mysqli_fetch_assoc($results)) !=FALSE) {
$tweets[$counter]['tweet_text'] = $row['tweet_text'];
$tweets[$counter]['geo_lat'] = $row['geo_lat'];
$tweets[$counter]['geo_long'] = $row['geo_long'];
$counter++;
}
$data['count'] = $count;
$data['tweets'] = $tweets;
$jsonData = json_encode($data);
?>
<script src="mapsApi.js"></script>
<script src="markerclusterer_compiled.js"></script>
<script type="text/javascript">
var data = <?php echo $jsonData; ?>;
function initialize() {
var center = new google.maps.LatLng(39.744408452010475, -100.15602825000002);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
infowindow = new google.maps.InfoWindow({
content: "holding..."
});
var markers = [];
for (var i = 0; i < data.count; i++) {
var contentSTR = '<div id="info"><p><span>Ttitle:</span> '+ data.tweets[i].tweet_text + '</p></div>';
var dataTweets = data.tweets[i];
var latLng = new google.maps.LatLng(dataTweets.geo_lat,
dataTweets.geo_long);
var marker = new google.maps.Marker({
position: latLng,
html: contentSTR,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-container">
<div id="map"></div>
</div>
</div>
I have a json output that shows my info correctly but i am having a hell of a time getting it to show a icon on each pair of lat+lng from my DB
Here is my current code
<?php
require('inc/db.inc.php');
mysql_connect($connect, $user, $pword) or die(mysql_error());
mysql_select_db($db) or die(mysql_error());
$sql=mysql_query("SELECT store_lat,store_long FROM location WHERE status='Active'");
while($row=mysql_fetch_assoc($sql))
$output[]=$row;
$locations=(json_encode($output));
?>
<script src="http://maps.google.com/maps/api/js?sensor=false&key=MY_API_KEY" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var image = 'images/icon.png';
var myLatlng = new google.maps.LatLng(42.548625, -92.548765);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var poiJson = <? echo $locations ?>;
for (var i = 0;i < poiJson.length; i += 1) {
var lat = poiJson[i].store_lat;
var lng = poiJson[i].store_long;
addMarker(lat,lng,i);
};
}
function addMarker(lat,lng,no){
var latlng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: latlng,
map: map
// if i uncomment the icon line no map will show at all
//icon: image
});
}
</script>
<? include "header.php"; ?>
<p>
<table width="1024">
<tr>
<td align="center" valign="top"><div id="map_canvas" style="width: 95%; height: 600px;"></div></td>
</tr>
</table>
</p>
</body>
</html>
Edit
if i change the image into the addMarker function this dose not change anything.
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(42.548625, -92.548765);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var poiJson = <? echo $locations ?>;
for (var i = 0;i < poiJson.length; i += 1) {
var lat = poiJson[i].store_lat;
var lng = poiJson[i].store_long;
addMarker(lat,lng,i);
};
}
function addMarker(lat,lng,no){
var image = 'images/icon.png';
var latlng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: latlng,
map: map
//icon: image
});
}
</script>
There is no image defined in the scope of addMarker (hence you will get an error). It is only local to initialize. Either define it in addMarker or make it global.