I'm trying to set up a dynamic map with Vue.js
I'm porting this code to vue.
I've pretty much simply copied to function to a method like this:
generateHeatmap(){
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 37.775, lng: -122.434},
mapTypeId: 'satellite'
});
const heatmap = new google.maps.visualization.HeatmapLayer({
data: this.getPoints(),
map: map
});
},
The problem is that when I generate the heatmap the map doesn't show up. I can see that the html code changes in the console, but the html doesn't render anything. What am I missing?
This is a live Jsfiddle:
https://jsfiddle.net/eywraw8t/430049/
In your CSS, you only specify that the #map is width: 100%, but you need to actually specify a width and height. Something like this would work:
#map {
height: 500px;
width: 500px;
}
Edit:
Based on the comments you could use 100% width and height, see this question for more info.
Related
This is the first time I've used a google api and I followed the instructions exactly but the map won't load just the grey box that I started with, please help.
<div class="map">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function apimap() {
var uluru = {lat: -73.993439, lng: 40.750545};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
It seems there's an issue regarding your implementation. You are using apimap() as your init function while in your load request's callback, you are using initMap(). You should replace initMap() with apimap() or vice-versa. With this, your map will work.
I've replicated your issue, the location is in Antartica. You can check the demo below.
var map;
function apimap() {
var uluru = {lat: -73.993439, lng: 40.750545};
map = new google.maps.Map(document.getElementById('map'), {
center: uluru,
zoom: 4
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
/* 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;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=apimap"
async defer></script>
And also, please refrain from posting your Google Maps API key unless it is restricted to prevent abuse and to avoid your API key being used by unauthorized applications. To learn more about API restrictions, you can check Restricting an API key.
Hope it could help and good luck on your coding!
my map is not rendering correctly.
I have never experienced this yet (notice the icons on the right buttons being distorted). The code used to generate the map is extremely simple:
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 43.828430, lng: 18.3445995},
zoom: 18
});
new google.maps.Marker({
position: {lat: 43.828430, lng: 18.3445995},
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9zhNUfid1PgR6FZ-g8xTp_NCqV3JvsHM&callback=initMap" async defer></script>
Any ideas?
Idk why, but when I tried your code, it worked but the map was also gray. When I pointed style="width:500px;height:500px" map become working
Okay so the problem was that I had a bad CSS rule that was interfering with google's rendering.
For reference it was 100% max width on img.
Google yesterday released v3.22 of their maps api which moves a bunch of the standard controls.
According to the Google Blog at http://googlegeodevelopers.blogspot.co.uk/2015/09/new-controls-style-for-google-maps.html#gpluscomments you can temporarily revert to the old controls, but I can;t get this to work at all.
The blog post says to simply add google.maps.controlsStyle = 'azteca' before you initialize the map, but I'm still getting the old controls displayed and they clash with some of my custom controls.
I've tried adding the line right at the start of my initialize() routine (which sets up all of the map options and creates the map object; and also right before the map = new google.maps.Map() statement.
Has anyone got any pointers as to what I'm doing wrong?
They have a typo in the post (and in the documentation)
Issue in the issue tracker
google.maps.controlsStyle = 'azteca';
should be:
google.maps.controlStyle = 'azteca';
code snippet:
var map;
function initMap() {
google.maps.controlStyle = 'azteca'
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
try this:
google.maps.controlStyle = 'azteca';
I'm trying to use the Google Maps API. I directly copied the example code from the docs but the map isn't showing up the way I expected:
I tried to look through my code to see if there's any error, but no luck. Any idea?
http://jsfiddle.net/DerekL/B3KYB/ (The key is removed)
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map($("#mapView")[0], mapOptions);
}
Your CSS:
div, body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
...will affect any div-element in the page, also the div's created by the maps-API.
Use this selector instead: #mapView, body, html
http://jsfiddle.net/doktormolle/nmwHw/
I have a bit of a problem with my Google Maps application.
So I'm following the code given on the API to create the basic map. I have this:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 75% }
</style>
And i have the following javascript as well to initialize the map:
function showmap(coordinates)
{
var lat = coordinates.latitude;
var lon = coordinates.longitude;
var myOptions = {
position: new google.maps.LatLng(lat, lon),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
}
but all I get in the browser is just a big gray box. I've tried in several browsers (chrome, firefox etc...) but it all looks the same. I'm pretty sure I've set it up correctly...anybody got any ideas what's happening?
thanks in advance!
I don't know what the position-parameter is good for(there is no map-option like this), but I guess you mixed up position and center(center is required)