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
Related
I'm using the google maps api:
https://developers.google.com/maps/documentation/javascript/tutorial?_ga=2.192156522.1955755213.1592725672-591919557.1592514255
and I have copy pasted the following code into my index.html, and added my API key in the appropriate place.
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
defer
></script>
<style type="text/css">
/* 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>
<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>
Yet, the map doesn't show. What am I doing wrong?
I also see the following in the console that might be relevant:
Unhandled Promise Rejection: InvalidValueError: Map: Expected mapDiv of type Element but was passed null.
But I do see the div in the dom:
<div id="map"></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.
UPDATED!
I am building a simple site modifying a free template with given style. I put a google map on the page and it behaves strange. In internet explorer it works just fine. In chrome it fails to work after the page is loaded (it is fully grey with google sign), but I realized that it works fine after I zoom in or out the browser. What can cause this problem? I was searching for answer for some days, but could not find any reasonable solution for my problem.
I have a simple div in HTML for the place of the map, the article is opened form the main page using the same link with id (index.html#contact).
The height and width of the map's div is given!
I put the lines for resizing that gave solution for many others, but me.
I am totally fed up with this issue spending days and days just trying to figure out the f***ing soultion without any result.
<article id="contact">
...
<div id="map"></div>
...
</article>
The script looks like this (I removed my key and put mykey instead, do not mention that pls.):
<script>
function myMap() {
var myLatlng = new google.maps.LatLng(-13.163138, -72.545053);
var mapOptions = {
center: myLatlng,
zoom: 14,
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(latLng);
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=myMap"></script>
The css code for the map: (maybe some other parts of then css has effect on it as well, not sure...)
#map {
width: 400px;
height: 400px;
background-color: grey;
overflow:visible;
margin: auto;
}
#map img {
max-width: none !important;
}
#media screen and (max-width: 480px) {
#map {
width: 200px;
height: 200px;
background-color: grey;
overflow:visible;
margin: auto;
}
#map img {
max-width: 200px;
}
}
I'm trying to follow this example and use Ireland's shapefiles to highlight it's provinces.
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/2.10.0/d3.v2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style>
#map {
width: 500px;
height: 500px;
}
.SvgOverlay {
position: relative;
width: 500px;
height: 500px;
}
I'm getting the shapefiles from here: http://www.cso.ie/en/census/census2011boundaryfiles/ and converting Census2011_Province_generalised20m.zip to GeoJson format using http://www.mapshaper.org/.
When I overlay this on top of GoogleMaps using D3, nothing is displayed. Could someone please help me. TIA.
My fiddle
I would propose the following solution:
Convert shapefile into GeoJSON using ogr2ogr web client. Since
the specified shapefile uses EPSG:29902 coordinate system, set
Target SRS:EPSG:4326 to convert it to World Geodetic System
Once GeoJSON file is ready
(Census2011_Province_generalised20m.json), you could utilize
Google Maps Data Layer API to render it as demonstrated below:
Example
function initMap()
{
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 53.349248,
lng: -6.255323
},
zoom: 6,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var dataLayer = new google.maps.Data();
dataLayer.loadGeoJson('https://gist.githubusercontent.com/vgrem/440708612b574764c309/raw/2a4e2feadc204806440c51a14c2ef1f54f4fc3d8/Census2011_Province_generalised20m.json');
dataLayer.setMap(map);
}
#map {
width: 800px;
height: 640px;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
Result
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/