Google Maps Multiple Markers With Geolocation Button

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

Solution 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.

functionshowPosition(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");

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

functionshowPosition(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) {
      returnfunction() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
}

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

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

Solution 2:

A google.maps.LatLng use only two parameter (lat, lng)

in your case you do an error passing value separated by comma('42','26',13),

try this way for example

 center: new google.maps.LatLng(42.26010101, 26.1801010101)

use dot for decimal saperator and don't pass the third param.