0

I'm trying to learn Google Map from Javascript API. When trying to plot the LatLng in Map, it is showing multiple world maps infinitely.

How can I avoid this to show only one map?

Google Map Showing Infinite times

Arun
  • 782
  • 2
  • 13
  • 25

2 Answers2

0

Please try the below code that shows the example of displaying a Map. (Make sure to update the key in <script src="https://maps.googleapis.com/maps/api/js?key=**********"></script>)

<!DOCTYPE html>
<html>
<body>

<h1> Google Map</h1>

<div id="map" style="width:300px;height:300px></div>

<br>
<script>
function myMap() {
var mapOptions = {
    center: new google.maps.LatLng(39.1676870, -86.5354682),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>

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

</body>
</html>
Karan
  • 695
  • 1
  • 6
  • 16
-1

I'm assuming you have something like this:

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
}

Notice the zoom field. If you don't have that, add it and set it to something like 2. If you do have it just keep increasing it by 1 until you're happy with it.

Mark Archer
  • 16
  • 2