this is my first post here so I apologize if I make a newbie faux pas.
I've got a Google Fusion Table layer that I have on top of a map. I created it by importing a KML file. Everything works great, but last week I realized that the InfoWindow is now displaying all of the vertices of the relevant polygon in the geometry field.
The strange thing is that these vertices do not display in the actual Fusion Table but only on the layer on top of the map. I suspect something might be going on with the JavaScript code, which I am very new to, or perhaps the new API for the Fusion Tables.
I removed the body section to get around some formatting issues on this page, but here is the code:
<!DOCTYPE html>
<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>Georgia Areas</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; weight: 100% }
#search-panel {
position: absolute;
` top: 10px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#address {
width: 345px;
}
#instruction {
position: fixed;
float: right;
bottom: 10px;
right: 20px;
width: 375px;
z-index: 4;
background-color: #fff;
padding: 7px;
border: 1px solid #999;
font-family:"Arial";
}
p.small {font-size: small}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyARy6zbLmjvq3uaPjI--s45afA0LA-ynnA&sensor=false">
</script>
<script type="text/javascript">
var infoWindow = new google.maps.InfoWindow();
var input = document.getElementById('address');
var geocoder;
var gaCentroid;
var gaBounds;
var myMap;
function myclick(num) {
google.maps.event.trigger(markers[num], "click");
}
function initialize() {
geocoder = new google.maps.Geocoder();
gaCentroid = new google.maps.LatLng(32.900000, -83.22671);
gaBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(30.34,-85.652),
new google.maps.LatLng(35.01,-80.85)
);
var mapOptions = {
center: gaCentroid,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
myMap = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var lyr = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1Bgo94POIxKwQOOltuFbaAW6CpjQqPvYLVSqXuLk'
},
styles: [{
polygonOptions: {
fillColor: '0xDEEBF7',
fillOpacity: 0.1
}
}]
});
lyr.setMap(myMap);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode({'address':address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myMap.setCenter(results[0].geometry.location);
myMap.fitBounds(results[0].geometry.viewport)
var marker = new google.maps.Marker({
map: myMap,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function reCenter() {
var currentCenter = myMap.getCenter();
google.maps.event.trigger(myMap, 'resize');
myMap.setCenter(currentCenter);
}
</script>
</head>
</html>
Can anyone shed some light on this?
Thanks,
Ryan
You can configure the content shown in the infowindow.
See this page in the Fusion Tables Help
You must define the templateId to have the same content for the infoWindow.
Add this to the options passed to the layer:
templateId:2
I ended up changing the code to reference another Fusion Tables Layer. All I changed was the ID. This seems to work with the new layer, but I still do not know what happened to display the geometry in the InfoWindow.
If it happens again, I will most likley attempt Dr.Molle's suggestion.
Related
There I have had this error when using Geocode I know there is a lot of the same question but I wasn't able to understand it so if you guys have a solution please give me your version of my code with your code inside of it
here is my code
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#latlng {
width: 225px;
}
</style>
</head>
<body>
<div id="floating-panel">
<input id="latlng" type="text" value="40.714224,-73.961452">
<input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 40.731, lng: -73.997}
});
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
document.getElementById('submit').addEventListener('click', function() {
geocodeLatLng(geocoder, map, infowindow);
});
}
function geocodeLatLng(geocoder, map, infowindow) {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY" async defer></script>
Thank you I hope someone could help been having this problem alot
This error indicates on a missing Google Maps API key.
https://developers.google.com/maps/documentation/javascript/get-api-key
Click the button below, to get an API key using the Google Cloud Platform Console. You will be asked to (1) pick one or more products, (2) select or create a project, and (3) set up a billing account. Once your API key is created you will be prompted to restrict the key's usage. For more information, see Restricting an API key.
(Button is present in the link)
When loading the Maps JavaScript API, substitute YOUR_API_KEY in the
code below with the API key you got from the previous step.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" type="text/javascript"></script>
If you follow the steps beyond the link, that should fix the error you're getting.
I'm working on a map with mapbox, also it has a list of locations per countries, states and cities, and when I am clicking one of them, their location should be shown.
So I´m adding the geocoder L.mapbox.geocoder of mapbox but the coordinates of some places are not precise enough e.g. US or France.
How can I solve this?
I also thought to use google's geocoding service Google Geocoder.
How could I do this ?
Example code
I hope you can help me.
If you are going to use mapbox, there is no guarantee for accurate data over the whole world, because mapbox streets is based on a volunteered database called OpenStreetMap: "Data for Mapbox Streets comes primarily from OpenStreetMap, with Natural Earth and our own tweaks used for some parts" [source]. So if you have to be more accurate the google Geocoder should be the API of your choice. The pricing depends on the requests per day.
Here is an google Geocoding example:
<!DOCTYPE html>
<html>
<head>
<title>Geocoding service</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<input id="address" type="textbox" value="Sydney, NSW">
<input id="submit" type="button" value="Geocode">
</div>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
var geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
I'm trying to get each marker to direct to the url when clicked. Markers are dropped sequentially on the map and immediately settle after a brief bouncing animation. However, clicking each marker returns "webpage not found"? I don't see why this is the case since each url was saved in the mapUrl array variable. If an explict url is used, it works i.e
window.location.href = 'www.amazon.com';
But I have multiple markers, so I need the script to read the urls stored in the mapUrl array. This was suggested:
google.maps.event.addListener(marker, 'click', function () {
document.getElementById('goToLocation').innerHTML = 'Will send you to ' + this.url;
});
But the syntax after the equal sign doesn't work i.e. the this.url part.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with <code>setTimeout()</code>
</title>
<style>
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<div id="panel">
<button id="drop" onclick="drop()">Drop Markers</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
</head>
<body onload="initialize()" ;>
<div id="map-canvas"></div>
<script>
var sacramento = new google.maps.LatLng(38.576725, -121.493715);
var neighborhoods = [
new google.maps.LatLng(38.576725, -121.493715),
new google.maps.LatLng(35.011263, -115.473376),
new google.maps.LatLng(33.941820, -118.408466)
];
var markers = [];
var map;
var mapUrl = [
'http://www.google.com',
'http://www.youtube.com',
'http://maps.amazon.com'
];
function initialize() {
var mapOptions = {
zoom: 5,
center: sacramento
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
drop();
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
addMarker(i);
}
}
function addMarker(iterator) {
var marker = new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
url: mapUrl[iterator],
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function () {
window.location.href = markers.mapUrl;
});
google.maps.event.addListener(marker, 'click', toggleBounce);
markers.push(marker);
}
function toggleBounce() {
if (markers.getAnimation() != null) {
markers.setAnimation(null);
} else {
markers.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
</body>
</html>
Your code is a bit confusing, but I think you were pretty close to what you were trying to do.
google.maps.event.addListener(marker, 'click', function () {
window.location.href = markers.mapUrl;;
});
Should be:
google.maps.event.addListener(marker, 'click', function () {
window.location.href = this.url;
});
And since clicking on a marker is redirecting the page, the second click handler that calls toggleBounce is not used/needed. Here's a cleaned up and working version based on what it seemed you're trying to do. Also moved that div from the head to the body and removed the extra import of the maps API.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with 'setTimeout()'
</title>
<style>
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
</head>
<body onload="initialize()" ;>
<div id="map-canvas"></div>
<div id="panel">
<button id="drop" onclick="drop()">Drop Markers</button>
</div>
<script>
var sacramento = new google.maps.LatLng(38.576725, -121.493715);
var neighborhoods = [
new google.maps.LatLng(38.576725, -121.493715),
new google.maps.LatLng(35.011263, -115.473376),
new google.maps.LatLng(33.941820, -118.408466)
];
var markers = [];
var map;
var mapUrl = [
'http://www.google.com',
'http://www.youtube.com',
'http://maps.amazon.com'
];
function initialize() {
var mapOptions = {
zoom: 5,
center: sacramento
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
drop();
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
addMarker(i);
}
}
function addMarker(iterator) {
var marker = new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
url: mapUrl[iterator],
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function () {
window.location.href = this.url;
});
markers.push(marker);
}
</script>
</body>
</html>
I have everything working on this Google map V3 on how I would like it except for one last thing. Right now, If you load up the map, the map is able to search for a place and drag an icon from outside the map into the Google map. However, once the icon is inside the map, I am not able to drag it. I've search endlessly on where I went wrong on my code.
Below are a few examples of many that I read on:
Link1,
Link2, Link3, Link4 (Link 4 is what i need but could not connect the code after further inspection)
I feel I am very close but I believe I am just not declaring the right variables or not connecting them right. Below is the code and here is a FIddle that can give you a picture of my problem. (Try dragging the icon once and then dragging it again inside the map)
<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html {
height: 100%;
}
body {
height: 97%;
}
#map-canvas {
width: 70%;
height: 100%;
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -30%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#shelf {
position: absolute;
margin-right: 5px;
top: 25px;
left: 70%;
height: 98%;
width: 30%;
float: right;
}
#draggable {z-index:1000000000;}
#draggable2 {z-index:1000000000;}
#draggable3 {z-index:1000000000;}
.ecostation {
margin-left: auto;
margin-right: auto;
border: 1.0px solid #F0F0F0;
border-radius: 5.0px 5.0px 5.0px 5.0px;
width: 85%;
text-align: center;
}
#wrapper {
display: table-row;
border: 1.0px solid rgb(204,204,204);
border-radius: 5.0px 5.0px 5.0px 5.0px;
}
#wrapper div {
display: table-cell;
border-radius: 10.0px 10.0px 10.0px 10.0px;
width: 12.5%;
}
#wrapper div img {
display: block;
padding: 5.0px;
margin: 5.0px auto;
text-align: center;
}
#wrapper div h5, #wrapper div p {
text-align: center;
font-size: 11px;
margin-top: -10px;
font-weight: 800;
}
.title {
margin-left: 7%;
color: #F0F0F0;
font-weight: 600;
}
#target {
width: 345px;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
$("#draggable2").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
});
</script>
<script>
// This example adds a search box to a map, using the
// Google Places autocomplete feature. People can enter geographical searches.
// The search box will return a pick list containing
// a mix of places and predicted search terms.
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each plce, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// [END region_getplaces]
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>
<div id='shelf'>
<div class="ecostation">
<div id="wrapper">
<div>
<img src="https://cdn1.iconfinder.com/data/icons/mobile-development-icons/30/Map_marker.png" id="draggable" title="Estation Trash/Compost" alt="Estation Trash and Compost"/>
<p>Trash/Compost</p>
</div>
<div>
<img src="https://cdn1.iconfinder.com/data/icons/large-tab-bar-icons/30/Start_flag.png" id="draggable2" title="Estation Trash" alt="Estation Trash"/>
<p>Trash</p>
</div>
<div>
<img src="http://i1288.photobucket.com/albums/b489/Wallace_Adams/bth_facebook-icon-30x30_zpsb49e1af3.jpg" id="draggable3" title="Estation Recycling" alt="Estation Recycling"/>
<p>Recycle</p>
</div>
</div>
</div>
</div>
</html>
end of code
If you guys can let me know that would be great! Also, i noticed that marker is declared twice. Is that one of the problems? I tried declaring something else but had no luck.
I also came accross this code but not sure if it is helpful in this situation
var overlay;
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
Possibly thinking it has to do something with this piece of code below?
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
But then again, couldn't figure what was wrong with, am I connecting the variables correctly?
Help would be greatly appreciated, I am very close to finishing what I want to accomplish on this map
Check to make sure you are not using svg images for the icon. They seem to work on FireFox and Chrome, but not IE
I'm in a spot of bother and my hairline is on the chopping block. When I integrated the maps API on this site, ritaknoetze.com, everything worked perfectly.
However, copying that exact code for a different demo website, scarabpaper, the map doesn't show up at all? Could someone show me the ropes on what I'm doing wrong?
Here's the code I got from Google itself that I modified for my WordPress theme/installation:
JavaScript:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-34.009839, 22.78101);
var myOptions = {
zoom: 9,
center: myLatlng,
navigationControl: true,
mapTypeControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = '<?php bloginfo('template_url')?>/assets/googlemaps_marker.png';
var myLatLng = new google.maps.LatLng(-34.009839, 22.78101);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
</script>
My HTML where the javascript goes:
<div class="contact_container">
<div id="map_canvas"></div>
<div class="clearfloat"></div>
</div>
My CSS for the affected divs
#map_canvas {
width: 880px;
height: 300px;
margin-left: 10px;
margin-bottom: 30px;
margin-top: 10px;
float: left;
border: 1px solid #dedcdc;}
.contact_container { /*container for ALL the contact info*/
background-color: #fff;
border: 1px solid #dedcdc;
width: 900px;
margin-top: 30px;
padding: 20px;
padding-bottom: 0;}
Any Help would be greatly appreciated...
You're never calling the initialize() method. It works if you call that method, even using a console.