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!
Related
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.
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>
I am using the following sample code to embed a Google Fusion Tables map:
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4, -122.1),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Address',
from: // My table id,
},
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You can see from the above code that the "center" is set to a specific long and lat. If I remove the "center" property, it does not render the map at all.
I am looking at some way to automatically determine the best location to center in on. I believe using just general Google Maps that you can determine the boundaries of the location markers and center in on that? So maybe there is a way to get the list of locations from the table and then working out the boundaries from there?
Note: I understand there are other options for embedding the map, such as an iframe, but iframe is not an option for us in this project. Further, I understand that you can take the HTML/JS from the "Publish" option within the Fusion table, but the requirement is for the user to be able to embed the map with only the table id so they cannot copy/paste any HTML/JS.
If you geocode the addresses externally and include the coordinates in the table, you can query the table using the Fusion Tables API v1 or GViz (the google visualization API), add the coordintates to a google.maps.LatLngBounds object, and use that to center and zoom the map to show all the points with google.maps.Map.fitBounds.
example (using GViz)
How do I get google maps to tilt and display a 45% view?
Documentation says that it should do it "automatically", but it doesn't seem to be doing it. Is this a feature Google is holding back from the API?
Click the link to and zoom in to see the feature as it is used on google maps
Google Offices
<html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false&key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" type="text/javascript"></script> </head> <body>
<div id="Map" style="width: 100%;height: 500px"> </div>
<script>
var latlng = new google.maps.LatLng(37.4219720,
-122.0841430);
var myOptions = {
zoom: 3,
scrollwheel: false,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("Map"), myOptions);
var bounds = new google.maps.LatLngBounds();
bounds.extend(CreateMarker(map,37.4219720,-122.0841430).getPosition());
map.fitBounds(bounds);
function CreateMarker(map, latitude, longitude){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map,
});
return marker; } </script> </body> </html>
Here is demo of using the 45 degree satellite imagery:
http://code.google.com/apis/maps/documentation/javascript/examples/aerial-rotation.html
The methods you are looking for are setTilt() and setHeading().
http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
Note: 45 degree imagery is only available at certain zoom levels (18,19,20) and certain areas.
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(45.518970, -122.672899),
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// changes map to use 45 degree imgary
map.setTilt(45);
map.setHeading(90);
}
AFAIK, Google Maps on desktop browsers can't tilt maps by itself; only Google Earth, the Google Earth browser-plugin and the Android app can do that (currently).
Could you provide a link to the documentation that says that it should tilt automatically?
The page at the link you provide only switches on the plugin if you have it (obviously) and select the 'Earth' button on the top right.
When HTML 5 is supported more widely, I’m guessing Google Maps will be able to use vector graphics as well. Till then, it’s tiled bitmaps or the Earth plugin, I’m afraid.
I might be wrong, but I though Marty (op) originally asked for the tilted view of "satelite imagery" (3D transforms of the 2D satelite images) as opposed to the aerial photage of specific cities that have been added to GMaps over the past years.
Google Maps has this feature (tilted view / two different angles), through the "tilt view" control from maps.google.com. (the API is there map.setTilt(), it just isn't enabled).
Google earth used to have this feature, now it seems Google Earth is begin phased out, and it's features have been merged into Google Maps, with the exception of "tilted view". Another exception is the Google Maps Android API, which seems to be having it!! Especially in the Google Navigation app for Android, it makes use of that in a very cool way). (Supposedly done to add more value to the Android SDK over iOS).
I guess down the road it'll be made available, when other services start offering comparable services. I hope this will happen pretty soon. Are there any other map providers doing anything similar? I think Bing is just doing more aerial photos??