i am try to create marker on map.
i am use bing Map
i have two string with comma separate.
in two different variable.
var Region = "Pune,Kolkata";
var Activity = "Cricket,One Day";
i am try this java-Script ajax:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/MapControl/mapcontrol.ashx?v=6.3c">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var Region = 'Pune,Kolkata';
var cntry_code= 'IN';
var Activity = "Cricket,One Day"
var map = null;
function GetMap() {
map = new VEMap('myMap');
map.LoadMap();
$(document).ready(function(){
var array_region = Region.split(',');
var array_activtiy= Activity.split(',');
for(var item_region in array_region)
for (var item_activity in array_activtiy)
{
$.ajax({
url: "http://services.gisgraphy.com//geocoding/geocode?address="+array_region[item_region]+"&country="+cntry_code+"&format=json",
async: false,
dataType:'jsonp',
success: function(data){
lat = data.result[0].lat;
lng = data.result[0].lng;
alert(lat);
alert(lng);
map.LoadMap(new VELatLong(lat,lng));
var pinpoint = map.GetCenter();
shape = new VEShape(VEShapeType.Pushpin, pinpoint);
shape.SetTitle("Activity Name:- ");
shape.SetDescription(array_activtiy[item_activity]+","+array_region[item_region]);
map.AddShape(shape);
}
});
alert(array_region[item_region]);
}
});
}
</script>
</head>
<body onload="GetMap();">
<div style="width:630px; background-color: #E0E0E0; height: 500px; border: 1px solid black">
<div id='myMap' style="position:relative; width:600px; height:400px; margin-left:15px"></div>
</div>
</body>
</html>
with this try to split string with comma.
and pass this to ajax url.
and got the lat and lng.
use this lat and lng.
set those place there Activity.
its work fine.
just little problem its add last place and last activity as a marker.
i think problem in my for loop.
please some one check it out my this query.
thanks.
You should not use the for(var item_region in array_region) construct with Arrays. Replace that line with something like:
for (var item_region, i = 0; i < array_region.length; i++)
item_region = array_region[i];
You will need to do a similar change on the following line - left as an exercise
Related
I'm attempting to dynamically create multiple charts in a single html page, everything loads perfectly, except that the graph that is displayed last is the only one that has interactivity available (ex: hover over points to read data, click on legend to highlight line..) while the others will only display static charts.
HTML Code:
<html>
<head>
<title>Dashboard</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type = "text/javascript" src = "./scripts/scripts.js"> </script>
</head>
<body>
</body>
<script language = "JavaScript">
var dashboard = getParameterByName("dashboard");
google.charts.load('current', {packages: ['corechart','line']});
buildDashboard(dashboard);
</script>
</html>
Main JS functions:
function buildDashboard(dashboard)
{
var panels = getPanels(dashboard);
google.charts.setOnLoadCallback(function(){
drawCharts(dashboard, panels);
});
}
function drawCharts(dashboard, panels)
{
for(var i = 0; i < panels.length; i++)
{
var panel = panels[i];
var _data = getPanelData(dashboard, panel.Id);
if(panel["Type"] == "LineChart")
{
var legend = JSON.parse(JSON.stringify(_data[0]));
var options = buildLineChartOptions(panel, legend);
var data = google.visualization.arrayToDataTable(beautifyData(panel, _data));
var divname = panel.Id;
if(!document.getElementById(divname))
document.body.innerHTML += "<div id = " + divname + " style = \"width: 100%; height: 600px; margin: 0 auto\"></div>";
var chart = new google.visualization.LineChart(document.getElementById(divname));
chart.draw(data, options);
}
}
}
Solved: The problem was solved by creating the <div> elements for all charts prior to drawing the charts one by one.
i have a code that is supposed to read from a html file, split it into an array and display parts of that array, but when going though with alert, i found that $.get is not actually getting the file
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<body>
<button onclick="myfunction()">update</button>
<div id="div1"></div>
<script>
function myfunction() {
var info = "";
$.get("../Read_Test/text.html", function(data) {
SomeFunction(data);
});
alert(info);
var array = info.split("§n");
var people = array[1].split(",");
for (var i = 0; i < people.length; i++) {
document.getElementById("div1").innerHTML = people[i] + "<br>";
}
}
function SomeFunction(data) {
var info = data;
}
</script>
</body>
</html>
the directories are on a server and go like so:
Sublinks->Read_Test->This_File.html,text.html
The objective of this is that a file would have something along the lines of "a§nb1,b2,b3,§n" and the script would split it via "§n" then get "array[1]" and split that via ",". lastly it displays each part of that newly created array on a new line, so a file with "a§nb1,b2,b3,§n" would result in:
b1
b2
b3
Please help
Ajax is asynchronous, it make request and immediately call the next instruction and not wait for the response from the ajax request. so you will need to process inside of $.get. success event.
I have changed delimiter character to ¥. change same in text.html. problem was you have not mentioned character set to utf8 and due to this it could not recognized the special character and subsequently not able to split the string. i have aldo document type to HTML5.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<button onclick="myfunction()">update</button>
<div id="div1"></div>
<script>
function myfunction() {
$.get("../Read_Test/text.html", function(data) {
var info = data;
var array = info.split("¥");
var people = array[1].split(",");
for (var i = 0; i < people.length; i++) {
document.getElementById("div1").innerHTML += people[i] + "<br>";
}
});
}
</script>
</body>
</html>
I am trying to add direction to a line overlay i have added to map using openlayers. I have created map and line overlay inside my jsp but the problem is that when ${variable} is used in html file, I am getting output as expected with correct direction shown. But when implemented inside jsp all arrows seem to b pointing to just one direction.
I think the problem is that ${variable} in javascript not substituted in jsp.
Here is the piece of code.
direction.jsp
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Line Direction Arrow in OpenLayers</title>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
#map {
width: 600px;
height: 400px;
border: 1px solid #ccc;
}
</style>
<script src="js-libraries/OpenLayers.js" type="text/javascript"></script>
<script src="js-libraries/directions.js" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var myNetwork =null;
function init(){
map = new OpenLayers.Map('map');
var ol_osm = new OpenLayers.Layer.OSM("Simple OSM Map");
map.addLayers([ol_osm]);
//vector layer
var layer = new OpenLayers.Layer.Vector("Line");
map.addLayer(layer);
// add edit panel
var editPanel = new OpenLayers.Control.EditingToolbar(layer);
map.addControl(editPanel);
//add direction layer
OpenLayers.Renderer.symbol.arrow = [0,2, 1,0, 2,2, 1,0, 0,2];
var styleMap = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults(
{graphicName:"arrow",rotation : "${angle}"},
OpenLayers.Feature.Vector.style["default"]));
var dirLayer = new OpenLayers.Layer.Vector("direction", {styleMap: styleMap});
map.addLayer(dirLayer);
map.setCenter(new OpenLayers.LonLat(-702335,7043201),15);
//console.log("Starting map");
}
function updateDirection() {
//alert(map.layers[2].name);
map.layers[2].removeAllFeatures();
var points=[];
var features =map.layers[1].features;
//alert(features.length);
for (var i=0;i<features.length ;i++ ) {
var linePoints = createDirection(features[i].geometry,get_position_value(),get_foreachseg_value()) ;
//alert(get_foreachseg_value());
// for (var j=0;j<linePoints.length ;j++ ) {
// linePoints[j].attributes.lineFid = features[i].fid;
// }
points =points.concat(linePoints);
// alert(points);
}
map.layers[2].addFeatures(points);
}
function get_position_value() {
for (var i=0; i < document.direction.position.length; i++)
{
if (document.direction.position[i].checked)
{
return document.direction.position[i].value;
}
}
}
function get_foreachseg_value() {
if (document.direction.foreachseg.checked){
return true;
} else {
return false;
}
}
</script>
</head>
<body onload="init()">
<table><tr>
<td><div id="map" class="smallmap"></div></td>
<td><div align="left">
<form name="direction">
<input type="radio" name="position" value="start"/> start <br>
<input type="radio" name="position" value="end"/> end <br>
<input type="radio" name="position" value="middle" CHECKED/>middle <br>
<input type="checkbox" name="foreachseg" /> Create for each segment of line <br>
<input type=button value="Update" onClick=updateDirection(); />
</form>
</div></td>
</tr></table>
</body>
</html>
Is there anyway to get the corresponding angle in jsp? the page seems to b working fine when the file was renamed direction.html But when renamed as direction.jsp the angle value is not received correctly. I need to use this with my jsp application. please help.
Thanks and Regards
Ginger.
As JSP is server side and javascript is client side so you can't pass parameters like this, an alternate would be to add angle as hidden field in your jsp
<input type="hidden" value="angle_value_comes_here" id="angle"/>
and then access it in javascript using
var angle = $('#angle').val();
Hope it helps
I am posting my updated code in here.
function updateDirection() {
flagMarkerStatus = 5;
var angles = 0;
dirLayer.removeAllFeatures();
var linePoints=[];
var points=[];
var features =lineLayer.features;
document.getElementById("angle").value="";
for (var i=0;i<features.length ;i++ ) {
var linePoints = createDirection(features[i].geometry,"middle",true);
points =points.concat(linePoints);
angles = document.getElementById("angle").value;
//'angle' div contains angle values seperated by '~'
angles=angles.replace(/\[|\]/g, '');
angles=angles.split("~");
for(var i=0;i<linePoints.length;i++){
var styleMap = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults(
{graphicName:"arrow",rotation : angles[i],strokeWidth: 3,strokeColor: "#ff0000"},
OpenLayers.Feature.Vector.style["default"]));
dirLayer.styleMap = styleMap;
dirLayer.addFeatures(linePoints[i]);
}
}
}
edit1= clearifying sample code
edit2= well this is getting embarassing, now I will post the actual code
I am trying to make a custom interior streetview. I am attempting to convert custom interior shot to be relative to arbitrary starting position by substituting the argument of the function below with variable, but would break the streetview. I am not familiar with javascript.
description:"TEST TEST TEST TSET",latLng:new google.maps.LatLng(54.156654,69.696969)
runs fine.
var demolat = 34.995348; // declared at beginning of function
var demolon = 135.7395;
var wlat = demolat;
var wlon = demolon;
.. lots of code .. // lots of code goes here
description:"TEST TEST TEST TSET",latLng:new google.maps.LatLng(wlat,wlon)
does not work.
full code
the script would not work properly when replaced line described above.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry" type="text/javascript"></script>
<script type="text/javascript" code="maps_code">
var initPosPanoID,initPosPanoData,streetView,map_canvas;
function initialize(){
var neeclat = 35.564157;
var neeclon = 139.714947;
//var demolat = 34.995138;
//var demolon = 135.739689;
var demolat = 34.995348;
var demolon = 135.7395;
var wlat = demolat;
var wlon = demolon;
swbound = new google.maps.LatLng(wlat-0.0003,wlon-0.0003);
nebound = new google.maps.LatLng(wlat+0.0003,wlon+0.0003);
var initPos=new google.maps.LatLng(wlat,wlon);
var mapOptions={zoom:14,center:initPos,mapTypeId:google.maps.MapTypeId.ROADMAP};
var mapDiv=document.getElementById("map_canvas");
map_canvas=new google.maps.Map(mapDiv,mapOptions);
var bounds=new google.maps.LatLngBounds(swbound,nebound);
var overlay=new google.maps.GroundOverlay("./5Bc3IIj.jpg",bounds);
overlay.setMap(map_canvas);
var streetViewOptions={pov:{zoom:1,heading:161,pitch:-2.6}};
var streetViewDiv=document.getElementById('streetview_canvas');
streetViewDiv.style.fontSize="15px";
streetView=new google.maps.StreetViewPanorama(streetViewDiv,streetViewOptions);
streetView.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(mapDiv);
google.maps.event.trigger(map_canvas,"resize");
map_canvas.setStreetView(streetView);
streetView.registerPanoProvider(getCustomPanorama);
var streetViewInitPos=new google.maps.LatLng(wlat,wlon);
// var streetViewInitPos=new google.maps.LatLng(34.995348,135.7395);
var streetviewService=new google.maps.StreetViewService();
var radius=50;
streetviewService.getPanoramaByLocation(streetViewInitPos,radius,function(result,status){
if(status==google.maps.StreetViewStatus.OK){
initPosPanoID=result.location.pano;
initPosPanoData=result;
streetView.setPosition(result.location.latLng);
map_canvas.panTo(result.location.latLng);
}
}
);
google.maps.event.addListener(streetView,"links_changed",createCustomLink);
var map_marker=new google.maps.Marker({map:map_canvas});
google.maps.event.addListener(streetView,"position_changed",function(){
var position=this.getPosition();
var map_bounds=map_canvas.getBounds();
map_canvas.panTo(position);
});
}
function getCustomPanoramaTileUrl(panoID,zoom,tileX,tileY){
return"./"+panoID+'/'+tileX+'-'+tileY+'_s1.jpg';
}
function getCustomPanorama(panoID){
var streetViewPanoramaData={
links:[],copyright:'',tiles:{
tileSize:new google.maps.Size(2048,1024),worldSize:new google.maps.Size(2048,1024),centerHeading:0,getTileUrl:getCustomPanoramaTileUrl
}
};
switch(panoID){
case initPosPanoID:
return initPosPanoData;
case"Position_S":
//var tmp = new google.maps.LatLng(wlat,wlon);
streetViewPanoramaData["location"]={
description:"TEST TEST TEST TSET",latLng:new google.maps.LatLng(3,3)
};
streetViewPanoramaData["copyright"]=""
break;
case"Position_SW":
streetViewPanoramaData["location"]={
description:"TEST TEST TEST TSET",latLng:new google.maps.LatLng(3,3)
};
streetViewPanoramaData["copyright"]=""
break;
}
if("location"in streetViewPanoramaData){
streetViewPanoramaData.location.pano=panoID;
return streetViewPanoramaData;
}
}
function createCustomLink(){
var links=streetView.getLinks();
var panoID=streetView.getPano();
var currentPos=streetView.getPosition();
switch(panoID){
case initPosPanoID:
links.push({description:"テストエリアへ",pano:"Position_S"});
break;
case"Position_S":
links.push({description:"外へ",pano:initPosPanoID});
links.push({description:"SWへ",pano:"Position_SW"});
break;
case"Position_SW":
links.push({description:"Sへ",pano:"Position_S"});
break;
}
if(links.length){ //compute directional pointer label.
var linkPano;
for(var i=0;i<links.length;i++){
linkPano=getCustomPanorama(links[i].pano);
if(linkPano!==undefined){
links[i].heading=google.maps.geometry.spherical.computeHeading(currentPos,linkPano.location.latLng);
}
}
return links;
}
}
google.maps.event.addDomListener(window,'load',initialize);
</script>
<style type="text/css">html,body{width:100%;
height:100%;
margin:0;
position:absolute}#frame,#streetview_canvas{width:100%;
height:100%;
position:relative}#map_canvas{width:250px;
height:250px;
border:2px solid gray;
background-color:#fff}</style>
</head>
<body>
<div id="streetview_canvas"></div>
<div id="map_canvas"></div>
</body>
</html>
I have a web page with a Google Map which works well. Instead of having the city name hardcoded to "Bochum" there, I'd like to find the header
<h3 id="city"><i>Bochum</i></h3>
and use that value in my init() function.
I'm probably missing something minor in the code below. Please help me and please refer me to the API reference for such a "child", my Javascript skills are very rusty.
Also I wonder, how could I pass one more value through my h3 header, like the color for my marker?
Thank you!
Alex
<html>
<head>
<style type="text/css">
h1,h2,h3,p { text-align: center; }
#map { width: 400; height: 200; margin-left: auto; margin-right: auto; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function init() {
for (var child in document.body.childNodes) {
child = document.body.childNodes[child];
if (child.nodeName == "H3")
alert(child);
}
// use the #city value here instead
city = 'Bochum';
if (city.length > 1)
findCity(city);
}
function createMap(center) {
var opts = {
zoom: 9,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
return new google.maps.Map(document.getElementById("map"), opts);
}
function findCity(city) {
var gc = new google.maps.Geocoder();
gc.geocode( { "address": city}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var pos = results[0].geometry.location;
var map = createMap(pos);
var marker = new google.maps.Marker({
map: map,
title: city,
position: pos,
});
}
});
}
</script>
<head>
<body onload="init();">
<h3 id="city"><i>Bochum</i></h3>
<div id="map"></div>
</body>
</html>
To include more data, you could use attributes:
<h3 id="city" data-citycolor="red"><i>Bochum</i></h3>
And get them out like this:
var city = document.getElementById("city");
var name = city.textContent || city.innerText;
var color = city.getAttribute("data-citycolor");
I think that you would be better off using jQuery, even if it is a 26kb library file, since then you can simplify it to this:
var city = $("#city");
var name = city.text();
var color = city.data("citycolor");
Note that you used "#city" in you comment, and with jQuery, you can use that exact string in your code. That's a good win. It also makes it trivial to use $(".city") in the future, if you want to have more of these on one page.
Assuming that the ID 'city' is unique(what an ID has to be):
document.getElementById('city').getElementsByTagName('i')[0].firstChild.data
The id attribute should be unique for the page - in other words you shouldn't have any other elements with id="city". Assuming that's the case, here's an example of what you could do:
<html>
<script type="text/javascript">
function init()
{
var node = document.getElementById("city");
var cityName = node.childNodes[0].innerHTML;
alert("Found city name: " + cityName);
}
</script>
<body onload="init();">
<h3 id="city"><i>Bochum</i></h3>
</body>
</html>
As a suggestion, I would lose the <i> and </i> tags, and instead add a style rule for your h3 node. In that case, the cityName would be just node.innerHTML.
Well, the h3 has an ID, no?
var city = document.getElementById('city').innerText;
Or, using jQuery:
var city = $('#city').text();