I want to add a map in my html website where by default user current location will be shown on the map. But user can adjust its location on map.
Here is the code :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Locate the user</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicmVldDA3IiwiYSI6ImNrZnhwd2k4NTJxcjIyeXBhdmlhZXViMGkifQ.RpDVVS8IaoOn3srMpLmS8w';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11',
center: [-96, 37.8], // starting position
zoom: 3 // starting zoom
});
// Add geolocate control to the map.
map.addControl(
new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
})
);
</script>
</body>
</html>
I am getting my current location through it. But I am not finding how to adjust our location on this.
Here is a guide by Business Insider: I find it beneficial for embedding Google Maps into an HTML5 website.
https://www.businessinsider.com/how-to-embed-google-map
It tells you the easy way to do it, without adding script. You should be able to do all of the things that you are trying to do with the IFRAME tag for embedding the map.
Related
I'm trying to integrate the google maps into my webserver. As I'm not a Front-End developer I'm having some difficulties with bootstrap elements. So as far as I can see, I was only able to code the necessary things for google maps to work.
Here's part of my code from base.html
<head>
<!-- Google maps -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_API_KEYA&callback=initMap&libraries=&v=weekly" defer></script>
<script>
(function(exports) {
"use strict";
function initMap() {
exports.map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
exports.initMap = initMap;
})((this.window = this.window || {}));
</script>
<style>
#map {
height: 100%;
}
</style>
</head>
And from the other HTML file, I'm trying to reach it with:
<div class="container-fluid">
<div id="map"></div>
</div>
In the Developer console I can see that the element has these CSS elements:
element.style {
position: relative;
overflow: hidden;
}
#map {
height: 100%;
}
Although the map isn't visible till I remove the position relative element.
How can I "Insert" the map into the jumbotron or make it look like it?
You can see the jumbotron I have right now, and this is the size that I want the map to be.
All I had to do was change the CSS elements to:
height: 500px;
width: 100%;
And put them in a container-fluid div
I like this info card you get in the left top corner of a card you embed. Is there a possibility to display this card if I use the API v3. Or do I have to use the embed API of Google Maps?
Because I like to block the use of the scrollwheel and some other options of the API which I can not use with the embedding API.
I think you can use the Custom Save Widget.
original:
https://developers.google.com/maps/documentation/javascript/examples/save-widget
archive.org:
https://web.archive.org/web/20160331182749/https://developers.google.com/maps/documentation/javascript/examples/save-widget
the save-widget is going away, but I think the way to show the box should be still valid.
<!DOCTYPE html>
<html>
<head>
<title>Custom Save Widget</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#save-widget {
width: 300px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
background-color: white;
padding: 10px;
font-family: Roboto, Arial;
font-size: 13px;
margin: 15px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="save-widget">
<strong>Google Sydney</strong>
<p>We’re located on the water in Pyrmont, with views of the Sydney Harbour Bridge, The
Rocks and Darling Harbour. Our building is the greenest in Sydney. Inside, we have a
"living wall" made of plants, a tire swing, a library with a nap pod and some amazing
baristas.</p>
</div>
<script>
/*
* This sample uses a custom control to display the SaveWidget. Custom
* controls can be used in place of the default Info Window to create a
* custom UI.
* This sample uses a Place ID to reference Google Sydney. Place IDs are
* stable values that uniquely reference a place on a Google Map and are
* documented in detail at:
* https://developers.google.com/maps/documentation/javascript/places#placeid
*/
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: -33.8666, lng: 151.1958},
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE
],
position: google.maps.ControlPosition.BOTTOM_LEFT
}
});
var widgetDiv = document.getElementById('save-widget');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(widgetDiv);
// Append a Save Control to the existing save-widget div.
var saveWidget = new google.maps.SaveWidget(widgetDiv, {
place: {
// ChIJN1t_tDeuEmsRUsoyG83frY4 is the place Id for Google Sydney.
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
location: {lat: -33.866647, lng: 151.195886}
},
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
var marker = new google.maps.Marker({
map: map,
position: saveWidget.getPlace().location
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap">
</script>
</body>
</html>
I want to know how can I load two or more babylon files in one html page or if its possible to join them.
I have the following code which its good to see one simple model (exported) but I need add more exported models in the same html page. I heard about a "options.babylonFolder + "/", options.babylonFile" option but I dont know more than that.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Using babylon.js - How to load a scene</title>
<script type="text/javascript" src="./103A_files/hand.js"></script>
<script type="text/javascript" src="./103A_files/cannon.js"></script>
<script type="text/javascript" src="./103A_files/babylon.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#renderCanvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
if (BABYLON.Engine.isSupported()) {
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
BABYLON.SceneLoader.Load("", "101A.babylon", engine, function (newScene) {
//BABYLON.SceneLoader.Load(options.babylonFolder + "./GrupoBabylon", options.babylonFile, engine, function (newScene) {
newScene.executeWhenReady(function () {
// Attach camera to canvas inputs
newScene.activeCamera.attachControl(canvas);
// Once the scene is loaded, just register a render loop to render it
engine.runRenderLoop(function() {
newScene.render();
});
});
}, function (progress) {
// To do: give progress feedback to user
});
}
</script>
You can use BABYLON.SceneLoader.Append to merge a new scene with the current one
I'm learning Google map api v3. So I went to their site and found the Helloworld from the developers' guide:
link:here
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
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"/>
</body>
</html>
I replaced the API_KEY by an api key and SET_TO_TRUE_OR_FALSE by true. But my browser gave me:
This page contains the following errors:error on line 12 at column 96:
EntityRef:expecting';'Below is a rendering of the page up to the first error.
Could someone help me with this, please?
Please refer the link below.
Demo: http://jsfiddle.net/8FSWj/
There is no need to set API key in the script. Please use script used in the above demo.
You have to set div height and width in pixels. Do not set div height and width in percentage.
Another demo with zip code search as below.
Search Demo: http://jsfiddle.net/y829C/1/
<div id="map_canvas"></div>
#map_canvas{
height: 350px;
width: 500px;
}
I recently had to deal with the Google Map API. I'm definitely no expert but..
If you remove the API key all together and replace sensor=SET_TO_TRUE_OR_FALSE with sensor=false it 'should' work fine.
I'm not sure what the repercussions are for not using an API key though.
Check it out here: http://jsbin.com/aHuKiJIm/1/
I am just following the tutorial on google's website on how to use their API. I found this code and am trying to get it to work for any other country than the default but it isn't:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=personalKey&sensor=false&language=ar®ion=ES">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
from what it says this should work simply. I am trying to get Spain to display on map rather than current choice.
The link am following: https://developers.google.com/maps/documentation/javascript/basics
Thanks,
Change the values you're passing to google.maps.LatLng() to some close to where you want to display (eg., goggle.maps.LatLng(40.813797402839086, -3.62546328124995) for Madrid, according to LatLng).
You are trying to set the position of the map by setting the region. You still need to change the co-ordinates to those of Spain.
Try: 40.6986° N, 3.2949° W