Insert google map showing my current location

问题

I am traveling globally and need to insert a Google map on my web page that shows my current position (not the position of the reader) so that others can see where I am.

Does anyone have a straightforward solution to do this. I know how to use My Places to create maps and insert in my pages, but have avoided having to get involved in using the Maps API so far. I have some knowledge of HTML and Javascript, but it is minimal so would rather avoid this if I can.

Does anyone have a solution to this?

回答1:

Further to my answer over at your other question you may find bits of this example useful: - hypoCampus

The little blue man/person/icon follows your location. If you scroll the maps away you can then press the static blue map-control man to re-center on your location. When you're moving (throttled location update is changing) the icon is walking otherwise it is standing.

(There's a bug with Manifest - "display" : "standalone" at the mo Chrome bug)

Hopefully Firebase have committed to bypassing the speed-humps of W3C/IETF and will give us ServiceWorker Background Geolocation tracking very soon.

回答2:

you must tell to map your current location. for that you must get your location Latitude and Longitude for show that by maps.

get that by :

http://maps.googleapis.com/maps/api/geocode/xml?address=+" + MapAddress + "&sensor=false

try this html code in your page. str_lat and str_lng are your location :

<head>
    <meta name='viewport' content='initial-scale=1.0, user-scalable=no' />
    <style type='text/css'>
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type='text/javascript' src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false>
    </script>
    <script type='text/javascript'>
      function initialize() {
        var myLatlng = new google.maps.LatLng(str_lat,str_lng);
        var mapOptions = {
          center: myLatlng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title:'Location!'
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id='map-canvas'/>
  </body>
</html>;

回答3:

See Here https://developers.google.com/maps/documentation/javascript/tutorial

and see this code for judging your skills don't worry about new terms they are explained in the link above

   <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

来源：https://stackoverflow.com/questions/17512179/insert-google-map-showing-my-current-location

标签

google-maps

position

location