Google MyMaps Geolocation // GPS

Question

I created a Map in MyMaps an implemented it to an php document. It works good. But i would like so set the Geolocation when it starts. Is that possible? The following script Show me a Google Map with the Geolocation. How can I implement here My Map? Thanks for helping!

 <script>
    function initialize(coords) 
    {
        var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
        var myOptions = 
        {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("pos"), myOptions);

        var marker = new google.maps.Marker(
        {
            position: latlng, 
            map: map, 
            title: "Hier bist du :)"
        }); 
    }
    navigator.geolocation.getCurrentPosition(function(position)
    { 
        initialize(position.coords);
    }, function()
    {
        document.getElementById('pos').innerHTML = 'Deine Position konnte leider nicht ermittelt werden';
    });
</script>

Mehdi Bouzidi · Answer 1 · 2017-08-24T11:53:03.547

0

This is the code you should implement:

<script >
var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 6
        });
        var infoWindow = new google.maps.InfoWindow({map: map});

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent('Location found.');
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
      }

      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
      }

</script>

SOURCE

edited Aug 24 '17 at 11:53

answered Aug 23 '17 at 15:04

Mehdi Bouzidi

1,937
3
15
31

Hey thanks for the answer. But when I enter there some Lat´s it has a fix Position ... I would implement the script into the My Map .. Do you unterstand? So that the my map search for my Location at the Moment – Crissi Aug 23 '17 at 15:45
Hey thanks. But when i implement this Code, it only show´s me 2 Textfields where I can type in Something. Maybe I have to explain it better: I have a Google MYmAPS Card. And the only Thing I want to do is, to Show there my geolocation at the Moment. In the "normal" Google Maps it work perfect. But not with My Maps. Do you unterstand? – Crissi Aug 24 '17 at 10:44
@Crissi once again I edited my answer please check & tell me if it helps ! This code get your current location & set it to the map when it starts – Mehdi Bouzidi Aug 24 '17 at 11:54
@Crissi I also try it with your map & it's working fine ! Just try to enable the localisation in your browser or PC. Good Luck – Mehdi Bouzidi Aug 24 '17 at 12:01
Thanks a lot. But it didn´t work. I enter the same Code but it Show nothing ... And where can i use the My Map? I shoul enter some URL in the Code or something like this? Sorry – Crissi Aug 24 '17 at 12:36
@Crissi you can find the solution here https://stackoverflow.com/questions/1470678/add-google-my-maps-layer-to-google-maps-javascript-api – Mehdi Bouzidi Aug 24 '17 at 12:42
I saw that question before, but i dont unterstand it. Maybe some other User can help me – Crissi Aug 24 '17 at 13:15
@Crissi the last thing i can suggest you is that you recreate your custom map with the Js cause I sawed that you must have a premium account to access to custom map & personnal information. Good Luck – Mehdi Bouzidi Aug 24 '17 at 13:26

score 0 · Answer 2 · answered Sep 18 '20 at 01:50

Add the embedded Map iframe into your HTML.
Check My Maps Documentation for more info.
<iframe id="map-iframe" src="https://www.google.com/maps/d/u/2/embed?mid=YOUR_MAP_ID" width="640" height="480"></iframe>
Use Geolocation in your JavaScript file to get user's current location.
And set the map to show user's location by adding &ll=lat,long at the end of your map's URL.

      // getting user's current location.
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };
          console.log(pos);

      // setting the map to show user's current location.
          document.getElementById('map-iframe').src = mapUrl.concat('&z=16&ll=', position.coords.latitude, ',', position.coords.longitude);

          console.log(document.getElementById('map-iframe').src);
        });
    } else {
      alert('Error: Your browser doesn't support geolocation.');
    }
  }

Google MyMaps Geolocation // GPS

2 Answers2