Google Maps API v3: How to center on 2 dynamic addresses?

Question

I've spent the last 8 hours trying to do something extremelly easy.

The problem is that I'm not very familiar with JavaScript neither Google Maps API.

All I want to do is to find the center of 2 different locations and zoom accordly.

The 2 address are dinamically, since the user will input the info.

All my searched ended on API v2 or for fixed locations.

Could someone please help me out?

I really appreciate it!

Thanks a lot in advance!!!

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&region=BR"></script>
<script>
  var geocoder;
  var map;
  var query = "<?php echo $endCercompleto; ?>";
  var query2 = "<?php echo $endFescompleto; ?>";
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
      zoom:8,
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        codeAddress();
  }
  function codeAddress() {
    var address = query;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
    var address2 = query2;
    geocoder.geocode( { 'address': address2}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var marker2 = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
</script>

Is this what you need ? http://stackoverflow.com/questions/1556921/google-map-api-v3-set-bounds-and-center — Philippe Boissonneault, Aug 20 '12 at 19:13
Fot the V2 : http://stackoverflow.com/questions/2831740/how-do-setbounds-in-google-maps-api-v2 — Philippe Boissonneault, Aug 20 '12 at 19:14
I need for V3 and that link works for fixed positions / locations. I need for dinamicaly — gscrmn, Aug 20 '12 at 19:44
My answer to: http://stackoverflow.com/questions/8565539/google-maps-with-fitbounds-dont-zoom should work in this situation. — Bryan Weaver, Aug 20 '12 at 20:02

geocodezip · Answer 1 · 2016-02-18T14:34:03.047

This should work. Note that the bounds.extend and the map.fitBounds in each of the geocoder callback routines. You don't know which will complete first.

proof of concept fiddle

<script src="https://maps.googleapis.com/maps/api/js?region=BR"></script>
<script>
  var geocoder;
  var bounds = new google.maps.LatLngBounds();
  var map;
  var query = "<?php echo $endCercompleto; ?>";
  var query2 = "<?php echo $endFescompleto; ?>";
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
      zoom:8,
      center: new google.maps.LatLng(0, 0),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        codeAddress();
  }
  function codeAddress() {
    var address = query;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        bounds.extend(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
        });
        map.fitBounds(bounds);
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
    var address2 = query2;
    geocoder.geocode( { 'address': address2}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        bounds.extend(results[0].geometry.location);
        var marker2 = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
        });
        map.fitBounds(bounds);
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
}
</script>

Was a map shown before? Are you getting javascript errors? Please either provide a link to your map or a jsfiddle that exhibits the problem. — geocodezip, Aug 20 '12 at 19:52

Google Maps API v3: How to center on 2 dynamic addresses?

1 Answers1

Linked