#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    258
    Rep Power
    13

    How to print variables in script.


    Hi have a geolocation script that finds a users location (assuming they share it) and then prints it on a map that displays. My question is that I want to be able to print the coordinates to show the user but I'm having a problem figuring out where/how to do this?

    Here's the script
    Code:
    <script>
    function success(position) {
      var s = document.querySelector('#status');
      if (s.className == 'success') {
        return;
      }
      //Message after tracing the location
      s.innerHTML = "Here you are!";
      s.className = 'success';
      //Create div for showing map
      var mapcanvas = document.createElement('div');
      mapcanvas.id = 'mapcanvas';
      mapcanvas.style.height = '400px';
      mapcanvas.style.width = '700px';
      mapcanvas.style.margin = '0px auto';
        
      document.querySelector('article').appendChild(mapcanvas);
      
      var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeControl: false,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
      
      var marker = new google.maps.Marker({
          position: latlng, 
          map: map, 
          title:"You are here!"
          
          
      });
    }
    
    function error(msg) {
      var s = document.querySelector('#status');
      s.innerHTML = typeof msg == 'string' ? msg : "failed";
      s.className = 'fail';
    }
    
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success, error);
    } else {
      error('not supported');
    }
    </script>
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    183
    You would do it like this:
    Code:
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <article>
    </article>
    <script>
    function success(position) {
      var mapcanvas = document.createElement('div');
      mapcanvas.id = 'mapcontainer';
      mapcanvas.style.height = '400px';
      mapcanvas.style.width = '700px';
      document.querySelector('article').appendChild(mapcanvas);
      var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      var options = {
        zoom: 15,
        center: coords,
        mapTypeControl: false,
        navigationControlOptions: {
        	style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
      var marker = new google.maps.Marker({
          position: coords,
          map: map,
          title:"You are here!"
      });
    document.getElementById("ur_here").innerHTML = "You are located at the following: " + coords.toString().replace("(","Latitude:").replace(","," | Longitude:").split(")")[0];
    }
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success);
    } else {
      error('Geo Location is not supported');
    }
    </script>
    
    <br/>
    
    <div id="ur_here"></div>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    258
    Rep Power
    13
    Brilliant thank you!! Only question...is there anyway to still have the loader gif and message appear while it's looking just so that it doesn't look the page is doing nothing? This was inserted at the top of the page
    Code:
    <article> <p><span id="status"><img src="loading.gif" alt="Loading" width="43" height="11" style="margin:2px 6px;"  />Finding your location...</span></p>     </article>
    Originally Posted by web_loone08
    You would do it like this:
    Code:
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <article>
    </article>
    <script>
    function success(position) {
      var mapcanvas = document.createElement('div');
      mapcanvas.id = 'mapcontainer';
      mapcanvas.style.height = '400px';
      mapcanvas.style.width = '700px';
      document.querySelector('article').appendChild(mapcanvas);
      var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      var options = {
        zoom: 15,
        center: coords,
        mapTypeControl: false,
        navigationControlOptions: {
        	style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
      var marker = new google.maps.Marker({
          position: coords,
          map: map,
          title:"You are here!"
      });
    document.getElementById("ur_here").innerHTML = "You are located at the following: " + coords.toString().replace("(","Latitude:").replace(","," | Longitude:").split(")")[0];
    }
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success);
    } else {
      error('Geo Location is not supported');
    }
    </script>
    
    <br/>
    
    <div id="ur_here"></div>
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    183
    Sure, I don't see why not.

    Comments on this post

    • mytwocents agrees : Straight to the point and it worked!
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    258
    Rep Power
    13
    Ah perfect! Just had to work it in the script! Thank you so much!
    Originally Posted by web_loone08
    Sure, I don't see why not.

    Comments on this post

    • web_loone08 agrees : Np, glad to help :)

IMN logo majestic logo threadwatch logo seochat tools logo