Using Dynamic Maps with the Google Maps API

Question

Using Dynamic Maps with the Google Maps API

Navigation

#1 by (1 votes)
#2 by (0 votes)

-1

I see the examples of how to use the Google Maps API and generally in the examples I see, there is always a default (initial) coordinate.

Now, let's say that I make a program and distribute this application to several clients in Brazil, for example.

Is there a way I can not set a coordinate, but that the program always opens the map, always has the client's coordinates as the default?

Thus: If you are in João Pessoa, in a certain neighborhood, it begins with this coordinate. I know this is possible as there are many applications that do this. How would I do that? Use MVC5 (VS 2013), C #.

c# asp.net-mvc google-maps

asked by anonymous 16.02.2016 / 19:43

2 answers

Is there a plugin for uploading images to Summernote? System always returns status 500 [closed]

score 1 · Answer 1

I do not understand how you will use the GoogleMaps API with C #, it will probably be a webView , I will not go into detail because webView may be something Desktop or WindowsPhone type of device), by the asp-net-mvc tag I suppose it's web, maybe then I edit it.

If it's even web asp.net-mvc is just the "back-end" part, in the case I'll go for an example then just javascript to use Google-Maps from the user's starting position, see an example in the own documentation:

link

You will have to use navigator.geolocation.getCurrentPosition to get the position of the user.

Notes:


Change YOUR_API_KEY to your key (requires a google account)



The browser requests a user permission to allow tracing

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 1
  });
  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>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"
        async defer>
    </script>
  </body>
</html>

score 0 · Answer 2

In the example that @Guilherme Nascimento passed I would only change the initMap ()

function initMap() {

  // Try HTML5 geolocation.
  if (navigator.geolocation) {

     navigator.geolocation.getCurrentPosition(function(position) {

        var myLatlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);

        var mapOptions = {
             center: myLatlng,
             zoom: 16,                        
        };

        var map = new google.maps.Map(document.getElementById("map"),
                        mapOptions);

     }
   }
 }

In this way you will only get the position of the user, but if the user does not allow you to use his location you will not have a map, there you will have to give some message to the user or set a default location.