The vanilla code you get when creating a map from a Fusion Table looks like document below. Can a sidebar be created from within that also or do I need to dump the javascript and start from scratch?
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:500px; height:300px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(33.79274320730208, -118.12398762656244),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "col4",
from: "1bjD4dXHwKM8AYfEFFDQk8Q2RID18EAJi5pSl0wY"
},
map: map,
styleId: 2,
templateId: 2
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
A sidebar can be added to that code, but it needs to query the table to populate the sidebar. A couple of examples are below. You might also be able to make it work by triggering a click event on the FusionTablesLayer.
Example
Example
Related
Map not appearing on page. I am attempting to place a map on the page and then add some markers and eventually a sort of instagram mashup. However, the map is not displaying and I cannot figure out why. I have tried numerous things, to no avail. HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGrN5DdMYr-o1FGaF2bLF4Ub2VZqIrguA"></script>
<script type="text/javascript" src='application.js'></script>
</head>
<body>
<div id="map-canvas" style="height:500px; width:500px;">
</div>
</body>
</html>
JavaScript is:
jQuery(document).ready(function(){
var markers = new Array();
function initialize(){
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(38.9047, 77.0164),
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas') , mapOptions);
}
});
The map is not displaying. I am not getting any error.
You are not calling your function. You need to call it by adding initialize(); somewhere after the function. Personally, I would move the function to outside the .ready() and only put the call to it there, like this:
var markers = new Array();
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(38.9047, 77.0164),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
jQuery(document).ready(function() {
initialize(); // call the function on page load
});
See http://jsfiddle.net/DelightedDoD/yvrr704t/1/
I'm trying to create a map and load .kmz file using the following code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8">
<style type ="text/css"> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px}</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=mykey"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(58.33, -98.52),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var kmzLayer = new google.maps.KmlLayer('link_to_kmz_file');
kmzLayer.setMap(map);
}
</script>
</head
<body>
<div id="map_canvas"> </div>
</body
</html>
The problem comes up when nothing is loaded and I have no idea why it happens. I should mention my API_KEY is valid, since I use it for creating another maps that does not require .kmz file loading, and I also do not store the .kmz file on localhost but on my own server.
I'd appreciate it if anyone could point me to the solution.
Thanks in advance.
In your HTML, you are using:
<div id="map_canvas"></div>
and in your CSS:
#map-canvas {
...
}
Issue: map-canvas ≠ map_canvas
Since the map needs a height to be displayed, your map won't show until you correct your CSS like hereafter:
#map_canvas {
...
}
+ You need to correct your closing </head> and </body> tags.
+ You need to call the initialize() function.
Add this to your javascript:
google.maps.event.addDomListener(window, 'load', initialize);
you aren't calling initialize() anywhere, just declaring it. Add it to the body onload if you want to call it when body loaded.
<body onload="initialize()">
also your closing body tag is incomplete
</body>
and your closing head tag
</head>
add after your function like this
`<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(58.33, -98.52),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var kmzLayer = new google.maps.KmlLayer('link_to_kmz_file');
kmzLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>`
Try this
google.maps.event.addDomListener(window, 'load', initialize);
does anyone know how to always display single label for a city i.e. disable city's local name if there is equivalent in language that was selected during Google Maps API initialization (e.g. &language=en)?
So to be more specific, not to have double names (English and local names displayed together on the map) as it happens for Ukraine, China, Japan now, when language=en is selected for Google Maps API?
Thank you in advance for any tips!
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<style>
html, body, #map-canvas {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.16&language=en"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(45.6, 29.5)
};
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>
code snippet:
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(45.6, 29.5)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.16&language=en"></script>
<div id="map-canvas"></div>
I have some working code to display a KML layer on Google maps. When you click on the various parts of the layer their respective name pops up in an info window.
<!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"
// Load Google Maps API
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(51.875696, -0.624207);
var mapOptions = {
zoom: 6,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var kmlLayer = new google.maps.KmlLayer({
url: 'http://XXXXXXX.org/gliding/grid3.kml',
suppressInfoWindows: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.name;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:100%; height:100%; float:left"></div>
</body>
</html>
I would like the info window to also contain a link to a page with the same name as object clicked on. For example if the user clicks on a shape in the KML layer called Tom the info window says Tom Click Here. If the user clicks the link they are taken to www.XYZ.com/Tom.
I'm sure this is quite simple, but I'm new to javascript and can't get it to work.
This is more a hack than a solution (which means google could change a property name and this would stop working.
However, here you go
google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.name;
kmlEvent.featureData.infoWindowHtml += 'Click Here';
showInContentWindow(text);
});
How do I put the place mark on google maps?
The code below shows only particular location but I want to add my custom place mark image on google maps.
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=MyKey&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(23.0300,72.5800),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Here is an example Google Maps Marker:
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(31.1287, -94.9594117), // Example Lat/Long
map: map, // references the map object you defined earlier
title: 'My custom Title', // a title that will appear on hover
icon: 'images/googleMap/icon-star.gif' // Optional Marker Icon to use
});
You can find out more in the Google Map Docs at Google Maps: Simple Markers
Best of luck! :)
Try this:
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=MyKey&sensor=false">
</script>
<script>
function initialize()
{
var mapPin = "/path/to/image.png";
var Marker = new google.maps.Marker({
position: new google.maps.LatLng(23.0300,72.5800),
map: map,
icon: mapPin
});
var mapProp = {
center:new google.maps.LatLng(23.0300,72.5800),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>