I created a page with google maps and I need to print it, but a white line appears in the map in some coordinates of the map, not all the locations it appears.
Print
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Google Maps - Teste</title>
<!-- # CSS Imports # -->
<link href="css/site.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<!-- # Javascript Imports # -->
<script src="js/site.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY_GOOGLEMAPS_API&callback=initMap"></script>
</body>
</html>
CSS Code (css/site.css):
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#media print {
img {
max-width: none !important;
}
}
Javascript Code (js/site.js):
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: -27.6301719,
lng: -49.0330395
},
mapTypeId: 'terrain'
});
}
EDIT 1:
I found a solution ... Instead of taking a screenshot of the div in question, use the Google Maps Static API, where you send some parameters and it returns an image ... BUUUUUT see edit 2...
https://developers.google.com/maps/documentation/static-maps/?hl=pt-br
EDIT 2:
The URL of google maps static is limited by 8192 chars, and i need draw ALOOOOT lines into maps... so... im back to the init...
[## Sorry my bad english :(]
Related
I have a list of points in which I want to iterate and add to leaflet map. I am able to add the points to the maps but when I try to style the text using h1 tags, the style is not applied text from the iteration. From leaflet tutorials I can see that the text in pop up can be styled with header tags. How can i style this text which i am passing to the pop up window through iteration. Below is my sample code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<title>TestMap</title>
</head>
<style>
#map{height : 100vh;}
</style>
<body style="margin:0;padding:0">
<div id="map"></div>
</body>
<script>
var locations = [
["Point 1", 61, 23],
["Point 2", 62, 21],
];
var map = L.map('map').setView([ 63,27], 5.5);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
for (let loc of locations){
// console.log(loc[0])
marker = new L.marker([loc[1], loc[2]])
.bindPopup("<h1> loc[0] </h1> ")
.addTo(map);
}
</script>
</html>
You can use HTML tags within the bindPopup method.
For example:
locations.forEach(function(location) {
var point = L.marker([location[1], location[2]]).addTo(map);
point.bindPopup(`<h1>${location[0]}</h1>`);
});
This will add an h1 element around the location name within the popup.
For styling h1 element using CSS:
h1 {
color: red;
}
Based on the answer provided by #divyavinod6, I changed the for to forEach to perform the iteration. The forEach allows running function on the iteration element. below is the full code if it will be useful for someone else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="customstyle.css"> -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<title>TestMap</title>
</head>
<style>
#map{height : 100vh;}
</style>
<body style="margin:0;padding:0">
<div id="map"></div>
</body>
<script>
var locations = [
["Point 1", 61, 23],
["Point 2", 62, 21],
];
var map = L.map('map').setView([ 63,27], 5.5);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
locations.forEach(function(location) {
var point = L.marker([location[1], location[2]]).addTo(map);
point.bindPopup(`<h1>${location[0]}</h1>`);
});
</script>
</html>
I've been working on a Leaflet map recently, and after putting in a popup marker on the map, I have been unable to properly embed a mp4 video in that marker.
The issue is that while I have embedded the link to the video in the marker, the video won't play when you open the popup marker; it just shows a frozen image. I was wondering if there was a workaround to get the video to play in this popup marker automatically once the popup is opened.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<style>
#map { height: 800px; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script>
var map = L.map('map').setView([27.2, 84], 4);
var Esri_NatGeoWorldMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — National Geographic, Esri, DeLorme, NAVTEQ, UNEP-WCMC, USGS, NASA, ESA, METI, NRCAN, GEBCO, NOAA, iPC',
maxZoom: 16
}).addTo(map);
var marker = L.marker([27.2,83.95],{draggable: true, title:"Hello", opacity: 0.5}).addTo(map).bindPopup('<h1>Marker</h1><video> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></video>').openPopup();
</script>
</body>
</html>
I'm using mapbox to make a map. I don't know if my map is being rendered or not cause the only i could see on the screen is the pointer and i can't even open the console to read the mistake. Please help me to find out if there's anything wrong with my codes! Thank you so much:
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
<title>Document</title>
<style>
body {
margin: 0;
}
#map {
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<div id='map'></div>
<script src="main.js"></script>
</body>
</html>
My JS:
mapboxgl.accessToken = 'pk.eyJ1IjoiZGh0NzZkeThjIiwiYSI6ImNrdjd0Zm92cDF4aGMyb2wwenhtbWJidjUifQ.KUBtTY1kI2SOMFXkKeerWQ';
navigator.geolocation.getCurrentPosition(successLocation, errorLocation, {
enableHighAccuracy: true
})
function successLocation(position) {
console.log(position)
setupMap([position.coords.longtitude, position.coords.latitude])
}
function errorLocation() {
}
function setupMap(center) {
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: center
});
}
I googled the problems for a while, but still have no idea about how to fix it, the problem is first load is work fine, but when I refresh the page, sometimes it's not work and have error message,
below is my code, hope can get me some idea, thanks!!
import React, { Component } from 'react';
import './index.css'
const google = window.google;
class App extends Component {
componentDidMount() {
this.initMap();
}
initMap() {
const latLong = {lat: -25.363, lng: 131.044};
const options = {
zoom: 5,
center: latLong
};
const map = new google.maps.Map(this.refs.map, options)
const marker = new google.maps.Marker({
position: latLong,
map,
});
}
render() {
const style = {
marginLeft: "200px",
height: "400px",
width: "100%",
}
return (
<div id="app">
<div id="map" style={style} ref="map"/>
</div>
);
}
}
export default App;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>Google Map</title>
<script>function initMap() {}</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"></script>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
error message
Try to put the 5 second timer like setTimeout({},5000)
I want to accept latitude and longitude from user and display it using javascript. I am using this code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Localizing the Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=ja"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
The page is loaded but doesnt show anything. Does it needs any javascript plugins. I googled but got only IDE to develop JavaScript projects. What if I want to use my existing IDE(ecllipse Juno).
You're missing the CSS. Add:
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
As per Google's example and it will work. Tested locally.