I'm trying to run a simple google maps example (this is the example: https://developers.google.com/maps/documentation/javascript/examples/map-simple-async). I put the code in my .hmtl file but I`m getting a blank page. And, of course this seems to happen with all google examples (I save all my files on ANSI format).
The code is:
<!DOCTYPE html> <html> <head>
<title>Asynchronous Loading</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script>
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(document.getElementById('map-canvas'), mapOptions);
}
function loadScript()
{
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?key=<MY_CODE>&sensor=false&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script> </head> <body>
<div id="map-canvas"></div> </body> </html>
On that Google example they also include a link to a CSS file. You don't have any CSS (either inline or external) in the code you've put into the answer.
Look at their CSS file, you'll need something similar:
https://developers.google.com/maps/documentation/javascript/examples/default.css
Related
About 3 weeks ago the arcgis Dynamic service is no longer visible on the google map. At the beginning I thought that something went wrong with my code, but after executing a sample code that does the same with the same result, I realized that something else went wrong.
The following code was taken from "ArcGIS Server Link for Google Maps API V3: Examples". It is basically loading an ESRI sample dynamic service.
When I load a Dynamic service from my arcgis server, the service is loaded but its not visible on the google map. (I know that because when I click on the map I get the property window of the feature from the Dynamic service although it is not visible).
If you run the following code you will not be able to see the esri dynamic service:
http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer][1]'.
My question is what went wrong here?
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Dynamic Map Service Overlay</title>
<script type="text/javascript">
//copy from http://gmaps-samples.googlecode.com/svn/trunk/versionchecker.html?v=2.86
function getURLParam(name) {
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
return (results === null ? "" : decodeURIComponent(results[1]));
}
var gmaps_v = getURLParam('v');
if (gmaps_v) gmaps_v = '&v='+gmaps_v;
var script = '<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false' + gmaps_v + '"></' + 'script>';
document.write(script);
</script>
<script type="text/javascript" src="../src/arcgislink.js">
</script>
<script type="text/javascript" src="dynamap.js">
</script>
</head>
<body style="margin:0px; padding:0px;">
<div id="map_canvas" style="width:100%; height:100%">
</div>
</body>
//dynamap.js
function init() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(40, -100),//35.23, -80.84),
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true //my favorite feature in V3!
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var url =
'http://sampleserver1.arcgisonline.com/ArcGIS/
rest/services/Demographics/ESRI_C
ensus_USA/MapServer';
var url =
'http://sampleserver1.arcgisonline.com/ArcGIS
/rest/services/Demographics/ESRI_Census_USA/MapServer';
var dynamap = new gmaps.ags.MapOverlay(url);
dynamap.setMap(map);
}
window.onload = init;
SAPUI5 - Google map not showing. There are no error in Console but google map is not showing. Please find the code snippet that I have tried.
Index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script
src="https://maps.googleapis.com/maps/api/js?
key=AIzaSyCEf_wLCEciMDw7tgnDGXptl94rdzLhW7Y&libraries=places"
type ="text/javascript"> </script>
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'></script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("googlemaps");
var app = new sap.m.App({initialPage:"idgooglemaps1"});
var page = sap.ui.view({id:"idgooglemaps1",
viewName:"googlemaps.googlemaps",
type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</script>
<style>
.myMap {
height: 100%;
width: 100% ;
}
</style>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
In View, I have included canvas
<HBox id="map_canvas" fitContainer="true" justifyContent="Center"
alignItems="Center" >
</HBox>
Controller: In event OnAfterRendering I have written the map initialization.
onAfterRendering: function() {
if (!this.initialized) {
this.initialized = true;
this.geocoder = new google.maps.Geocoder();
window.mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//This is basically for setting the initial position of the map, ie. Setting the coordinates, for the place by default
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
console.log(map);
var infowindow = new google.maps.InfoWindow;
var geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker({
map: map,
});
When you create a UI5 control, the ID assigned to the HTML elements is a generated ID('idgooglemaps1--map_canvas' in your case ). So an element with ID 'map_canvas' does not exist. You can however fetch the UI5 control & get the generated ID.
var oHBox = this.getView().byId("map_canvas");
var map = new google.maps.Map(document.getElementById(oHBox.getId()), mapOptions);
it seems that something is missing. in fact by means of the inspector, the right path for item my be longer than what oHBox.getId() returns.
for example:
container-TestGpsNew---View1--box1-container-TestGpsNew---View1--myAppGPS-0
oHBox.getId() = container-TestGpsNew---View1--box1,
container-TestGpsNew---View1--myAppGPS is the path for the View for example :
this.byId("myAppGPS").getId()
There is the remaining "-0" which I don't know where it is from. still searching.
I'm trying to prototype some plotting on Google Maps API. I've followed the code here and think my code should work, however I get a blank screen. All of the objects have what appears to be the correct data but alas no dice. Any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Test</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<key removed>&sensor=false"></script>
<style type="text/css">
</style>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(33.001466, -97.354317);
var mapOptions = {
zoom:6,
center:myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
console.log(mapOptions);
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
console.log(map);
var routeCoordinates = [
new google.maps.LatLng(33.001466, -97.354317),
new google.maps.LatLng(33.025001, -97.352171),
new google.maps.LatLng(33.033219, -97.341700),
new google.maps.LatLng(33.049321, -97.320414),
new google.maps.LatLng(33.051335, -97.304020),
new google.maps.LatLng(33.059464, -97.298355),
new google.maps.LatLng(33.083919, -97.295609),
new google.maps.LatLng(33.111314, -97.291918),
new google.maps.LatLng(33.136042, -97.289257),
new google.maps.LatLng(33.182818, -97.287111)
];
console.log(routeCoordinates);
var routePath = new google.maps.Polyline({
path:routeCoordinates,
strokeColor:"#000000",
strokeOpacity:.90,
strokeWeight: 2,
editable:false
});
console.log(routePath);
routePath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas">
</div>
</body>
</html>
You map works for me if I remove the key and give the map div a size.
http://www.geocodezip.com/JohnSwaringenSO.html
Is this documented somewhere that I need to specify a callback in order for the google.maps module to be defined? Or is this a bug.
The following code doesn't load the google maps module:
<!DOCTYPE html>
<html>
<head>
<title>
Google Maps JavaScript API v3 Example: Asynchronous Map Simple
</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://maps.googleapis.com/maps/api/js?v=3.6&key=myKey&sensor=false' //adding 'callback=something' gets the maps module to load
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Edit -- response to answer
To do so, you can inject your own tag in response to a
window.onload event or a function call, but you need to additionally
instruct the Maps JavaScript API bootstrap to delay execution of your
application code until the Maps JavaScript API code is fully loaded.
You may do so using the callback parameter, which takes as an argument
the function to execute upon completing loading the API.
How does that imply that not having a callback will not load any of the api? It says that you can use the callback parameter to execute a function when the code if fully loaded but it doesn't say the code will never load without a callback parameter.
It is documented here: http://code.google.com/apis/maps/documentation/javascript/tutorial.html#asynch
Using Google Maps Javascript API V3, I have setup a map to pull data from a dynamically generated KML file. Here is the result:
http://theevolvement.org/MapRetailers.php
In my code (copied below), I specified the zoom to 12 in my map's options. When the page loads, it starts out at that assigned zoom, but within about one second the map zooms out (and shifts its assigned center) to fit all of the plotted points.
We want to load the map with a specified zoom, not include all the plotted data. So any advice anyone can give as to what I'm doing wrong would be greatly appreciated. Thank you all!
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var vegas = new google.maps.LatLng(36.1589862,-115.1723833);
var myOptions = {
zoom: 12,
center: vegas,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var ctaLayer = new google.maps.KmlLayer('http://theevolvement.org/MapRetailers.php?getKML=1&t=<?=mktime()?>');
ctaLayer.setMap(map);
}
</script>
</head><body onload="initialize()">
<div id="map_canvas"></div>
</body>
WOO! I finally figured out the solution!
The KmlLayer function required another parameter, {preserveViewport: true}
var ctaLayer = new google.maps.KmlLayer('<?=$kmlURL?>', {preserveViewport: true});