How to geocode address in Google Maps API if some of my addresses have no latitude / longitude?-CodePudding

I use this way to show several markers on Google Map (php js):

<?php    
$addresses = [
      ['Location 1', 'Práčská 1882/14a, 106 00 Praha 10-Záběhlice, Czech', 'Location 1 URL', , ],
      ['Location 2', 'Chrudimská 2b, 130 00 Praha 3-Vinohrady, Czech', 'Location 2 URL', 50.07723230323565, 14.462862694350086],
      ['Location 3', 'Tachovské nám. 290/5, 130 00 Praha 3-Žižkov, Czech', 'Location 3 URL', 50.08810372337146, 14.453470938091115]
    ];
?>
<script>
    var locations = <?php echo $addresses; ?>;
    var geocoder;
    var map;
    var bounds = new google.maps.LatLngBounds();
    
    function initialize() {
      map = new google.maps.Map(
        document.getElementById("map_canvas"), {
          center: new google.maps.LatLng(50.080271523996146, 14.46584830762666),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
      
    
      for (i = 0; i < locations.length; i  ) {
        geocodeAddress(locations, i);
      }
    }
    google.maps.event.addDomListener(window, "load", initialize);
    
    function geocodeAddress(locations, i) {
      var title = locations[i][0];
      var address = { 'address': locations[i][1] };
      var url = locations[i][2];
      var address = locations[i][1];
      var latlng = { lat: locations[i][3], lng: locations[i][4] };
    
      var marker = new google.maps.Marker({
          icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
          map: map,
          position: latlng,
          title: title,
          animation: google.maps.Animation.DROP,
          address: address,
    
        })
        infoWindow(marker, map, title, address, url);
        bounds.extend(marker.getPosition());
        map.fitBounds(bounds);
    
        
        
    }
    
    function infoWindow(marker, map, title, address, url) {
      google.maps.event.addListener(marker, 'click', function() {
        var html = "<div><h3>"   title   "</h3><p>"   address   "</p></div>";
          
        iw = new google.maps.InfoWindow({
          content: html,
          maxWidth: 350
        });
        iw.open(map, marker);
      });
    }
    
    function createMarker(results) {
      var marker = new google.maps.Marker({
        icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
        map: map,
        position: results[0].geometry.location,
        title: title,
        animation: google.maps.Animation.DROP,
        address: address,
        url: url
      })
      bounds.extend(marker.getPosition());
      map.fitBounds(bounds);
      infoWindow(marker, map, title, address, url);
      return marker;
    }
</script>

You can see that in first location longitude and latitude are missing, because they are not presented in my array/in my database. Is there a simple way/already existing function for google maps api to get these values from string-address or something like this? I want to have something like:

function geocodeAddress(locations, i) {
          var title = locations[i][0];
          var address = { 'address': locations[i][1] };
          var url = locations[i][2];
          var address = locations[i][1];

if (locations[i][3]=== "") 
{
locations[i][3] = getLatFromAddress(locations[i][1]);
}
if (locations[i][4]=== "")
{
locations[i][4] = getLngFromAddress(locations[i][1]);
}
          var latlng = { lat: locations[i][3], lng: locations[i][4] };
        
          var marker = new google.maps.Marker({
              icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
              map: map,
              position: latlng,
              title: title,
              animation: google.maps.Animation.DROP,
              address: address,
        
            })
            infoWindow(marker, map, title, address, url);
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
        }

For some reason i can't modify the $addresses structure. So only i have to change/add some js. What can be a way to solve this?

CodePudding user response：

Call the code snippet:

var locations = [
  ['Location 1', 'Práčská 1882/14a, 106 00 Praha 10-Záběhlice, Czech', 'Location 1 URL', , ],
  ['Location 2', 'Chrudimská 2b, 130 00 Praha 3-Vinohrady, Czech', 'Location 2 URL', 50.07723230323565, 14.462862694350086],
  ['Location 3', 'Tachovské nám. 290/5, 130 00 Praha 3-Žižkov, Czech', 'Location 3 URL', 50.08810372337146, 14.453470938091115]
];
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(50.080271523996146, 14.46584830762666),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  geocoder = new google.maps.Geocoder();

  for (i = 0; i < locations.length; i  ) {
    geocodeAddress(locations, i);
  }
}
google.maps.event.addDomListener(window, "load", initialize);

function geocodeAddress(locations, i) {
  var title = locations[i][0];
  var address = {
    'address': locations[i][1]
  };
  var url = locations[i][2];
  var address = locations[i][1];

  if ((locations[i][3] === undefined) || (locations[i][4] === undefined)) {
    geocoder.geocode({
      address: address
    }, function(result, status) {
      createMarker(result[0].geometry.location, title, address, url);
    });
  } else {

    var latlng = {
      lat: locations[i][3],
      lng: locations[i][4]
    };
    createMarker(latlng, title, address, url);
  }
}

function createMarker(latlng, title, address, url) {
  var marker = new google.maps.Marker({
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
    map: map,
    position: latlng,
    title: title,
    animation: google.maps.Animation.DROP,
    address: address,

  })
  infoWindow(marker, map, title, address, url);
  bounds.extend(marker.getPosition());
  map.fitBounds(bounds);
}

function infoWindow(marker, map, title, address, url) {
  google.maps.event.addListener(marker, 'click', function() {
    var html = "<div><h3>"   title   "</h3><p>"   address   "</p></div>";

    iw = new google.maps.InfoWindow({
      content: html,
      maxWidth: 350
    });
    iw.open(map, marker);
  });
}

/*    function createMarker(results) {
      var marker = new google.maps.Marker({
        icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
        map: map,
        position: results[0].geometry.location,
        title: title,
        animation: google.maps.Animation.DROP,
        address: address,
        url: url
      })
      bounds.extend(marker.getPosition());
      map.fitBounds(bounds);
      infoWindow(marker, map, title, address, url);
      return marker;
    }
*/

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#map_canvas {
  height: 100%;
  width: 100%;
}

<html>

<head>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

</head>

<body>
  <div id="map_canvas">
</body>

</html>