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
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'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.
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.
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>