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)
Related
I am using the Google Maps API specifically the "Maps JavaScript API", and I have most of the JavaScript code done and the map is shown in my browser (Chrome).
But here is the issue, when I open the the file in Firefox browser or when I open the same file in other computers in their Chrome browser... the map will not show the right way. Mostly the issue is with the zoom feature.
On my Chrome the map will appear as following:
In firefox or some other computers the map will appear as following:
I tried changing the code in different ways, and reading the Google documentation again. I tried using different variations of
map.fitBounds(bounds);
map.panToBounds(bounds);
But I have not gotten any good results from it.
Here is the complete code
<div class="ui-panelgrid-cell ui-g-12 ui-md-12">
<style>
#map {
height: -webkit-fill-available;
display: block;
position: static !important;
}
body #mapOverFlow .ui-dialog .ui-dialog-content {
overflow: hidden;
}
</style>
<div id="map" style="position: relative; overflow: hidden;"></div>
<script>
function initialize() {
var userCoor = [
["<div><h1>JLSKYLL REDES</h1><div><p></p><p><b>22246338</b></p></div></div>", 9.381300800000002, -
84.14509079999999
],
["<div><h1>Lirio Lodge</h1><div><p>Lirio Lodge is the ideal place for lovers of nature, has a privileged location in front of the beautiful Laguna Madre of God, in the channels of Tortuguero.</p><p><b>22825003</b></p></div></div>",
9.94591, -84.11847569999999
]
];
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 2
};
var marker, i, userCoordinate, map;
var bounds = new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var userCoorPath = [new google.maps.LatLng(9.381300800000002, -84.14509079999999), new google.maps.LatLng(
9.94591, -84.11847569999999)];
userCoordinate = new google.maps.Polyline({
path: userCoorPath,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 2
});
userCoordinate.setMap(map);
var infowindow = new google.maps.InfoWindow();
for (i = 0; i < userCoor.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(userCoor[i][1], userCoor[i][2]),
map: map
});
var loc = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
bounds.extend(loc);
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(userCoor[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
center = bounds.getCenter();
map.fitBounds(bounds);
map.panToBounds(bounds);
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initialize">
</script>
</div>
The map should be shown in your browser when you open the file and add the API_KEY. Now it may appear with the zoom, or i can appear all far away.
Try in Firefox and Chrome.
Your map has no center set. Note that this is a required parameter, but you never assign the value of center = bounds.getCenter() to your map instance. Try adding the code below:
const center = bounds.getCenter();
map.setCenter(center);
In addition, your map has a zoom level of 2. Change it to e.g. 8 if you don't want your map to appear all far away.
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8
};
Take a look at this jsfiddle for demonstration and guidance. It works regardless of browser.
Hope this helps you.
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!
I'm using Squarespace to build my website and want to insert a custom map from google maps javascript api. I've already gotten google api key.
I've followed steps as below :
What I'm trying to archive is just to show a google map on my web.
Step 1: Insert a embed block for html
<div id="map_canvas"></div>
Step 2: insert javascript in page header
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Step 3 : in custom css section
#map_canvas
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px
}
But the codes I put on Squarespace didn't work. How should I do?
Here the link to my webpage on SquareSpace
Your Site Title
Thanks!!
LoL, u put the script at a very wrong place i think.
1st. put your script, all of it after </body>
2nd. you need a cover for your maps <div> like a wrapper or so to put it in center. and using a cover/wrapper div you can manipulate the size and the shape.
3rd. i don't know id="maps_canvas". because from google i got this <div id='gmap_canvas' style='height:100%;width:100%; position:static'>, it was gmap_canvas. and put style in it to make them fit with your cover/wrapper div.
easier way: http://embedgooglemaps.com/en/
perhaps it'll help. :)
This is what I changed in my code as below :
Step 1: Insert a code block for html <-- it was not embed block, but code block. I mistyped before.
<div id="mapWrapper">
<div id='gmap_canvas' style='height:100%;width:100%; position:static'>
</div>
</div>
Step 2: insert javascript in page header.
I change only ID name from 'map_canvas' to 'gmap_canvas'
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Step 3 : in custom css section.
Changed ID name from 'map_canvas' to 'mapWrapper', then set another size.
#mapWrapper
{
width: 750px;
height: 500px;
margin: 0px;
padding: 0px
}
I tried to put most of everything people advised me, but still the map doesn't come up on my site.
Is there something wrong yet?
I did the same thing with my site.
What I did differently is not put my #map-canvas within a wrapper. While previewing your site, are you able to find your gmap_canvas with the inspect view? It may be that the content is there, just not displaying properly.
My code:
The following is in the page header code injection box. Note that a large bit of this code (and I don't remember which parts since I don't know JS) is just to keep the pin centered on different screen sizes.
<style type="text/css">
html, body, #map-canvas {
height: 400px;
width 960px;
margin: 0;
padding: 0;}
#banner-area-wrapper {
display: none;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap">
</script>
<script type="text/javascript">
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map-canvas");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}
function initialize() {
var myLatLng = {lat: 39.910073, lng: -82.965509};
var mapOptions = {
center: myLatLng,
zoom: 14,
panControl: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.LEFT_CENTER},
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Opportunity Center'
});
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
On the page, I have a code block, with the following in it:
<div id="map-canvas" style="width:90%;margin:auto;"></div>
Note that I did not put my #map-canvas inside a wrapper, nor include anything in the custom CSS.
I made a quick dummy site, and replicated your failure to show the map, but I don't know quite enough about Squarespace to say exactly why. I'd start with copying my code and see if that works for you - seems like the big difference is your wrapper around the canvas.
I am having an issue with the default marker, it seems to be offset when zoomed out. I've had a good look around on here but can only find answers to custom marker images and setting the anchor point on the image. I'm using google's default marker image.
http://thecompleteanimaldirectory.com
This is the website in question, you will notice that the maps in the book will be inaccurate once you zoom out, for example the customer in the Isle of White will end up in Germany!
However, on this page, the maps are accurate.
http://www.thecompleteanimaldirectory.com/search.php?category=dog&area=
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: { lat: 32.00, lng: 15.00},
zoom: 8
};
function initialize() {
var map20 = new google.maps.Map(document.getElementById("map_canvas_barrie"), mapOptions);
function codeAddress20() {
var address20 = "11 Ashey Park, Ashey Road Ryde, I.O.W, PO33 4AL";
geocoder.geocode( { "address": address20}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map20.setCenter(results[0].geometry.location);
var marker20 = new google.maps.Marker({
map: map20,
position: results[0].geometry.location,
});
} else {
map20.setZoom(0);
}
});
}
codeAddress20();
Code is identical for both pages, I have gone as far as to style the maps the same on both pages but no luck. Any help is appreciated!
It's an CSS-issue.
Source of the problem is this rule in main.css, which also applies to images in the map:
.booklet .b-wrap-right img,
#book-right-side img {
position: absolute;
bottom: 10px;
right: 15px;
height: 30px;
}
add this rule to override it:
.right-book .gm-style img{
bottom: 0;
right: 0;
position:relative;
height:auto;
}
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/