I am working on marking a Google Map dynamically, I can initiate the map in a layout.hbs
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key={{google_browser_key}}"></script>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(55.6810038, 12.6033823),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
zoomControl: false
});
</script>
But I don't wish to broadcast my API key to the world, is it possible to setup a callback to the app.js, where you connect each document with the maps.googleapis.com?
I tried to use the router, but I am missing document or window variables:
app.use(function (req, res, next) {
res.locals.title = req.Globalize.formatMessage('strings/title');
res.locals.google_browser_key = "";
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(55.6810038, 12.6033823),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
zoomControl: false
});
next();
});
Related
On one of my webpages there a Google V3 API map upon which I add four KML layers.
Sometimes all four KML Layers will be displayed, but more often or not, only two or three layers are loaded. It is the last KML layer that loads less frequently. Refreshing the page will load more.
Here's my javascript
function initializeGoogleMap()
{
var mapOptions = {
center: { lat: 45.325, lng: 14.254},
zoom: 12,
panControl: false,
zoomControl: false,
mapTypeControl: true,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/PlacesOPOV1c.kml",map: map, preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesEdgeV1k.kml",map: map,preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesFillV1k.kml",map: map,preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesOPOV1n.kml",map: map,preserveViewport: true});
}
Presumably the KML files are to taking too long to download and are not available in time to be added to the map.
What can I do to resolve this?
So for clarity, here's the final solution
function initializeGoogleMap()
{
var mapOptions = {
center: { lat: 45.325, lng: 14.254},
zoom: 12,
panControl: false,
zoomControl: false,
mapTypeControl: true,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/PlacesOPOV1c.kml", map: map, zIndex: 0, preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesEdgeV1k.kml", map: map, zIndex: 1, preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesFillV1k.kml", map: map, zIndex: 2, preserveViewport: true});
new google.maps.KmlLayer({url:"https://www.virtualmountains.co.uk/Istria/RoutesOPOV1n.kml", map: map, zIndex: 3, preserveViewport: true});
}
"Map: Expected mapDiv of type Element but was passed null."
-The height of the div is set in the css.
Javascript (googleMaps.js):
function initMap() {
try {
const sportHall2 = { lat: 51.18310959584043, lng:
4.38829092697164 };
const map2 = new google.maps.Map(document.getElementById("map-2"),
{
zoom: 13,
center: sportHall2,
disableDefaultUI: true,
zoomControl: true,
fullscreenControl: true,
streetViewControl: true,
});
const map2b = new google.maps.Map(document.getElementById("map-2b"), {
zoom: 13,
center: sportHall2,
disableDefaultUI: true,
zoomControl: true,
fullscreenControl: true,
streetViewControl: true,
});
} catch (error) {
console.log(error);
}
}
HTML Page 1:
<script src="/scripts/googleMaps.js"></script>
<div class="grid-card">
<h3>Pius X-instituut</h3>
<h5>Bekijk de sporthal hier.</h5>
<p>Adres: Hof Van Tichelen 28 2020 Antwerpen</p>
<div id="map-2"></div>
</div>
<script src="/scripts/googleMaps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=
initMap&libraries=&v=
weekly" async></script>
HTML Page 2 (error occurs and map won't display on this page):
<script src="/scripts/googleMaps.js"></script>
<div class="grid-card map-2b-container">
<h3>Pius X-instituut</h3>
<h5>Bekijk de sporthal hier.</h5>
<p>Adres: Hof Van Tichelen 28 2020 Antwerpen</p>
<div id="map-2b"></div>
</div>
<script src="/scripts/googleMaps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=
initMap&libraries=&v=weekly" async></script>
CSS:
#map-2{
height: 300px;
width: 100%;
}
#map-2b{
height: 300px;
width: 100%;
}
ERROR:
Se {message: "Map: Expected mapDiv of type Element but was passed
null.", name: "InvalidValueError", stack: "Error↵ at new Se (https://maps.googleapis.com/m…
6ho4&callback=initMap&libraries=&v=weekly:156:128"}
Try this:
Source: Maps API
const mapDiv = document.getElementById("map-2b");
const map2b = new google.maps.Map(mapDiv), {
zoom: 13,
center: sportHall2,
disableDefaultUI: true,
zoomControl: true,
fullscreenControl: true,
streetViewControl: true,
});
Have you tried embedding google maps using iframe? If not then this is the easiest way to have map in the HTML.
Step1: go to https://www.google.com/maps
Step2: enter the location you want to embed.
Step3: Click menu -> share or embed map -> embed map tab
Step4: Copy the iframe tag and paste it in the HTML file
function initMap() {
try {
const sportHall2 = { lat: 51.18310959584043, lng:
4.38829092697164 };
if(document.getElementById('map-2')){
const map2 = new google.maps.Map(document.getElementById("map-2"), {
zoom: 13,
center: sportHall2,
disableDefaultUI: true,
zoomControl: true,
fullscreenControl: true,
streetViewControl: true,
});
}
}
Code above works by setting both div Id's on each separate page "map-2" and checking if the div exists before running the Map() constructor.
I'm trying to get a general location of the user, reasons irrelevant, but I can't use the API to get their location. I've tried to parse the data associated with the IP, but if I have the $.getJson() outside of the initMap() function, the variables aren't changed and if inside initMap(), initMap() isn't recognised as a function.
tl:dr - how do I call the $.getJSON from inside the initMap() function?
Here's What I've tried:
<div id="map" style="width: 100%; height: 100%;; "></div>
<!-- G-Maps box-sizing: border-box; -->
<script>
var usrLat = 0;
var usrLon = 0;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
$.getJSON("https://freegeoip.net/json/", function (data) {
usrLat = parseFloat(data.latitude);
usrLon = parseFloat(data.longitude);
console.log(usrLon + ", " + usrLat);
});
center: {lat: usrLat, lng: usrLon},
mapTypeControl: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ['roadmap', 'terrain']
}
});
}
</script>
Your issue is the position of your call (inside the data structure), plus the semicolon on the end of the call.
Try this instead
<div id="map" style="width: 100%; height: 100%;; "></div>
<!-- G-Maps box-sizing: border-box; -->
<script>
var usrLat = 0;
var usrLon = 0;
function initMap() {
$.getJSON("https://freegeoip.net/json/", function (data) {
usrLat = parseFloat(data.latitude);
usrLon = parseFloat(data.longitude);
console.log(usrLon + ", " + usrLat);
});
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: usrLat, lng: usrLon},
mapTypeControl: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ['roadmap', 'terrain']
}
});
}
</script>
Sorted it out. Thanks to Phil and GeoCodeZip for the help
<script>
var usrLat = 0;
var usrLon = 0;
$.getJSON("https://freegeoip.net/json/", function (data) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: parseFloat(data.latitude), lng: parseFloat(data.longitude)},
mapTypeControl: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ['roadmap', 'terrain']
}
});
});
</script>
This is my current code
var myOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 2,
minZoom: 4,
maxZoom: 100,
streetViewControl: false,
scaleControl: false,
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: ["custom"]
But as you can see, the controls stay.
I've tried ZoomControl: false, as well but that doesnt work either.
Any idea why?
Thanks
scaleControl:false is the default value, it controls the scaleControl. (scaleControl enables/disables the Scale control that provides a simple map scale. By default, this control is not visible. When enabled, it will always appear in the bottom right corner of the map.) If you want the defaultUI disabled, set disableDefaultUI: true.
If you are just worried about the zoomControl, you don't have any code to disable that (that would be zoomControl: false (not ZoomControl: false, javascript is case sensitive).
var myOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 2,
minZoom: 4,
maxZoom: 100,
zoomControl: false,
streetViewControl: false,
scaleControl: false, // this is the default value...
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: ["custom"]
this is my code
function initMap(latitude, longitude) {
var myLatLng = {lat: latitude, lng: longitude};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
and here is how it's displayed
I would like to hide drop pin and Map/Satellite, how would I do that?
Form here https://developers.google.com/maps/documentation/javascript/controls#DisablingDefaults
Either can use
disableDefaultUI: true
globally to remove all from UI or use
{
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
rotateControl: boolean,
fullscreenControl: boolean
}
to remove/add individually