Error when adding HTML to google site, Google Maps API - javascript

I used the Fusion TablesLayer Wizard to layer three separate fusion tables and put it on my google site HERE. I copied and pasted the HTML code from the wizard into an HTML box on my site. But in the HTML Properties window it gives me this error: 12+9 - 58: failed to load external url js?sensor=false- I also tested this html in W3 schools 'TryIt' and it works fine. How do I get it to work on the site?
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:900px; height:900px; }
.layer-wizard-search-label { font-family: sans-serif };
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
var layer_1;
var layer_2;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(39.34723863007487, -100.37501562500003),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: "col2",
from: "1qYb8PKCG3P7plw8aFVVpn44RgQI0CNaIuOFhs9RV"
},
map: map,
styleId: 2,
templateId: 3
});
layer_1 = new google.maps.FusionTablesLayer({
query: {
select: "col2",
from: "11PndImUQQPvqjGiNKx87MRrTe71sLHnkGxo9bacC"
},
map: map,
styleId: 2,
templateId: 3
});
layer_2 = new google.maps.FusionTablesLayer({
query: {
select: "col2",
from: "12bzY7A88cndb6bFS43jXSbYqt1AUPNbprYOGgJxj"
},
map: map,
styleId: 2,
templateId: 3
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

Do you need to include your API key? I've never really tried, but I don't think Google Maps lets you make anonymous calls. Here's the script from the documentation:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>

Related

Using function in a php code with javascript and openstreet map

I have a model (from another php class. I used a include sentence) with information in order to be shown on openstreet map as points. My code works fine but if I try to separate the code using a function, it doesnt work. My code, including the function is:
echo '
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
</head>
<body>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"> </script>
<div id="map" class="map"></div>
<script>
//I CREATE THE MAP
var attribution = new ol.control.Attribution({
collapsible: true
});
var map = new ol.Map({
controls: ol.control.defaults({attribution: false}).extend([attribution]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
maxZoom: 18
})
})
],
target: "map",
view: new ol.View({';
echo " center: ol.proj.fromLonLat([$longitud, $latitud]),
maxZoom: 18,
zoom: $zoom
})
});
";
// I READ THE MODEL GETTING LONGITUDE AND LATITUDE OF EACH POINT
$i;
if ($modeloDatos!=null) {
for($i=0;$i<sizeof($modeloDatos);$i++){
$modeloImprimir = $modeloDatos[$i];
$long=$modeloImprimir->getLongitud();
$lat=$modeloImprimir->getLatitud();
showCentro($long,$lat); //I CALL TH FUNCTION
}
}
echo "
</script>
</body>
</html>";
function showCentro($longi, $lati) { //I RECEIVE THE COORDNATES AND DRAW A FILLED POINT
echo "
map.addLayer(
new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([$longi,$lati]))})
]
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({ ";
echo'
color: "red"
})
})
})
});
);';
}
I would like to draw each point from the model separating the code and using a function in order to clarify the program.

Google MyMaps to Google Maps API

I am trying to recreate the following map, made using Google MyMaps, by using Google Maps API
Anyone know the best way to do this? Have the following code at the moment but doesn't look great
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Search for up to 200 places with Radar Search</title>
<style>
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var map;
var infoWindow;
var service;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 54.607868,
lng: -5.926437
},
zoom: 10,
styles: [{
stylers: [{
visibility: 'simplified'
}]
}, {
elementType: 'labels',
stylers: [{
visibility: 'off'
}]
}]
});
infoWindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
// The idle event is a debounced event, so we can query & listen without
// throwing too many requests at the server.
map.addListener('idle', performSearch);
}
function performSearch() {
var request = {
bounds: map.getBounds(),
keyword: 'best view'
};
service.radarSearch(request, callback);
}
function callback(results, status) {
if (status !== google.maps.places.PlacesServiceStatus.OK) {
console.error(status);
return;
}
for (var i = 0, result; result = results[i]; i++) {
addMarker(result);
}
}
function addMarker(place) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: {
url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png',
anchor: new google.maps.Point(10, 10),
scaledSize: new google.maps.Size(10, 17)
}
});
google.maps.event.addListener(marker, 'click', function() {
service.getDetails(place, function(result, status) {
if (status !== google.maps.places.PlacesServiceStatus.OK) {
console.error(status);
return;
}
infoWindow.setContent(result.name);
infoWindow.open(map, marker);
});
});
}
</script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIcOfMnc85XkuJmotWkLL4mthAHqlUuWA&callback=initMap&libraries=places,visualization" async defer></script>
</body>
</html>
use a saved google my maps and share it from your google drive

