Using dynamic maps with the Google Maps API

Asked

Viewed 831 times

-1

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

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

There is a way for me not to fix a coordinate, but for the program to always open the map, always have as start(default) the client’s coordinates?

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

c# asp.net-mvc google-maps

  • I believe you only need HTML Geolocation to get the coordinates from the client’s browser, and set those to the center of the map, that link shows how to use, not very precise, but already helps

2 answers

1

I don’t quite understand how you’re gonna use the Googlemaps API with C#, will probably be a webView, I won’t go into details because the webView can be something Desktop or Windowsphone (or other type of device), by the tag Asp-net-mvc suppose it is web, maybe after I edit it.

If it is really web Asp.net-mvc is only the "back-end" part, in case I’m going for an example then just javascript to use Google-Maps from the initial position of the user, see an example in the documentation itself:

You’ll have to use navigator.geolocation.getCurrentPosition to obtain the user’s position.

Notes:

  • Exchange the YOUR_API_KEY by your key (requires a google account)

  • The browser requests a user permission to allow tracking

<!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>

  • I could not open in the browser and saw that there is a chumbada coordinate. The idea is the page pick the local coordinates of the user. The project is web and will have mobile parts, but not yet defined.

0

In the example that @Guilherme Nascimento passed I would only change the function 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);

     }
   }
 }

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

Browser other questions tagged c# asp.net-mvc google-maps

You are not signed in. Login or sign up in order to post.