Gonzalosd Posted April 24, 2023 Posted April 24, 2023 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.
Gonzalosd Posted April 24, 2023 Author Posted April 24, 2023 I should add, this is something I tried but it leads to the map becoming invisible: <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; width: 100%; overflow: hidden; } </style>
tuanphan Posted April 26, 2023 Posted April 26, 2023 Can you share link to page where you added map? 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!)
Gonzalosd Posted May 23, 2023 Author Posted May 23, 2023 On 4/25/2023 at 8:20 PM, tuanphan said: Can you share link to page where you added map? 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.
tuanphan Posted May 25, 2023 Posted May 25, 2023 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!)
Gonzalosd Posted June 8, 2023 Author Posted June 8, 2023 On 5/25/2023 at 4:19 AM, tuanphan said: It looks like you removed map on mobile. Do you still need help? Yes, I hid it on mobile but I still want it to display on other platforms.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment