I have a Google Sites page with a Google map showing locations of speed traps in Israel.
It is showing the locations from a Google Fusion Tables table, displaying locations on the map by dividing values of the 'type' column into buckets.
See the map gadget XML below.
Lately, I added several new rows with a new type (7). I see that the points for these new locations are not shown in the map gadget on my Google Sites page. However, in the fusion table page, I can see these locations just fine.
Any idea why this can happen?
Thanks,
Yaron
The map gadget XML:
(removed unused function for clarity)
<Module>
<ModulePrefs
description="Israel Speed Traps"
width="500"
height="600">
</ModulePrefs>
<Content type="html"><![CDATA[
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas { width: 100%; height: 100%; }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=iw"></script>
<script type="text/javascript">
var map;
var layer;
var tableid = 2943387;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(32.407792,35.502319),
zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID
});
layer = new google.maps.FusionTablesLayer(tableid);
layer.setQuery("SELECT 'Location' FROM " + tableid);
layer.setMap(map);
}
</script>
</head>
<body onload="initialize();">
<div id="map_canvas"></div>
</body>
</html>
]]></Content>
</Module>
Your code uses a wrong tableId.
The ID of the table you are talking about is 1uMTPGcFuJsNxKcCLkSxAOIMJCrlzNIV46MUTlD4,
but your code points to a different table with the ID 1OZ8ty7BP3di6WVEwtM-CTJhoQaNlIpZowsSHkHPR which doesn't contain the rows with type:7
Furthermore, when you want to apply the same appereance in the gadget you also must define templateId(for infowindows) and styleId(for feature-styles)
fixed script:
<script type="text/javascript">
var map,
layer,
tableid = '1uMTPGcFuJsNxKcCLkSxAOIMJCrlzNIV46MUTlD4';
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(32.407792,35.502319),
zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID
});
layer = new google.maps.FusionTablesLayer(tableid,{
options: {
styleId: 3,
templateId:3
}});
layer.setQuery("SELECT 'Location' FROM " + tableid);
layer.setMap(map);
}
</script>
Related
I have a google map with a new key
but it gets error in console
error:
Uncaught TypeError: window.Map is not a constructor
at Zr (map.js:2)
at ds.release (map.js:53)
at gs (map.js:5)
at _.rl.Ab (map.js:59)
at map.js:46
HTML
<head>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=mykey">
</script>
</head>
<body onload="init()">
<div id="map_canvas"></div>
</body>
<script src="js/index.js"></script>
index.js
Map = null;
function init() {
var mapOptions = {***};
Map = new google.maps.Map( document.getElementById( "map_canvas" ), mapOptions );
}
Thanks for your time!
Map is reserved word in EcmaScript, so you shouldn't use it as a variable name: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
The problem is this line (jsfiddle thinks Map is read only):
Map = null;
Rename your map variable to something else (like map, with a lower case "m").
proof of concept fiddle
code snippet:
map = null;
function init() {
var mapOptions = {
center: {
lat: 0,
lng: 0
},
zoom: 1
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
google.maps.event.addDomListener(window, "load", init);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
This is a problem with the weekly version of maps this week. I changed:
...//maps.googleapis.com/maps/api/js?key....
to
...//maps.googleapis.com/maps/api/js?v=3.34&key...
the first path server the weekly version of maps which is default.
I chose it to set the version to 3.34 which worked fine. I could have chosen a quarterly version which would update automatically to the version of the current quarter(it would automatically update next quarter) by inserting v=quarterly. Either way the 3.34 fixed my issues.
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 have a component called foo
I have foo.html in apps/foo/components/content/foo/foo.html
currently this file contains the following.
<div data-sly-use.ev="Foo"
class="${ev.cssClass || ''}"
title="${ev.title || ''}"
data-emptytext="Foo Asset">
${ev.html # context='unsafe'}</div>
I have Foo.java in apps/foo/components/content/foo/Foo.java
that has getCssClass(), getTitle(), getHtml() needed by foo.html.
The above works fine
Question
When the user adds this component to the page, I want it to include a google map in the page. The lat/long to the google map will be provided by Foo.java#getLat() and Foo.java#getLong()
How can I do this?
I have the google map working in an HTML outside of AEM and the code is pretty simple:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, 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 id="map-canvas"></div>
</body>
</html>
the lat/long values for myLatlng variable in the above javascript will need to come from Foo.java.
If you want to pass parameters to a script you can do as they generally do in Coral UI via data-xxx attributes in the Sightly script.
Set the property from your Foo into a data attribute in some DIV you will later fetch in JS.
Get the div in JS via its ID and obtain the data attributes you are interested in.
Example:
Sightly
<div id="map_canvas" data-lat="${ev.lat}" data-long="${ev.long}">
</div>
Javascript
this.mapCanvas = document.getElementsByClassName("map_canvas")[0];
var lat = $mapCanvas.data("lat");
var long = $mapCanvas.data("long");
var myLatlng = new google.maps.LatLng(lat,long);
I hope this helps! :)
I followed the instructions from https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
When I run it at Netbeans 8.0.2, only the gray div showed up, no map was shown.
This is my code:
<html>
<head>
<title>Practicing Google Maps</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="https://maps.googleapis.com/maps/api/js">
function initialize() {
// The Map object constructor takes two arguments:
/*
* A reference to the div that the map will be loaded into. We use
* the JavaScript getElementById function to obtain this:
*/
var mapCanvas = document.getElementById('map-canvas');
/*
* Options for the map, such as the center, zoom level, and the map type.
* There are many more options that can be set, but these three are required:
*/
var mapOptions = {
center: new.google.maps.LatLng(44.5403. -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(mapCanvas);
}
/*
* Add an event listener to the window object that will call the initialize function
* once the page has loaded. Calling initialize before the page has finished loading
* will cause problems, since the div it's looking for may not have been created
* yet; this function waits until the HTML elements on the page have been created
* before calling initialize.
*/
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas">
</div>
</body>
</html>
What did I miss? I even comment Google's instructions so I will not miss a thing but still, Google Map didn't show up.
Thank you.
You appear to be missing the closing </script> after loading the Google maps library. And then an opening <script> tag for your code. You also have a few typos, corrected below:
center: new google.maps.LatLng(44.5403, -78.5463),
You've also left out mapOptions when initializing the map:
var map = new google.maps.Map(mapCanvas, mapOptions);
And finally, your div should have some dimensions.
Working code below:
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.SATELLITE
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div style="height:200px; width:200px" id="map-canvas">
Try adding a dimension to your map-canvas div. This usually works.
<div id="map-canvas" style="width:100%; height:100%;"></div>
I have already pointed my office location in google map.
Also I created API key.
Now i using embeded code to show google map location in my contact page.
I want to replace the same with AP key.
How to show my office location using Google Maps JavaScript API v3.
Following is my test.html page for checking the map. Which parts need to modify to show my location ?
You can see my location in below url
google(dot)com/maps?ll=9.965156,76.290034&z=14&t=m&hl=en-US&gl=US&mapclient=embed&cid=9383043750302267720
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=my key already added here">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -9.959238, lng: 76.275271},
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"></div>
</body>
</html>
Sounds like you want to add a marker
Code below is for your initialize function based on the docs but w/ your Lat,Lon and zoom level.
var myLatlng = new google.maps.LatLng(9.965156,76.290034);
var mapOptions = {
zoom: 8,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World"
});
The marker's title (i.e. "Hello World" in the example above) will appear as a tooltip. If you don't want a tooltip, you can remove that line.