I have scriptet me a maps with markers based on a MySQL Table.
The position is in the Table.
Now, i would like to write with HTML in the InfoWindow, because it not show HTML on the InfoWindow on the Map.
downloadUrl('inc/map_bridge.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var ide = markerElem.getAttribute('id');
var desc = markerElem.getAttribute('beschreibung');
var type = markerElem.getAttribute('art');
var link = '<p>Klicke für weitere infos: Hier';
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = 'ID' + ide + ': ' + name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = desc + link
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
It show only so:
show example picture
the following i have in the MySQL-Table
first line<br>second line
If 'beschreibung' were the result of SELECT SQL, the reason is escaped SELECT
SQL result.
(I'm in short of reputation, so write in answer form.)
Related
Currently I have multiple dropdown field in screen. when selected dropdown value pass in the query param so I want to create dynamic query param added. my code is below
// this is one of the dropdown value
if (this.SearchText) {
query += 'q:' + SearchText + ',';
}
// this is the second one of dropdown value
if (this.MakeId) {
makename = this.SpaceToDash(this.MakesList.find(x => x.Id === +this.MakeId).Name);
navigateUrl += '/' + makename;
query += 'merk:' + this.MakeId + ',merkname:' + makename + ',';
}
this.router.navigate([ navigateUrl ], { queryParams: { query } });
So if "MakeId" is not dropdown value then should not added in "queryParams" so how can I do it. Above solution is not working it.
Apply solution for Dynamically create query Params in Angular 2 but it is not fit in my requirement. So can you help me anyone in it?
QueryParams should take an Object not a string ,
so you can do it by this way
let query = {};
// this is one of the dropdown value
if (this.SearchText) {
query['q'] = SearchText;
}
// this is the second one of dropdown value
if (this.MakeId) {
makename = this.SpaceToDash(this.MakesList.find(x => x.Id === +this.MakeId).Name);
navigateUrl += '/' + makename;
query['merk'] = this.MakeId;
query['makename'] = makename;
}
this.router.navigate([ navigateUrl ], { queryParams: query });
I'm still learning Ionic and programming in general. I followed a link on the internet and I was able to create the white and read the necessary data, but I am not able to insert data in the created table. Can anyone help me with this?
I follow this tutorial: ionic-sqlite
My code:
getRegiao() { // Regiões //
return new Promise<Regiao[]>((resolve, reject) => {
let sql = "SELECT NOM_REGIAO, ID " +
"FROM TB_REGIAO "
this.executeQuery(sql).then(data => {
let regioes = [];
if (data != undefined)
data.forEach(function (row) {
let regiao: Regiao = { nom_regiao: row[0], id: row[1] }
regioes.push(regiao);
});
resolve(regioes);
}).catch(error => {
console.log(error);
});
});
}
addUser() {
let sql = "INSERT INTO TB_USUARIO (EMAIL) VALUES ('BLITCRANK#HOTMAIL.COM')";
// let sql = "SELECT EMAIL FROM TB_USUARIO";
this.executeQuery(sql);
}
executeQuery(sql: string) {
let db: any;
return new Promise<any>((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open('GET', this.dbName, true);
xhr.responseType = 'arraybuffer';
xhr.onload = (e) => {
let uInt8Array = new Uint8Array(xhr.response);
db = new SQL.Database(uInt8Array);
let contents = db.exec(sql);
console.log(contents);
if (contents.length > 0)
resolve(contents[0].values);
else
resolve("query executada sem retorno")
};
xhr.send();
});
}
Please use this plugin , this is the plugin that I am using.
Take note in using execute sql like this db.executeSql('create table danceMoves(name VARCHAR(32))', {})
But rather use this db.executeSql('create table danceMoves(name VARCHAR(32))', [])
I dont know why instead of using object '{}' they replace it as array '[]' I think they forgot to update the documentaion
What I want to achieve -
I have 2 variables - Latitude & Longitude, and both are updating in the background. I want to draw a line as per the variables are updating.
What I'm thinking -
Create an array path.
Create the line.
Update the path of the line using setInterval
The Code -
var poly;
function initialize() {
var Latitude
var Longitude
Latitude= {code that updates}
Longitude= {code that updates}
//create map
var mapOptions = {
zoom: 8,
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var path = [];
poly = new google.maps.Polyline({
path: path,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
poly.setMap(map);
var myVar = setInterval(function(){updateposition()},2000);
function updateposition(){
path.push(new google.maps.LatLng(Latitude,Longitude));
}
}
Problem - No line is appearing at all :(
You need to update the path property of the polyline (poly.setPath(path)) after updating the path. Looking closer at your code, I am not sure how you expect Latitude and Longitude to update where they are (local to the initialize function).
function updateposition(){
path.push(new google.maps.LatLng(Latitude,Longitude));
poly.setPath(path);
}
here is an example that updates the polyline from computed coordinates based on the time
var poly;
var Latitude = null;
var Longitude = null;
var map = null;
var path = [];
function initialize() {
//create map
var mapOptions = {
zoom: 2,
center:new google.maps.LatLng(0,0)
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
poly = new google.maps.Polyline({
path: path,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
poly.setMap(map);
var myVar = setInterval(function(){updateposition()},2000);
}
function updateposition(){
var date = new Date();
var time = date.getMinutes()*60+date.getSeconds();
Latitude= 45*Math.sin((time-1800)*Math.PI/1800.0)
Longitude= (time/10)-180;
path.push(new google.maps.LatLng(Latitude,Longitude));
if (path.length == 1) {
map.setCenter(path[0]);
map.setZoom(8);
} else {
map.setCenter(path[path.length-1]);
}
poly.setPath(path);
}
google.maps.event.addDomListener(window, 'load', initialize);
I am trying to load a session data that is to be used to create a pie chart using Google Chart API.However I do not seem to be able to make it work.Can someone give me some guidance on how to do it?Below is the source code:
In AnalyzeUserClient.jsp:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
var sessionId = '<%= (HashMap<String, String>)request.getSession().getAttribute("hashMap") %>';
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
[sessionId],
]);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"Percentage of Category for User:"});
}
google.setOnLoadCallback(drawVisualization);
</script>
//HTML Code
<div id="visualization" style="width: 600px; height: 400px;"></div>
My data in the session looks like this:
{Environment=1, Education=1, Hospitality_Recreation=2, Disaster_Accident=1, Human Interest=3, Labor=1}
I've just complete something similar when adding a line chart to my Android application. I've modified my scenario to fit with yours;
var data = new google.visualization.DataTable();
// Slice-Value columns.
data.addColumn('string', 'Area');
data.addColumn('number', 'Value');
// Get the injected dataset.
var dataset = '<%= (HashMap<String, String>)request.getSession().getAttribute("hashMap") %>'; //
var mapSize = dataset.length;
for (var i = 0; i < mapSize; i++) { // Iterate over key-value pairs
var keyValuePair = dataset[i]; // Get the i'th value.
var keyValueArray = new String(keyValuePair).split("="); // Split on '='
data.addRow([keyValueArray[0], parseInt(keyValueArray[1])]); // Add record.
}
For completeness...
I've tested my approach in the Google Code Playground and it works. I added the code;
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
// Slice-value columns.
data.addColumn('string', 'Area');
data.addColumn('number', 'Value');
var dataset = new Array("Environment=1", "Education=1", "Hospitality_Recreation=2", "Disaster_Accident=1", "Human Interest=3", "Labor=1");
console.log(dataset);
var mapSize = dataset.length;
console.log(mapSize.toString());
for (var i = 0; i < mapSize; i++) { // Iterate over key-value pairs
var keyValuePair = dataset[i]; // Get the i'th value.
var keyValueArray = new String(keyValuePair).split("="); // Split on '='
data.addRow([keyValueArray[0], parseInt(keyValueArray[1])]); // Add record.
}
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"Area-Value plot for SO"});
}
I am building a website which use geolocation code, It suppose to load mapCanvas and after user click on "Finde Me!" button get his location and set a center of a map based on user location. It's working fine with Firefox, Chrome, Safari, tested on regular PC and iPhone the only device doesn't work with it is any mobile phone with Android. here is a code:
<script src="http://maps.google.com/maps?file=api&v=3&key=YourKey"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(17, 25);
iconBlue.shadowSize = new GSize(1, 1);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);
var iconRed = new GIcon();
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(17, 25);
iconRed.shadowSize = new GSize(1, 1);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["restaurant"] = iconBlue;
customIcons["bar"] = iconRed;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(50.061795,19.936924), 16);
// Change this depending on the name of your PHP file
GDownloadUrl("Your_xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
function findLoc(){
if (!navigator.geolocation) {
alert('Sorry, your browser does not support Geo Services');
}
else {
// Get the current location
navigator.geolocation.getCurrentPosition(showMap);
}
}
function showMap(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var myPoint = new GLatLng(lat, lon);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(myPoint, 15);
GDownloadUrl("Your_xml.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
}
});
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
}
I couldn't find any solution to make it work.
PS
There is no errors or statements giving any hint making it more understandable.
Device got GPS enable.
pleas help I've been trying to figure it out for 2 weeks
I'm afraid you just have an arduous old-fashioned debug in front of you. My approach would be to add visible output at various important points in the code (just before and after getCurrentPosition is called, and at the beginning of showMap, for instance) and narrow down from there just where the failure is occurring. Once you know what's failing you can probably develop an idea of why, but until you know that you're flailing in the dark.
(I've worked on a geolocation-based mobile webapp that supported Android, so in case you need any reassurance, there's nothing inherently impossible about your situation.)