CODEWITHSUNDEEP
htmlgoogle-mapsgoogle-maps-api-3
Clarus Dignus
Clarus Dignus

Reputation: 3897

Custom Google Map embed not centered like iframe embed code

I'm using the following basic code as a framework to embed a Google Map:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 700px;
        height: 700px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
          center: new google.maps.LatLng(41.2048114,8.0734625),
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
    <a href="https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map">Adding a Google Map to your website</a>
  </body>
</html>

The map however, is not centered on the required country in the manner the iframe/url embed method does:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6147641.518761753!2d8.073462507072607!3d41.204811445527874!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12d4fe82448dd203%3A0xe22cf55c24635e6f!2sItaly!5e0!3m2!1sen!2sie!4v1445183005624" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Note: I've checked other questions but the code seems outmoded or at least disparate to the official convention I'm trying to follow.

How can I center the map using/modifying the first code block (I don't want to deviated drastically from its method).

Upvotes: 1

Views: 908

Answers (2)

Gillsoft AB
Gillsoft AB

Reputation: 4225

While geocodezip's answer is correct, you might want play around in some browsers and get the user location as the center. How and where you want to center is usually based on your use case. However, it works good in Firefox and Chrome but Safari seems to need tuning in settings to allow tracking.

jsfiddle

And here is the code to center using the user's location:

<!DOCTYPE html>
<html>
<head>
<style>
  #map {
    width: 700px;
    height: 700px;
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
    }
    function showPosition(pos) {
       var mapCanvas = document.getElementById('map');
       var mapOptions = {
          center: new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude),
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
       }
       var map = new google.maps.Map(mapCanvas, mapOptions);
    }
  google.maps.event.addDomListener(window, 'load', getLocation);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>

Upvotes: 0

geocodezip
geocodezip

Reputation: 161334

Your simplest option is to make both maps the same size and adjust the center and zoom of the Google Maps Javascript API v3 map until it matches your embedded map.

fiddle

code snippet:

function initialize() {
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
        center: new google.maps.LatLng(41.28718658156576, 12.600134851639705),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(mapCanvas, mapOptions);
    google.maps.event.addListener(map,'center_changed',function() {
        document.getElementById('info').innerHTML = map.getCenter()+":"+map.getZoom();
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
    width: 700px;
    height: 700px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<div id="info"></div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6147641.518761753!2d8.073462507072607!3d41.204811445527874!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12d4fe82448dd203%3A0xe22cf55c24635e6f!2sItaly!5e0!3m2!1sen!2sie!4v1445183005624" width="700" height="700" frameborder="0" style="border:0" allowfullscreen></iframe>

Another option would be to use the Google Maps Javascript API v2 Geocoder to get the bounds of Italy. That doesn't quite fit at zoom level 6 (so zooming to the bounds is not zoomed in close enough). To address that wait until the map has set its bounds, then increment the zoom level by one.

fiddle

code snippet:

function initialize() {
  var mapCanvas = document.getElementById('map');
  var map = new google.maps.Map(mapCanvas);
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': "Italy"
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      map.fitBounds(results[0].geometry.bounds);
      google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
        map.setZoom(map.getZoom() + 1);
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
  width: 700px;
  height: 700px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6147641.518761753!2d8.073462507072607!3d41.204811445527874!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12d4fe82448dd203%3A0xe22cf55c24635e6f!2sItaly!5e0!3m2!1sen!2sie!4v1445183005624"
width="700" height="700" frameborder="0" style="border:0" allowfullscreen></iframe>

Upvotes: 1

Related Questions