This should be pretty basic but I cant really find the answer to it:
I try to implement a Google map, using the Google API for business and got a working client ID / key.
Using the standard examples from for the documentation (https://developers.google.com/maps/documentation/javascript/tutorial) its only possible to get a blank map.
This is the simple test code that show a blank map:
<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>
I need to get the correct map with all the info and places that its containing.
All the examples I find are for getting a blank map, or adding stuff to it.
Thanks,
/b
Your supplied JavaScript works for me. Have you included the required div in your webpage?
<div id="map-canvas"/>
Plus the div may need to be styled, as the map may be there but with 0px height and 0px width (hence making it impossible to see), the following CSS will make your div fullscreen:
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
So, overall, you should have this:
<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">
</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>
Related
For the first time I'm trying to incorporate the Google Maps API into a website and it's not working at all. I can't tell if there's something wrong with the code and I'd like to rule that out before trying to create another API Key
I've moved the tag around and tried different styling approaches, but it just doesn't show anything.
<!DOCTYPE html>
<html>
<head>
<script>
function initMap() {
var location = { lat: -30.0327268, lng: -51.2095745 };
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: location
});
}
</script>
<script async defer
src="https://maps.googleapis/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap">
</script>
<title>
</title>
<style>
* {
margin: 0;
padding: 0;
}
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
The URL in the script that you are using is incorrect.
You are using: https://maps.googleapis/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap
The correct URL: https://maps.googleapis.com/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap
Hope this helps!
The below line was not added correctly,
It should be in this form
Below is the updated code in which map is working fine..
<!DOCTYPE html>
<html>
<head>
<script>
function initMap() {
var location = { lat: -30.0327268, lng: -51.2095745 };
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: location
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBDXh6FfycwxdCaHUbrCWkswSarA77kowY&callback=initMap"
async defer></script>
<title>
</title>
<style>
* {
margin: 0;
padding: 0;
}
#map {
height: 500px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
I'm trying to customize google map but I have a small problem.
Here is the css code:
#map-canvas {
width: 100%;
height: 500px;
}
and the js code:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
And this is how I initialize the map in html. This example actually works.
<div id="map-canvas"></div>
But when I trying to put my map into some div e.g:
<div>
<div id="map-canvas"></div>
</div>
It doesn't work. How to fix that ?
/// EDIT
Please put this into example.html and try to run. Nothing happens for me.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<div id="map-canvas"></div>
</div>
</body>
</html>
Your parent div should have height and width defined.
<body>
<div style="height:100%; width:100%;">
<div id="map-canvas"></div>
</div>
</body>
Try This.
For more detail:
Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag
Nothing seems wrong in your code ,it works fine just seprated css.I have checked and tested.
DEMO
I'm trying to build a mobile application using Google Maps Javascript API v3. Functionally, it's doing fine, but the performance is really sluggish on middleware Android devices (used Samsung Galaxy 3 for testing).
I also checked the performance on the official http://maps.google.com, had the same result, and using the first example code as well. Is there any mobile specific step, I might have missed (see the example code), or the Javascript API performance is limited to this level, and building a native application cannot be avoided in this case?
Thank you very much for the answers!
Here is the code of the linked page:
<!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="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
As per official documentation, your code is right. And maps is optimized.
I suggest:
Try to change the script URL to http://maps.googleapis.com/maps/api/js?sensor=false
Load scripts at end of page.
Example:
<!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%; width: 100%; }
</style>
</head>
<body>
<div id="map_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Try the demo out at http://fiddle.jshell.net/tomasdev/8FhYz/show/light/ — I'm in doubt regarding your device. If official demos work slow, I don't think there is a quite good solution.
Google maps performance is VERY MUCH dependant on how well structured the whole page is.
The biggest performance hit usually comes from repaint/render cycles of the page - caused by the tiles loading / unloading.
Dependant on how the map is placed and how you use it, it's a benefit to position the map element using position:fixed, taking it out of the document flow. Position:absolute can also help, but not as much as 'fixed'.
I am working with Google Maps and I want to load the map in an external file, where I can use jQuery to set up the rest of the page.
I have made three changes to the Hello World example: I've included jQuery, I've initialised the map in an external file, and I've removed the onload event in the <body> tag. And I now have a blank screen where there used to be a map, and no console errors to give me a clue.
This is my HTML:
<!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 src="./js/jquery.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true">
<script src="./js/maps.js"></script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
This is maps.js in full:
$(document).ready(function () {
console.log('document ready');
function initializeMap() {
console.log('initialize');
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
initializeMap();
});
I don't see any of the console statements. I also don't see a map - just a blank screen.
I must be doing something stupid, but what is it?
You're missing an </script> after src="http://maps.googleapis.com/maps/api/js?sensor=true">
I have been looking for a while for a simple way to make a KML/KMZ layer transparent/opaque using the Google Map API version 3. There are plenty of example out there, but there doesn’t seem be a simple example of making a KML layer opaque. I have provided an example below, can someone help me out with this???
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Example 2</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// ***Initialize the Map Function ***
function initialize() {
var latlng = new google.maps.LatLng(0,0);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var polyLayerOptions = {
supressInfoWindows: true,
Opacity: 0.15
};
var polyLayer = new google.maps.KmlLayer
('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml', polyLayerOptions);
polyLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
There isn't an opacity flag in the KML options, but you can set the color of objects in your KML to be transparent. Google uses a 32 bit color in the form ABGR, where the first byte is the alpha channel or transparency and the next three bytes are regular colors (though not in the standard RGB order that everyone else uses!). For example, a color of #80FF0000 would be a 50% transparent Blue. There doesn't seem to be a way to modify the transparency on the fly in code like you can in Google Earth, you have to update the KML and repost it to your map.