geoxml3 and placemarks not functioning - javascript

Well I've read through and tried to find out the solutions but fail...
I followed the instructions from the geoxmlv3: http://code.google.com/p/geoxml3/wiki/Usage
here is a quote from that document:
<script type="text/javascript">
var myParser = new geoXML3.parser({afterParse: useTheData});
myParser.parse('my_geodata.kml');
function useTheData(doc) {
// Geodata handling goes here, using JSON properties of the doc object
for (var i = 0; i < doc.placemarks.length; i++) {
doSomething;
}
};
</script>
According to the documentation, the doc.placemarks should be working and return an array of json of placemarks in the KML file, unfortunately this 'doc' doesn't even exist(undefined), any idea?

If you are using the poly branch, "doc" is an array.
function useTheData(doc) {
// Geodata handling goes here, using JSON properties of the doc object
for (var i = 0; i < doc[0].placemarks.length; i++) {
doSomething;
}
};
I will fix the example in the documentation.
working example

Why don't you use KmlLayer of Google Maps API v3?
It's easy to map information from KML file onto the map.
https://developers.google.com/maps/documentation/javascript/layers#KMLLayers

Related

Create multiple marker points on Google Maps In a Web Application from C# objects

I've got a Web Application with C# code that creates a list of objects with their long and lat. I want to then create marker points on Google Maps for them using Javascript. I've currently got this code:
var marker;
for (var i = 0; i < ('<%= Buses.Count %>' - 1); i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng('<%= Buses['i'].latitude %>', '<%= Buses['i'].longitude %>'),
map: map
});
}
Which does not work, I believe the error is with where I reference "i" to say which object in the list to use.
If I manually set a marker point without a for loop and change ['i'] to [0] it will place a marker fine. However, due to the number of items changing and reaching up to 100 I require using a for loop. I have tried removing the '' around i and this generates an error saying
"i does not exist in the current context."
I have seen these posts:
Add two marker points in google maps
Google Maps JS API v3 - Simple Multiple Marker Example
Google Maps JS API v3 - Simple Multiple Marker Example
However, all of these are using locations inside of the JavaScript. My objects are contained within the C# code as a custom object defined as:
public static List<Bus> Buses = new List<Bus>();
This is my C# Code in full:
https://pastebin.com/2M1hWjnM
You're mixing a javascript for with data in code-behind/C#. It not works.
First, you've to put the marks data on a javascript array. Then make your for without webforms tags <%%>
put something like this on your page code behind (C#)
public static string getBusesJson()
{
var buses = new List<Bus>();
buses.Add(new Bus() {latitude = 10, longitude = 20 });
buses.Add(new Bus() { latitude = 15, longitude = 30 });
buses.Add(new Bus() { latitude = 5, longitude = 40 });
return JsonConvert.SerializeObject(buses);
}
put this on your aspx header:
<script type="text/javascript">
var points = <%= WebApplication3.WebForm1.getBusesJson()%>;
for (var i = 0; i < points.length; i++) {
//pass points[i].latitude and points[i].longitude to google maps
}
</script>

Parse a google maps xml with xPath + Javascript

I am a bit confused on how to go about developing an application, using Google maps javascript API + the 'Places' library.
What I want to have:
an html page with 2 divs:
a. left div: contains the google map + results/markers based on a given location ( I have that already)
b. right div: contains a list of the results with drop-down menus to filter the results on the map, on the left div.
So my questions are:
a. The response is already loaded in an object for the map on the left div, as in this example:
https://developers.google.com/maps/documentation/javascript/examples/place-search
Do I need to load it again - in order to get this information in XML and parse it in the right div?
My xml request is for example:
https://maps.googleapis.com/maps/api/place/nearbysearch/xml?location=34.680617,33.043263&radius=500&types=store&key=AIzaSyDQ9fpqxWt0F5EsztFt-HSjcSQruJSGeik
Where would I insert this (in the above example code) in order to get the xml response and parse the file/node information in text format on the right div?
b. In the callback function there is a loop that goes through the results:
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
Could I use that same loop in order to parse the xml nodes without having to load the xml file again?
If yes, the google developers site does not have an example of how to do that. It only lists a few xPath expressions:
developers.google.com/maps/documentation/webservices/index#ParsingXML
but it does not provide a full complete example from scratch.
i.e. how to use xPath to parse the xml file with javascript
c. if we need to have 2 separate responses (the google maps api + the web service), how will these 2 communicate between them then?
Not sure if I got it all wrong here...
thanks,
k.
Yes you should be able to use the same loop to parse the xml you could try something like:
function callback(results, status)
{
if (status == google.maps.places.PlacesServiceStatus.OK)
{
for (var i = 0; i < results.length; i++)
{
// Untested but use JQuery and try this:
var name = $(results[i]).find('name').text();
var location = $(results[i]).find('location');
var lat = $(location).find('lat').text();
var lng = $(location).find('long').text();
var obj =
{
name: name,
lat : lat,
lng: lng
};
createMarker(obj);
}
}
}
I would keep track of the markers your creating in an array or something to manage them on the map.

how to put google+ photos with Json & google API

i have a problem with the Google API.
I want to put pictures of a public album (google+) in some background-image in js.
i am not really familiar with Json
var data = $.getJSON('https://plus.google.com/photos/ACCOUNT_ID/albums/ALBUM_ID');
function displayGallery(data){
var l = data.feed.entry.length;
for (var i = 0; i < l; i++) {
var item = data.feed.entry[i];
$('#m'+ i ).css("backround-image",data);
}
i saw a similar post : Using jQuery $.getJSON() with Google Picasa Data API
But it was hard to understand it (and excuse my english).
Thanks in advance for any help !
I didn't have time to continue this project, but i think i finally took the right direction. I pretty close to the result i want.
$(document).ready(function() {
console.log("hello world");
$.get('https://picasaweb.google.com/data/feed/api/user/userID/albumid/albuID', function(data){
var entries = data.getElementsByTagName('entry');
console.log(entries);
// var entry = entries[0];
for(var i =0; i< entries.length; i++){
console.log(entries[i]);
console.log($(entries[i].getElementsByTagName('content')[0]).attr("src"));
}
});
});
The only real problem is that there is a security on web browser that doesnt permit you to well acces to this infos . You need to desable web security

getting pictures into an array in javascript

im kinda new to javascript i mean i know the syntax but not so much the libraries.
i need some help to get some files (pictures) from a folder into an arry lets say:
var[] pictures = ?;
(the folder is in my project and contain some pictures)
so i can loop over them and diplay them on the page i did some search but i didnt find any guide on how to do this.
i realy want to understand on how to do this for future projects even a link to known guid you guys know we will be a big help.
if it help im using asp.net.
Well, there are a lot of ways to approach the problem, to me what you can do is (if you don't know the location of the images beforehand) make a service that returns the src of every image, store that in an array, and then show them in the page.
I believe you are using jQuery so you can make an ajax request like this:
jQuery.ajax({
url: /*path to*/"Service.asmx/getSources"
//options, check documentation
});
then, from asp, make a new service (Service.asmx in my case) and create a method that returns the location of the pictures (in my case the method is called getSources)
I recommend you use JSON (and jQuery.getJSON() method) so you can return a List<string>.
Lastly you can iterate or store the sources in an array, I'll put an example with the getJSON method
var sources = []
jQuery.getJSON("Service.asmx/getSources", function(data) {
for(var i = 0, len = data.length; i<len ; i++) {
sources.push(data[i]);//store every source in the array
}
});
once you have the sources you can display them like this fiddle
Tell me if it helped or if you need another solution.
If you want an array of pictures just to display them later, you can simply use:
var sources = [
"path/to/yourImage1.jpg",
"path/to/yourImage2.jpg",
// ...
"path/to/yourImageN.jpg",
];
var pics = [];
for(var i = 0; i < sources.length; i++) {
var pic = new Image();
pic.src = sources[i];
pics[i] = pic;
}

Chrome says Cannot read property 'nodeName' of undefined, IE6 is fine, using Google Map API

I have an XML file in the following structure.
<NewDataSet>
<markers>
<name>name text</name>
<desc>desc text</desc>
<Lat>57.149328033771</Lat>
<Long>-2.12561060173764</Long>
<cost>9985</cost>
</markers>
</NewDataSet>
I'm using Google Map API to parse and map these, using the following Javascript.
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(47.614495, -122.341861), 13);
GDownloadUrl("test1.xml", function(data) {
var xml = GXml.parse(data);
x= xml.documentElement;
y = xml.documentElement.childNodes;
alert(y.length);
for (i=0;i<y.length;i++)
{
if (y[i].nodeType!=3)
{
alert(y[i].childNodes[0].nodeName + " : " + y[i].childNodes[0].childNodes[0].nodeValue); //name
}
}
});
}
}
Both the full xml and html files can be downloaded here:
http://domain2405544.sites.fasthosts.com/test/test1.htm
http://domain2405544.sites.fasthosts.com/test/test1.xml
First off, I'm just trying to parse this data. Works fine in IE6 (no choice with that) and it alerts the data correctly. However when I load the same page in Chrome is tells me:
Uncaught TypeError: Cannot read property 'nodeName' of undefined - line 29
I'm using identical files, so may be there is an underlying problem I just can't see.
Has anyone got any ideas why this may be happening?
Thanks
What is happening is that you're trying to get children of a text node. Chrome will have a text node prior to the <name> child of the <markers> element whereas IE won't.
You're testing whether each child of the document element <NewDataSet> is a text node, thus avoiding the problem at that level, but you're assuming the first child of each <markers> element is the <name> element when in fact it's a text node in non-IE browsers.
You'd be better off using the getElementsByTagName of DOM nodes to avoid this problem. Here's an improved version:
GDownloadUrl("test1.xml", function(data) {
var xml = xhr.responseXML;
var root = xml.documentElement;
var markers = root.getElementsByTagName("markers"), nameEl;
for (var i = 0, len = markers.length; i < len; ++i) {
nameEl = markers[i].getElementsByTagName("name")[0];
alert(nameEl.firstChild.data);
}
});

Categories

Resources