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.
Related
I want to put a loading icon before finding or I need catch find location start/end function (like ajax before/success function)
I could not find any resources related to this .I want to do; When you click on the "Find current location" button, you will see a small icon. Hide the icon when the process is finished
I use javascript without jquery
using Geocoding service code, I added <div id="loader"></div> inside <div id="floating-panel"></div>.In this I have added image tag when geocodeAddress(geocoder, resultsMap) is called. You can change with desired icon
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) {
document.getElementById('loader').innerHTML = "<img src='https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif'>"
var address = document.getElementById('address').value;
geocoder.geocode({
'address': address
}, function(results, status) {
if (status === 'OK') {
document.getElementById('loader').innerHTML = ""
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
document.getElementById('loader').innerHTML = ""
alert('Geocode was not successful for the following reason: ' + status);
}
});
/*google.maps.event.addListenerOnce(map, 'idle', function(){
alert()
});*/
}
/* 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;
}
<div id="floating-panel">
<input id="address" type="textbox" value="Sydney, NSW">
<input id="submit" type="button" value="Geocode">
<div id="loader">
</div>
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
I'm using the Google Place ID as a way to link locations and other content in my database. So Basically I've created an admin page that allows me to set up a way to easily enter new locations and it's content.
On my admin page I've added a map using Place ID finder from Google so I can search for a place and in the InfoWindow highlight to copy the Place ID information, and then paste this information. For some reason the infowindow does not allow the highlight.
I thought it might be because the additional code from my admin page but when I viewed the demo on Google developer documentation the demo also does not allow highlighting. If on the demo or my admin page I can click on another place on the map, a new InfoWindow pops up and that information is highlightable.
Can someone help using the code from documentation on Google Site (below), recode to allow the searched information window to be highlightable?
<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;
}
.controls {
background-color: #fff;
border-radius: 2px;
border: 1px solid transparent;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
height: 29px;
margin-left: 17px;
margin-top: 10px;
outline: none;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
.controls:focus {
border-color: #4d90fe;
}
.title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span><br>
Place ID <span id="place-id"></span><br>
<span id="place-address"></span>
</div>
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
// Set the position of the marker using the place ID and location.
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location
});
marker.setVisible(true);
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-id'].textContent = place.place_id;
infowindowContent.children['place-address'].textContent =
place.formatted_address;
infowindow.open(map, marker);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
async defer></script>
</body>
</html>
Link to the example in the documentation (which demonstrates the issue): Place ID Finder - Google Maps Javascript API
The infowindow-content has the CSS user-select: none; set (so the user can't select the text). You can override that with:
#infowindow-content {
user-select: text !important;
-webkit-user-select: text !important; /* for safari per Avrahm Kleinholz */
}
proof of concept fiddle
related issue in the issue tracker: Issue 11331: text inside InfoWindow cannot be selected
code snippet:
// This sample uses the Place Autocomplete widget to allow the user to search
// for and select a place. The sample then displays an info window containing
// the place ID and other information about the place that the user has
// selected.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
// Set the position of the marker using the place ID and location.
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location
});
marker.setVisible(true);
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-id'].textContent = place.place_id;
infowindowContent.children['place-address'].textContent =
place.formatted_address;
infowindow.open(map, marker);
});
}
/* 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;
}
.controls {
background-color: #fff;
border-radius: 2px;
border: 1px solid transparent;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
height: 29px;
margin-left: 17px;
margin-top: 10px;
outline: none;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
.controls:focus {
border-color: #4d90fe;
}
.title {
font-weight: bold;
}
#infowindow-content {
user-select: text !important
}
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span>
<br>Place ID <span id="place-id"></span>
<br>
<span id="place-address"></span>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>
To answer my own question with the help of geocodezip, I Googled user-select and found that for Safari they require -webkit-user-select: text; as user-select doesn't work with the Apple browser. So my code reads and it works perfectly!
#infowindow-content {
user-select: text !important;
-webkit-user-select: text !important;
}
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 have been trying to get my head around this issue for hours now - no result so far, so I am turning to you now.
I have embedded a google map in my website. Then I gave the div a border-radius of 100% in order to make the map appear circular. So far, so good.
But when I wanted to make the circle scalable/responsive, I tried to use the old padding-bottom css-hack which I found ages ago here on stack overflow. Thanks to this trick, the circular map scales perfectly well now.
However, this also seems to set the map off center and I cannot figure out why or come to a fix. I am really looking forward to any solution here ...
Best regards,
Jan
I have a fiddle demonstrating the issue here (With complete HTML/JS/CSS) CSS below:
.cms-map-wrapper.circular {
width: 50%;
margin: auto;
background-color:red;
}
.cms-map {
border: solid 5px blue;
border-radius: 100%;
padding-bottom: 100%;
margin-bottom: 20px;
}
It is a timing problem. One option to fix it is to delay, then trigger the resize event and reset the center of the map.
setTimeout(function () {
google.maps.event.trigger(map, 'resize');
map.setCenter(position);
}, 100);
proof of concept fiddle
working code snippet:
function showMapWithAddress(mapElementId, address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
position = results[0].geometry.location;
var mapProp = {
center: position,
zoom: 14
};
var map = new google.maps.Map(document.getElementById(mapElementId), mapProp);
google.maps.event.addDomListener(window, 'resize', function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(position);
});
var marker = new google.maps.Marker({
position: position,
title: address,
flat: true,
clickable: false
});
marker.setMap(map);
setTimeout(function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(position);
}, 100);
} else {
console.log('Geocode was not successful for the following reason: ' + status);
}
});
}
showMapWithAddress('googleMap', 'Josef-Bautz-Strasse 14, 63457 Hanau, Germany');
.cms-map-wrapper.circular {
width: 50%;
margin: auto;
background-color: red;
}
.cms-map {
border: solid 5px blue;
border-radius: 100%;
padding-bottom: 100%;
margin-bottom: 20px;
}
<script src="http://maps.googleapis.com/maps/api/js"></script>
<div class="cms-map-wrapper circular">
<div id="googleMap" class="cms-map"></div>
</div>
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.