I've worked my way through the following Google Maps example. There's a large notice saying the following
Note: The signed-in feature is deprecated. Versions 3.27 and earlier of the Maps JavaScript API continue to support signed-in maps, but a future version will no longer support signed-in maps. Please watch the release notes for updates. (You can subscribe to the release notes.) Future versions of the Maps JavaScript API will continue to support features that save a place to Google Maps using an info window or the SaveWidget.
I've tried using the SaveWidget and Info Window but it doesn't show any controls that allow you to Save A Place. It only has a "View On Google Maps" link which takes you to Google Maps. Is there a way to add a place to your saved places via a button without redirecting to Google Maps?? I think their definition of Save A Place is misleading...
Within the code example it also states this
//When you add a marker using a Place instead of a location, the Maps
//API will automatically add a 'Save to Google Maps' link to any info
//window associated with that marker.
Here is the code that shows the "View On Google Maps" link.
<!DOCTYPE html>
<html>
<head>
<title>Save a Place</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<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;
}
</style>
<script>
// When you add a marker using a Place instead of a location, the Maps
// API will automatically add a 'Save to Google Maps' link to any info
// window associated with that marker.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: -33.8666, lng: 151.1958}
});
var marker = new google.maps.Marker({
map: map,
// Define the place with a location, and a query string.
place: {
location: {lat: -33.8666, lng: 151.1958},
query: 'Google, Sydney, Australia'
},
// Attributions help users find your site again.
attribution: {
source: 'Google Maps JavaScript API',
webUrl: 'https://developers.google.com/maps/'
}
});
// Construct a new InfoWindow.
var infoWindow = new google.maps.InfoWindow({
content: 'Google Sydney'
});
// Opens the InfoWindow when marker is clicked.
marker.addListener('click', function() {
infoWindow.open(map, marker);
});
}
</script>
</head>
<body>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3.27&key=YOUR_API_KEY&signed_in=true&callback=initMap">
</script>
</body>
</html>
Related
I am very new to Google MAPs API. I am trying to create a map for my business with that replicates the below picture. I have the code below as well where I have the lat and long coordinates, and a marker initiated based on those cordinates. How can i show something similar like this with javascript, where on page load
A label as below shows the name of the business and address, with also a clickable link (an arrow for directions, not shown in picture)
Custom html showing business name next to marker on maps
?
<div id="map"></div>
<script>
function initMap() {
// The location of UluruBBS
var uluru = { lat: 33.931, lng: -84.337732 };
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), { zoom: 15, center: uluru });
// The marker, positioned at Uluru
var marker = new google.maps.Marker({ position: uluru, map: map });
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[mykey]&callback=initMap">
</script>
Found another alternative via google maps api docs - by using Google Maps Embedded API. Please refer to the doc for more information.
This question already has answers here:
Google Maps API V3 error: RefererDeniedMapError
(2 answers)
Closed 4 years ago.
My google map JavaScript API does not work any more. it seems google blocked me. look at this link. in console i get below error:
Google Maps JavaScript API error: RefererDeniedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#referer-denied-map-error
_.Ic # js?key=AIzaSyDyECNnY4HOjiGu7m0f43yvlNe7Y9AgRcs&callback=initMap:53
here are my google console screenshots:
here is my codes:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<!--Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
-->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyECNnY4HOjiGu7m0f43yvlNe7Y9AgRcs&callback=initMap">
</script>
</body>
</html>
how can i fix it?!
Just open the documentation link mentioned in the error message and read what it says
https://developers.google.com/maps/documentation/javascript/error-messages#referer-denied-map-error
Your application was blocked for non-compliance with the Google Maps Platform Terms of Service, following several email notifications. To appeal the block and have your implementation reviewed, please complete this form. You will receive a response via email within a few business days.
So, the only option to unblock your web site is submit a web form to Google as mentioned in the documentation.
I hope this helps!
I am using Google Map Javascript API with marker clustering and InfoBox on a Laravel Website
https://developers.google.com/maps/documentation/javascript/marker-clustering
The native red marker shows properly on desktop but doesnt appear on mobile.
However if i click at the location where it should be, my infobox does appear and everything else if ok.
Is there a special setting to be taken into account (as maybe the png used for this marker on mobile display or else?)
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at Uluru
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({position: uluru, map: map,icon: image});
}
</script>
<!--Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
-->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
After checking, it was not related to Google Map but to my server .env environment file (I am using Laravel)
APP_URL variable was refering to 'localhost' in .env file and this APP_URL variable was used in Javascript code (using PHP-Vars-To-Js-Transformer) for retrieving some server img ressources:
This caused on desktop the ressources to be properly loaded on google map api but not on mobile.
Replacing localhost by my website url in .env file solved the issue.
Hey I am trying to have a map in my project. I got my API_KEY from google for GoogleMaps... I have no error in console but map doesnt display anything, till I open developers tools on google Chrome...
2
After that is working but marker is in work palce.. Still no errors in console.
WHat am I doing wrong?
Style:
#map {
width: 100%;
height: 300px;
background-color: grey;
}
Code:
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: -0.250608, lng: 52.025528};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Title!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap">
</script>
You are init-ing the map in a container that is not visible/has no dimensions.
Opening dev tools triggers a resize on your browser which causes the map to resize itself.**
You can fix it by either:
either waiting to init the map until it's container is visible
or calling google.maps.event.trigger('resize',map) (where map is an
instance of the map) when your container becomes visible.
** Proof that this is what's happening: undock your dev tools so it's a floating window. Then refresh your page (with dev tools closed) and open dev tools again after you fail to see the map, it still won't be visible because your browser never resized (because your dev tools is floating and not docked)
Have you made sure to register your URL / domain with Google for the use of the Maps API? https://developers.google.com/maps/premium/previous-licenses/clientside/auth#register-urls
I'm making a website, where the visitor gets its position showed on a map and within a chosen radius (e.g. 10km) the visitor can see some POIs (e.g. Restaurants, Bars).
I have this code so far:
<!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"
src="http://maps.googleapis.com/maps/api/js?key=[MY_KEY]&sensor=false">
</script>
<script type="text/javascript">
function init()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition (processPosition, handleError);
}
else
{
alert("Geolocation not supported in this browser");
}
}
function processPosition(pos)
{
var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
var myOptions = {
center: latlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here! (at least within a "+pos.coords.accuracy+" meter radius)"
});
}
function handleError(err)
{
alert('An error occurred: ' + err.code);
}
</script>
</head>
<body onload="init()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
It shows me my position on a map with a marker using Google Maps.
The thing is, I would like to use the maps from OpenStreetMap (they are updated regularly and there are not restrictions), but unfortunately I haven't managed to implement it yet.
Here are the maps I need: Maps
1. Is there an example (tutorial), which shows how to use their API, like Google's?
2. Does OpenStreetMap has something like POIs, like Google Places? Or is it even possible to use Google Places together with the maps of OpenStreetMap?
If you want to use OpenStreetMap data, you should look into OpenLayers. This works a little bit differently than the Google Maps or Bing Maps APIs: you have to install the OpenLayers JavaScript library on your server, and it takes care of displaying the map data ("map tiles") which can come from various sources: OpenStreetMap (OSM), Google Maps, your own custom map data, etc. The OpenStreetMap website itself uses OpenLayers to display the maps.
1: There is documentation (although I'm afraid not quite as good as for the Google Maps API) and plenty of examples, including some for using OpenStreetMap data, alone or together with Google data (enter "osm" in the "filter" box at the top).
2: As for POIs, you can place a "Marker Layer" on the map as in this example, including customizable marker icons and bubbles which appear when clicking on the icons, but you'll have to take care of the data for the POIs and the search functions yourself. So, if you want, you are free to use the Google Places API and then display the results as markers on an OpenStreetMap - as long as you display a "Powered by Google" logo.
The list of all OSM frameworks available from openstreetmap.org, with particular notice on the list of so called "webmaps", as it pertains to your question: http://wiki.openstreetmap.org/wiki/Frameworks#Webmaps
nJoy!