javascript - Google maps multiple markers with geolocation button

Question

I want to use both of multiple markers (places) and geolocation in google maps.

Everything will be fine , if i can use resultx variable at this row

center: new google.maps.LatLng('42','26',13),

instead of '42','26'

i tried resultx,'resultx','+resultx+'.. such as but it doesnt work.

So what is your advice?

-----HTML----

       <div id="map-canvas"></div> 
       <button onclick="getLocation()">Get your location</button> 

-----JAVASCRIPT----

 <script>
  var x = document.getElementById("map-canvas");

  function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    var latx=''+position.coords.latitude+'';    
    var lonx=''+position.coords.longitude+'';   
    var resultx=latx+','+lonx;
    var locations = [ 
    ['Helooo',40, 30 ,0] , ['Helooo',41.04564,28.97862 ,1] , ];


    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
      zoom: 5,  
      scrollwheel: false,
      center: new google.maps.LatLng('42','26',13),
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 

    for (i = 0; i < locations.length; i++) {   
      marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
        disableAutoPan: true,
        map: map 
      }); 

      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
        return function() { 
          infowindow.setContent(locations[i][0]); 
          infowindow.open(map, marker); 
        } 
      })(marker, i)); 
    }



}

</script>

Answer 1

To use the result from the geolocation function, create a google.maps.LatLng (or a google.maps.LatLngLiteral) from the desired latitude and longitude, then use that to center your map.

function showPosition(position) {
  var latx=position.coords.latitude;    
  var lonx=position.coords.longitude;   
  var resultx=new google.maps.LatLng(latx,lonx);

  var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    zoom: 5,  
    scrollwheel: false,
    center: resultx,
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  }); 

proof of concept fiddle

code snippet:

var x = document.getElementById("map-canvas");

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  var latx = position.coords.latitude;
  var lonx = position.coords.longitude;
  var resultx = new google.maps.LatLng(latx, lonx);
  var locations = [
    ['Helooo', 40, 30, 0],
    ['Helooo', 41.04564, 28.97862, 1],
  ];

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 5,
    scrollwheel: false,
    center: resultx,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      disableAutoPan: true,
      map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
}

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<button onclick="getLocation()">Get your location</button>
<div id="map-canvas"></div>