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/
Related
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.
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
/*style for map*/
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
/* map div*/
<div class="col-md-12">
<div id="map">
</div>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 7.8731, lng: 80.7718 },
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAumFScM9gO2DBha7pCNH1ua3tvEWVQMsM&sensor=TRUE" async defer></script>
Above code is for my simple google map. But the map is not showing in view. but the map is rendered to the div after viewing it using inspect element.
Please advice me to do solve this.
Thanks in advance.
like this
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAumFScM9gO2DBha7pCNH1ua3tvEWVQMsM&callback=initMap"
async defer></script>
'callback=initMap' was missing from the line because it will call the function specified using the callback parameter
Edit your code like
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAumFScM9gO2DBha7pCNH1ua3tvEWVQMsM&sensor=TRUE" async defer></script>
to
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAumFScM9gO2DBha7pCNH1ua3tvEWVQMsM&callback=initMap" type="text/javascript"></script>
After it's going to work.
To get a better idea follow this link click here.
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
When I click to the embedded Google Maps API of the following Web Page: http://ada.kiexpro.com/html/list.html (click 地圖 at the top-right corner).
It displays:
This web site needs a different Google
Map API key. A new key can be generted
at http://code.google.com/apis/maps/.
Sorry but I've never used this application before. Do I have to just generate a new code in order to solve the problem? Or there are another problems?
Yes, follow the link. Each distinct domain needs its own API key.
This works normally for me
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<style>
#map-canvas {
width: 700px;
height: 600px;
position: absolute;
top: 40px;
left: 360px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>