HELP NEEDED FOR KML FOR COMBINING WITH HTML5 GEOLOCATION

178 views
Skip to first unread message

TheICQ Guy

unread,
Jul 21, 2014, 8:42:20 AM7/21/14
to kml-suppor...@googlegroups.com
Hi guys

Hope all is well at your end . I need your guidance for combining the two scripts below this is the classic tutorials at below links the below is  the link for displaying the KML layer

found on below link


<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Layers</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
function initialize() {
  var chicago = new google.maps.LatLng(41.875696,-87.624207);
  var mapOptions = {
    zoom: 11,
    center: chicago
  }

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml'
  });
  ctaLayer.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

I wish to combine the codes which are on below so that when I open the page it directly shows my location on the map via HTML5 Geolocation Example and javascript. please help me with the below code

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript"
    </script>
    <script type="text/javascript">
        var map = null;
            function showlocation() {
               // One-shot position request.
                navigator.geolocation.getCurrentPosition(callback);
            }
         
      function callback(position) {
         
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
         
             document.getElementById('latitude').innerHTML = lat;
         document.getElementById('longitude').innerHTML = lon;
             
        var latLong = new google.maps.LatLng(lat, lon);
         
                var marker = new google.maps.Marker({
                    position: latLong
                });      
                 
                marker.setMap(map);
        map.setZoom(8);
        map.setCenter(marker.getPosition());
      }
       
      google.maps.event.addDomListener(window, 'load', initMap);
      function initMap() {
        var mapOptions = {
          center: new google.maps.LatLng(0, 0),
          zoom: 1,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"), 
                                          mapOptions);
       
      }
    </script>
  </head>
  <body>
    <center>
        <input type="button" value="Show my location on Map"
                onclick="javascript:showlocation()" />   <br/>
    </center>
                 
        Latitude: <span id="latitude"></span>       <br/>
        Longitude: <span id="longitude"></span>
    <br/><br/>
    <div id="map-canvas"/>
  </body>
</html>

I would be thankful if you can guide me with the codes and show me an example on how we can combine the codes

Sylvain Beauchamp

unread,
Nov 12, 2014, 10:53:17 AM11/12/14
to kml-suppor...@googlegroups.com
Hi,

I would like to do the same thing ... No answer ?
Reply all
Reply to author
Forward
0 new messages