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>
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
/*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 have created a map which you can see here http://summitaccounting.ca/about-us
I have created the API key twice with the same result
I have pinpointed the property. However, I cannot get rid of the gray grid over the top of the map. Here is the code I am using.
Any help would be appreciated.
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 52.115, lng: -114.894};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_fWUOsy0ygeKqSbdfiaK7_WKCrXCkDgc&callback=initMap">
</script>
</body>
</html>
In your template.css file, you have this style declaration:
a img,fieldset,img{
border:none;
padding:5px 10px !important;
}
It's that padding that is messing with your google maps. You're going to need to rework some of this, or try to override it with even more !important styles for the google maps. ugh.
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 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>