Jump to content

Help with sizing a map to fit a section.

Recommended Posts

Hello! I know very very little of coding or such but I managed to get a map in my site. However, after many attempts I can't get the map to fit the section as I want it to. Ideally I would like to look as it does in the right side of the attached picture. I've tested a few approaches but usually they lead to the map becoming invisible! Anyway here's my code.

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple Markers on Google Maps</title>
    <style>
      #map {
        height: 400px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCI8DBbT0Cw23BHTb2p0sdZKlpwvDQFG8Q&callback=initMap" async defer></script>
    <script>
      function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 4,
          center: { lat: -7.116647, lng: -75.548848 },
          styles: [
    {
        "featureType": "all",
        "elementType": "labels.text",
        "stylers": [
            {
                "color": "#878787"
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry",
        "stylers": [
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.country",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.country",
        "elementType": "labels.text",
        "stylers": [
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "administrative.country",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.province",
        "elementType": "geometry",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.province",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.locality",
        "elementType": "geometry",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.locality",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.neighborhood",
        "elementType": "geometry",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.neighborhood",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.land_parcel",
        "elementType": "geometry",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative.land_parcel",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
            {
                "color": "#f9f5ed"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "landscape.man_made",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#cecece"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
            {
                "color": "#f5f5f5"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#c9c9c9"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "color": "#2e2eda"
            }
        ]
    }
],
          disableDefaultUI: true,
        });

        const locations = [
          ["Hochschild Unidad minera inmaculada", -14.958623, -73.242344],
          ["Hochschild Unidad minera ares", -15.035507, -72.169304],
          ["Hochschild Unidad minera arcata", -15.040750, -72.275059],
          ["Hochschild Unidad minera pallancata", -14.746340, -73.180474],
          ["Kallpa Planta Cerro del águila", -12.290699, -74.682924],
          ["Kallpa Planta Cañon del pato", -8.813180, -77.852688],
          ["Kallpa Planta puerto bravo", -17.040437, -71.976836],
          ["Kallpa, Planta aguaytia", -8.415343, -74.550786],
          ["Planta carhuaquero", -6.611310, -79.239425],
          ["Dialogo social chiu chiu", -22.342247, -68.655542],
          ["Dialogo social tawa", -22.894380, -68.197299],
          ["Dialogo social Caritaya", -19.015545, -69.337964],
          ["CNR La Loma, Cesar", 9.619433, -73.594437],
          ["CNR Hatillo, Cesar", 9.648722, -73.559468],
          ["CNR Cienaga, Santa Marta", 10.86579, -74.38343],
          ["Pronaca Planta Bucay", -2.215224, -79.138591],
          ["Pronaca Planta Santo Domingo", -0.249751, -79.168396],
          ["Pronaca Planta en Sierra", -0.183923, -78.453141],
          ["Pronaca Planta en Guayaquil", -2.061362, -79.944046],
          ["PRONACA, Granja AVECOPA, Pujili, Ecuador", -0.941356, -78.676346],
          ["Pedregal Fundo los brujos, ica", -14.155222, -75.746296],
          ["Pedregal Fundo piura pedregal", -5.086227, -80.595136],
          ["Apropisco Pisco", -13.791702, -76.239512],
          ["Tasa Planta pisco", -13.797954, -76.240434],
          ["Tasa Planta malabrigo", -7.696595, -79.434573],
          ["Tasa Planta callao", -11.956764, -77.133471],
          ["Tasa Planta chimbote", -9.114055, -78.559832],
          ["Tasa Planta atico", -16.228975, -73.695005],
          ["Tasa Planta matarani", -17.005456, -72.100206],
          ["Tasa Planta Pucusana", -12.487560, -76.746628],
          ["Tasa Planta Samanco", -9.257892, -78.495838],
          ["Minera Bateas Mina bateas, Arequipa", -15.204195, -71.862462],
        ];

        locations.forEach((location) => {
          const marker = new google.maps.Marker({
            position: { lat: location[1], lng: location[2] },
            title: location[0],
            map: map,
          });
        });
      }
    </script>
  </body>
</html>

 Help would be greatly appreciated. Please be patient.

Untitled-2.png

Link to comment
  • Replies 5
  • Views 458
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 weeks later...
On 5/24/2023 at 12:05 AM, Gonzalosd said:

kataricorp.com
Currently I just added a crude ass white square to block the lower portion of the section. It is not good but its what I have.

It looks like you removed map on mobile. Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.