C# - FRENCH - VisualStudio WebBrowser with Google API DirectionsService.Route()

hello all I created a TestProject to use the Google MAP Direction.Route() on a WebBrowser in visual studio 2015... But i have one problem.. The 'route' dont work with my 'WebBrowser' on VisualStudio2015 but it's working in 'Google Chrome','Internet Explorer' and 'FireFox'.
I dont understand why.
The problem ( Left with 'WebBrowser' Right 'Google chrome, firefox, internet explorer' ) :
Picture : My problem :
The code HTML :
<!DOCTYPE html>
<html>
<head>
<style>
html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%;}
</style>
</head>
<body>
<div id="map"></div>
<!-- Test placement des points Panterga et chez moi -->
<script>
function PutPoints()
{
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var map = new google.maps.Map(document.getElementById('map'),
{
center: "Paris, fr",
zoom: 7
});
directionsDisplay.setMap(map);
directionsService.route(
{ origin: "Paris, fr", destination: "Marseille, fr", travelMode: 'DRIVING' },
function (reponse, result) { directionsDisplay.setDirections(reponse); }
);
}
</script>
<script async defer
src = 'https://maps.googleapis.com/maps/api/js?v=3.33&signed_in=true&language=fr&callback=PutPoints'>
</script>
</body>
</html>

Google Fusion Table Heatmap

I'm trying to create a Google Fusion table heatmap. I've copy and pasted the code from here and it works fine on localhost. I then change my API key and column name to loc and use my fusion table id AIzaSyAoiA3rVUoIRrsxje8JTWr599YqnHpHvCA but it just isn't rendering.
What am I missing? I'm guessing it's a setting my fusion table itself but I can't see any other configurable options. I've shared the table publically.
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'loc',
from: '1vtep10enWGFG1NBblFkycgjOiD6O-QKif3N3Ku9G'
},
heatmap: {
enabled: true
}
});
layer.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAoiA3rVUoIRrsxje8JTWr599YqnHpHvCA&callback=initMap">
My complete HTML code is
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Fusion Tables heatmaps</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.813215, lng: -0.407896},
zoom: 8
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'loc',
from: '1vtep10enWGFG1NBblFkycgjOiD6O-QKif3N3Ku9G'
},
heatmap: {
enabled: true
}
});
layer.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAoiA3rVUoIRrsxje8JTWr599YqnHpHvCA&callback=initMap">
</script>
</body>
</html>

Getting a "jvm.Map is not a constructor" for jvectormap

I'm trying to use jvectormap in a grails application and have been following the examples on the jvectormap website to get started. However, I cannot figure out why I'm getting the error that "jvm.Map is not a constructor". I included all the necessary .css and .js files, and the code is pretty much verbatim from jvectormap's website.
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<asset:stylesheet src="jquery-jvectormap-2.0.1.css"/>
<asset:javascript src="jquery-jvectormap-2.0.1.min.js"/>
<asset:javascript src="jquery-jvectormap-world-mill-en.js"/>
</head>
<body>
<div id="widthholder"><span></span></div>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script>
var gdpData = {
"AF": 16.63,
"AL": 11.58,
"DZ": 158.97
};
$(function(){
map = new jvm.Map({
map: 'world_mill_en',
container: $('#world-map'),
series: {
regions: [{
values: gdpData,
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
},
onRegionTipShow: function(e, el, code){
el.html(el.html()+' (GDP - '+gdpData[code]+')');
}
});
});
</script>
</body>
</html>
Answer is here
http://jvectormap.com/tutorials/data-visualization/
var mapObject = $('.map').vectorMap('get', 'mapObject');

Categories