Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Retrieve data of the latitude & longitude from XML file

    I'm trying to retrieve the data of the latitude & longitude from XML file, to be linked within Google Maps JavaScript, so it displays the map on the webpage
    Code:
    <div id="map-canvas"></div>
    with marker from these coordinates within the linked XML.

    I think I'm in the right direction, but does not seem to work. I have been able to call the data with an alert popup
    Code:
    alert(lat); alert(lng);
    to see if the data is being read within JavaScript, but it does not work work for the markers position.

    Website Link to the page I am working on, the alert will appear with the latitude & longitude

    XML part exmaple

    Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <events 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="events.xsd">
    	<header>Media Events UK</header>
    	<footer>This is a student mobile website for a project, all of the Images, Live streaming media, Text and Information Articles are from the given information centres - Anime News Network, ExCeL Exhibition Centre, SECC Exhibition Centre and Corn Exchange - Designed by Alex and Callum</footer>
    	<venue id="01" vtitle="ExCeL Exhibition Centre" location="1 Western Gateway, Royal Victoria Dock, London, E16 1XL" telephone="0844 448 7600" url="http://www.excel-london.co.uk/">
    	<latitude>51.507622</latitude>
    	<longitude>0.036577</longitude>
    	<about>The ExCel Exhibition Centre was opened in November 2000 and was built by Sir Robert MacAlpine. The venue was most recently bought over acquired by the Abu Dhabi National Exhibitions Company in 2008. Phase II was completed on 1 May 2010. This expansion created The International Convention Centre London (ICC London) adding to ExCeL's event space, as well as further meeting space and banqueting facilities.</about>
    	<event pram="01" name="London Comic Con" date="2013-10-12" place="ExCeL Exhibition Centre">
    		<image>images/MCM1.jpg</image><attribute>London Anime Event</attribute>
    		<description>A convention for all things Anime, video games and Japanese culture.</description>
    		<ticket_price type="adult" status="none">£18.00</ticket_price>
    		<ticket_price type="child" status="available">£8.00</ticket_price>
    		<ticket_price type="junior" status="available">£0.00</ticket_price>
    		<email>london@mcmexpo.net</email>
    	</event>
    	
    	<event pram="02" name="Doctor Who 50th Celebration" date="2013-10-22" place="ExCeL Exhibition Centre">
    		<image>images/doctor50.jpg</image><attribute>Doctor Who Event</attribute>
    		<description>A 50th Anniversary musical bonanza for Doctor Who.</description>
    		<ticket_price type="adult" status="available">£25.00</ticket_price>
    		<ticket_price type="child" status="none">£11.00</ticket_price>
    		<ticket_price type="junior" status="available">£0.00</ticket_price>
    		<email>info@roundhouselondon.com</email>
    	</event>
    	</venue>
    	
    	<venue id="02" vtitle="SECC Exhibition Centre" location="Exhibition Way, Glasgow, G3 8YW" telephone="01572 362977" url="http://www.secc.co.uk/">
    	<latitude>55.860658</latitude>
    	<longitude>-4.287568</longitude>
    	<about>The Scottish Exhibition and Conference Centre (SECC) is Scotland's premier national venue for public events, concerts and conferences Construction began on the buildings in 1983 and opened in 1985, with a concert by the Royal Scottish National Orchestra</about>
    	<event pram="03" name="Scotland Comic Con" date="2013-11-23" place="SECC Exhibition Centre">
    		<image>images/MCM2.jpg</image><attribute>Scotland Anime Event</attribute>
    		<description>A convention for all things Anime, video games and Japanese culture, in SCOTLAND.</description>
    		<ticket_price type="adult" status="available">£10.00</ticket_price>
    		<ticket_price type="child" status="available">£6.00</ticket_price>
    		<ticket_price type="junior" status="available">£0.00</ticket_price>
    		<email>scotland@mcmexpo.net</email>
    	</event>
    	<event pram="04" name="Jamie Cullum" date="2013-10-19" place="SECC Exhibition Centre">
    		<image>images/jamie1.jpg</image><attribute>A Picture of Jamie Cullum</attribute>
    		<description>Scottish singer-songwriter Jamie Cullum performs live.</description>
    		<ticket_price type="adult" status="available">£17.00</ticket_price>
    		<ticket_price type="child" status="none">£4.00</ticket_price>
    		<ticket_price type="junior" status="available">£0.00</ticket_price>
    		<email>info@secc.com</email>
    	</event>
    	</venue>
    	
    	<venue id="03" vtitle="Corn Exchange" location="11 New Market Rd, Edinburgh, EH14 1RJ" telephone="0814 468 7320" url="http://www.edinburghcornexchange.com/">
    	<latitude>55.92806</latitude>
    	<longitude>-4.287568</longitude>
    	<about>A former Corn Exchange, this unique listed building in Edinburgh's original agricultural quarter, has been reborn as the ultimate venue for every style of event including Conferences, Exhibitions, Dinners, Product Launches, Meetings and more. Over 2,500 square metres of venue space are available to use.</about>
    	<event pram="05" name="Bastille" date="2013-10-30" place="Corn Exchange">
    		<image>images/bastille.jpg</image><attribute>A Picture of Bastille</attribute>
    		<description>French folk-pop band perform live.</description>
    		<ticket_price type="adult" status="none">£22.00</ticket_price>
    		<ticket_price type="child" status="available">£18.00</ticket_price>
    		<ticket_price type="junior" status="available">£0.00</ticket_price>
    		<email>manchester@mcmexpo.net</email>
    	</event>
    	</venue>
    	
    </events>
    JavaScript

    Code:
    function initialize() {
      var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(53.969012,-1.946297)
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'),
                                    mapOptions);
    
      setMarkers(map, venues);
      
      var infowindow =  new google.maps.InfoWindow({
                content: ""
            });
    }
    
    //Trying not do it this way, to not be hardcoded
    var venues = [
      ['ExCeL Exhibition Centre', 51.507622,0.036577, 1],
      ['Corn Exchange', 55.92806,-3.247665, 2],
      ['SECC Exhibition Centre', 55.860658,-4.287568, 3]
    ];
    
    //I think I am getting there, but I can only make it appear as a alert, to see if the data is being read from the XML
    
    	$.get("events.xml", function(xml){
    		$(xml).find("venue").each(function(){
    			
    			// this pulls the lat and lng from my xml to tell maps where to put the markers
    			var lat = $(this).find('latitude').text();
    			var lng = $(this).find('longitude').text();
    			var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
    			alert(lat); alert(lng);
    			});
    			
    			});
    
    function setMarkers(map, locations) {
     
      var image = {
        url: 'images/maparrow.png',
      };
    
    
      for (var i = 0; i < locations.length; i++) {
        var venue = locations[i];
        var myLatLng = new google.maps.LatLng(venue[1], venue[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: venue[0],
            zIndex: venue[3]
        });
    	(function(marker, i) {
    
                            google.maps.event.addListener(marker, 'click', function() {
                                infowindow = new google.maps.InfoWindow({
                                    content: (venues[i][0])
                                });
                                infowindow.open(map, marker);
                            });
                        })(marker, i);
      }
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,089
    Thanks
    23
    Thanked 593 Times in 592 Posts
    Looks like it works ok to me. What is the problem?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •