Adding KML Layer to Map with Points - google-fusion-tables

I currently have a Fusion Table Map that is synced to a Google Form through a script. It is for locations only in Oklahoma, so I am interested in adding a layer that will show the border of the state.
I made a KML Fusion Table with this information : https://www.google.com/fusiontables/embedviz?q=select+col2+from+1UUVOpuu7ymfkmuzyV9dO8PXwT2QoMFuRTCy8scvn&viz=MAP&h=false&lat=34.766328945783435&lng=-97.20538659179692&t=1&z=7&l=col2&y=2&tmplt=2&hml=KML
And I would like to add it to my map here:
https://www.google.com/fusiontables/embedviz?q=select+col3%3E%3E0+from+1EPhndJHBm0ghi06Xq9d8P62hUwCisAcQxYxgH5ax&viz=MAP&h=false&lat=36.393799473451324&lng=-94.17718371249998&t=1&z=6&l=col3%3E%3E0&y=2&tmplt=2&hml=ONE_COL_LAT_LNG
I did some research and found the example of Chicago's map from google, and tried to adapt it to my current map
kmllayer = new google.maps.FusionTablesLayer({
query:{
select: "geometry",
from: "1UUVOpuu7ymfkmuzyV9dO8PXwT2QoMFuRTCy8scvn",
});
So I added that to the HTML from my Fusion Table map and then tried to add the code to my website. When I do this, I only get a blank screen. Also, I tried to add the code to my site without the KML code above, and it still only comes up blank. Am I missing a step? Any suggestions would be appreciated.

There is a syntax-error in your code, it has to be
kmllayer = new google.maps.FusionTablesLayer({
query:{
select: "geometry",
from: "1UUVOpuu7ymfkmuzyV9dO8PXwT2QoMFuRTCy8scvn",
}});
Working example with both layers:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(35, -97),
zoom: 6
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
new google.maps.FusionTablesLayer({
query: {
select: "geometry",
from: "1UUVOpuu7ymfkmuzyV9dO8PXwT2QoMFuRTCy8scvn",
},
map: map,
options: {
styleId: 2
}
});
new google.maps.FusionTablesLayer({
query: {
select: "geometry",
from: "1EPhndJHBm0ghi06Xq9d8P62hUwCisAcQxYxgH5ax",
},
map: map,
options: {
styleId: 2,
templateId: 2
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>

Related

Snazzy Maps in Rails Application

I set up a nice map in my rails application. Everything is working fine but I cannot style the map with SnazzyMaps.
Here is my map.js file:
import GMaps from 'gmaps/gmaps.js';
const mapElement = document.getElementById('map');
if (mapElement) { // don't try to build a map if there's no div#map to inject in
const map = new GMaps({ el: '#map', lat: 0, lng: 0 });
const markers = JSON.parse(mapElement.dataset.markers);
const mapMarkers = map.addMarkers(markers);
mapMarkers.forEach((marker, index) => {
marker.addListener('click', () => {
// map.setCenter(markers[index]);
markers[index].infoWindow.open(map, marker);
})
});
if (markers.length === 0) {
map.setZoom(2);
} else if (markers.length === 1) {
map.setCenter(markers[0].lat, markers[0].lng);
map.setZoom(14);
} else {
map.fitLatLngBounds(markers);
}
}
import { autocomplete } from '../components/autocomplete';
// [...]
autocomplete();
On SnazzyMaps they give the following example. My question is, where shall I insert which part of this code in my own file. Been trying it for a while now but cannot make it work. Here is SnazzyMaps example:
<!DOCTYPE html>
<html>
<head>
<title>Snazzy Maps Super Simple Example</title>
<style type="text/css">
/* Set a size for our map container, the Google Map will take up 100% of this container */
#map {
width: 750px;
height: 500px;
}
</style>
<!--
You need to include this script tag on any page that has a Google Map.
The following script tag will work when opening this example locally on your computer.
But if you use this on a localhost server or a live website you will need to include an API key.
Sign up for one here (it's free for small usage):
https://developers.google.com/maps/documentation/javascript/tutorial#api_key
After you sign up, use the following script tag with YOUR_GOOGLE_API_KEY replaced with your actual key.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY"></script>
-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 11,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(40.6700, -73.9400), // New York
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: [{"featureType":"all","elementType":"geometry.fill","stylers":[{"weight":"2.00"}]},{"featureType":"all","elementType":"geometry.stroke","stylers":[{"color":"#9c9c9c"}]},{"featureType":"all","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#eeeeee"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#7b7b7b"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#c8d7d4"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#070707"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]}]
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');
// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.6700, -73.9400),
map: map,
title: 'Snazzy!'
});
}
</script>
</head>
<body>
<h1>Snazzy Maps Super Simple Example</h1>
<h2>WY</h2>
<!-- The element that will contain our Google Map. This is used in both the Javascript and CSS above. -->
<div id="map"></div>
</body>
</html>
To set the style using Gmaps library, you need to define the styles and then set it to the current map as below:
const map = new GMaps({ el: '#map', lat: 0, lng: 0 });
var styles = [
{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
}, {
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}, {
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map.addStyle({
styledMapName:"Styled Map",
styles: styles,
mapTypeId: "map_style"
});
map.setStyle("map_style");
Reference:
https://github.com/hpneo/gmaps/blob/master/examples/styled_maps.html

OpenLayers 3 popup with external geojson

Trying to get a popup working with my geojson data. Error states $(element).popover is not a function. I'm thinking it has something to do with not being able to read the features, even though they display properly.
Using the latest version of OpenLayers and jquery:
http://openlayers.org/en/v3.12.1/build/ol.js
https://code.jquery.com/jquery-1.11.2.min.js
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'http://services5.arcgis.com/GfwWNkhOj9bNBqoJ/ArcGIS/rest/services/nyad/FeatureServer/0/query?where=1=1&outFields=*&outSR=4326&f=geojson',
format: new ol.format.GeoJSON()
}),
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
}),
vectorLayer
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([-73.95, 40.7]),
zoom: 11
})
});
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false
});
map.addOverlay(popup);
// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
if (feature) {
popup.setPosition(evt.coordinate);
console.log(evt.coordinate);
$(element).popover({
'placement': 'top',
'html': true,
'content': feature.get('AssemDist')
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
You are add bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

google maps markerwithlabel not displaying in mvc

I'm not exactly sure on how to use this external library, it seems I need to make another request to get the markers to show up but I'm not sure of the best way to do it in mvc.
Error I am getting is: MarkerLabel_.getSharedCross is not a function
Points just contains an array of Lats/Lngs
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: points[0],
zoom: 10
});
for (var i = 0; i < points.length; i++) {
var marker = new MarkerWithLabel({
position: points[i],
draggable: true,
map: map,
labelContent: "$425K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75},
icon: "../Content/Images/map-icon.png"
});
marker.setMap(map);
}
}
<script src="https://maps.googleapis.com/maps/api/js?key=MyKey&callback=initMap"
async defer></script>
<script src="~/Scripts/Custom/marker-with-label.js"></script>

Google Fusion Map Info Window Not Formatted

I have created a Google Fusion Map with 2 layers. All appears to be working correctly with 1 exception.
I have formatted the Info Window of both layers using the Google Fusion Table tool. However, the Info Window on layer 1 is not appearing as specified with the code below. It works fine in the Google Fusion Table tool itself.
Can anyone spot what I've done wrong? Thanks.
<meta charset="UTF-8">
<title>Smithfield Foods UK</title>
<link rel="stylesheet" type="text/css" media="all" href="FusionMapTemplate.css" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var defaultZoom = 10;
var defaultCenter = new google.maps.LatLng(52.6500, 1.2800)
var locationColumn = 'geometry'
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: defaultCenter,
zoom: defaultZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
// Initialize the first layer
var FirstLayer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1hpGzmMBg8bDgPOGrAXvc0_QVLSBqQ0O5vpLbfUE'
},
map: map,
styleId: 3,
templateID: 5,
suppressInfoWindows: true
});
google.maps.event.addListener(FirstLayer, 'click', function(e) {windowControl(e, infoWindow, map);
});
// Initialize the second layer
var SecondLayer = new google.maps.FusionTablesLayer({
query: {
select: 'PostCode',
from: '1RrCcRC-1vU0bfHQJTQWqToR-vllSsz9iKnI5WEk'
},
map: map,
styleId: 2,
templateId: 2,
suppressInfoWindows: true
});
google.maps.event.addListener(SecondLayer, 'click', function(e) {windowControl(e, infoWindow, map);
});
}
// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {
infoWindow.setOptions({
content: e.infoWindowHtml,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
the issue:
templateID: 5,
//-------^
the D has to be lowercase

Trying to get 2 maps API: FusionTablesLayer Functions to work on the same map and fusion table

I have created a fusion table and layer that allows me to use check boxes to hide or display certain markers on the map. I would like to add a search feature that works like the pan and zoom feature. In addition, once the map zooms to the location I would like to have a radius option that identifies other locations within a certain area.
I have modified the sample code found on the IN Query (https://developers.google.com/fusiontables/docs/samples/in) and can get the checkboxes to work, but when I try to include the pan and zoom code (https://developers.google.com/fusiontables/docs/samples/search_and_zoom), I can't seem to get the search feature to work.
I have one fusion table with approximately 4000 records. I am a novice at coding so I am sure it is something in my syntax. I would also assume what I want to do is possible?
Any help would be appreciated.
Here is the code. As indicated I want to insert a search that utilizes pan and zoom feature. I ended up removing it from the code below because I was unsure how to insert or format it.
<head>
<style>
#map-canvas { width:800px; height:600px; }
</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() {
var tableId = '4422804';
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(50.792047064406866, -99.052734375),
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var layer = new google.maps.FusionTablesLayer();
filterMap(layer, tableId, map);
google.maps.event.addDomListener(document.getElementById('< 5'),
'click', function() {
filterMap(layer, tableId, map);
});
google.maps.event.addDomListener(document.getElementById('> 5'),
'click', function() {
filterMap(layer, tableId, map);
});
google.maps.event.addDomListener(document.getElementById('Not Signed'),
'click', function() {
filterMap(layer, tableId, map);
});
google.maps.event.addDomListener(document.getElementById('Signed Not Selling'),
'click', function() {
filterMap(layer, tableId, map);
});
}
// Filter the map based on checkbox selection.
function filterMap(layer, tableId, map) {
var where = generateWhere();
if (where) {
if (!layer.getMap()) {
layer.setMap(map);
}
layer.setOptions({
query: {
select: 'Full Address',
from: tableId,
where: where
}
});
} else {
layer.setMap(null);
}
}
// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
var filter = [];
var stores = document.getElementsByName('store');
for (var i = 0, store; store = stores[i]; i++) {
if (store.checked) {
var storeName = store.value.replace(/'/g, '\\\'');
filter.push("'" + storeName + "'");
}
}
var where = '';
if (filter.length) {
where = "'Map' IN (" + filter.join(',') + ')';
}
return where;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
You did not include your checkboxes, etc. But here's an example which works, using buttons, not checkboxes. Should not be too hard to adapt it your needs. No zoom to, which is really a different questions.
http://jsfiddle.net/ebridger/wmnDU/

Resources