Center map to my location

Question

I have the following code:

map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 13,
    center: new google.maps.LatLng(53.529773,-113.509387), 
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

How can I replace:

center: new google.maps.LatLng(53.529773,-113.509387)

with my current location, programatically

Just look [at this answer](http://stackoverflow.com/a/14810816/1641867). — ventiseis, Nov 21 '16 at 21:52
Possible duplicate of [getting users geolocation via html5 and javascript](http://stackoverflow.com/questions/14642796/getting-users-geolocation-via-html5-and-javascript) — ventiseis, Nov 21 '16 at 21:52
Ok, maybe I didn't explain correctly, what I need is to replace: `center: new google.maps.LatLng(53.529773,-113.509387)` with my current location, programatically — Lalo Oceja, Nov 21 '16 at 23:35
So, read the other answer. It describes how to use the geolocation API and what to do if the user does not allow access to it. And there is a nice discussion about the user interface part. If you retrieved the current coordinates, then use them for your `LatLng` object. If you don't know how to do that, please read a tutorial about `JavaScript`. This isn't a code writing service. — ventiseis, Nov 22 '16 at 00:10
What do you mean by "your current location"? Dynamically? A specific address? — geocodezip, Nov 22 '16 at 00:18
@ventiseis please calm down a little bit, I'm just trying to say that I need to use the same code I have because I have a bunch of code already running and I don't want to modify the entire program, the other answer is very good but I would need to change almost anything. I wanted to know if there is maybe a possible way to change the center parameter to my location... you said it: "If you retrieved the current coordinates, then use them for your LatLng object" the rest is not polite. geocodezip yes, I mean my dynamic current location. Thanks — Lalo Oceja, Nov 22 '16 at 00:49
So I got a vote down only because I told ventiseis to be more polite.... that's ok — Lalo Oceja, Nov 22 '16 at 03:42
Perhaps my comment was just a little short. StackOverflow can only work if you try to ask clear questions and accept the guidance from other members. So, if "your current location" is something different than the coordinates from the HTML 5 geolocation api, please explain it to us. Or otherwise, if you can't combine google maps and the geolocation API in any way, please describe your problem. By the way, you got a *superb* answer for your unclear question and I didn't downvote your question, even if there might be reasons to do so. — ventiseis, Nov 22 '16 at 07:51

score 1 · Accepted Answer · answered Nov 21 '16 at 22:14

Your code looks correct, I suspect that your issue is that your device does not have location services enabled, if it does you may not have accept the security prompt when it runs the first time.

This following demo I modified from the google maps API reference https://developers.google.com/maps/documentation/javascript/

HTML Demo

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JS

function initMap() {

  // Pick a start point, I live in Australia, so just picked the middle of OZ
  var myLatLng = {lat: -25.363, lng: 131.044};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: myLatLng
  });

  // Mark it on the map, this is the original center
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });

  // If location services is enabled, the following should center the map on your location.
  if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
            var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            map.setCenter(location);
                });
  }
}

Ok, maybe I didn't explain correctly, what I need is to replace: `center: new google.maps.LatLng(53.529773,-113.509387)` with my current location, programatically — Lalo Oceja, Nov 21 '16 at 23:40
Um, I'm at a loss, that is exactly what your code is doing :) var myCurrentLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); map.setCenter(myCurrentLocation); — Chris Schaller, Nov 22 '16 at 05:11

Center map to my location

1 Answers1