First of all, I hope you are all fine.
I am currently working on my assignment and i need to achieve these:
Show map with 1 marker if user is logged out
Show map with route if user is logged in
I managed to do both however they only work separately.. after a while i found out that the following was the cause:
<script src="http://maps.google.com/maps?file=api&v=2&&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
type="text/javascript"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false" />
Apparently i can't have them both together >.< so my question is.. Is there a way to go around this please?
The following is the JavaScript code that i'm calling from code behind via ASP.NET since i get the values from my database. They are basically creating my maps.
<script type="text/javascript">
var map;
var directionsPanel;
var directions;
function initialize(lng, lat) {
var latlng = new google.maps.LatLng(lng, lat);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({position: new google.maps.LatLng(lng, lat), map:map});}
function setRoute(log, lat, from, to) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(log, lat), 15);
directionsPanel = document.getElementById("route");
directions = new GDirections(map, directionsPanel);
directions.load("from: " + from + " to: " + to);
}
</script>
Excuse me if my code is 'not that good' or there was a better approach for it. This is actually my first time working with JavaScript.
Thank you for your time :)
You're loading two different versions of the Maps API -- V2 and V3. You should use only one; I recommend V3 since V2 is deprecated.
V3 is the latter of the two you references: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
Afterward, check the reference for V3 at http://code.google.com/apis/maps/documentation/javascript/basics.html
Exactly what Kai said.
Keep in mind though, when you're upgrading to V3, you will most likely have to change some of your calls. For example: new GMap2(document.getElementById("map_canvas")); is not in the v3 API.
To do the least amount of work, you can figure out what uses v3 and what uses v2. Then just move to the one that has the least changes. But I also recommend to upgrade to v3 if you have the time/resources.
Related
I know this has been asked before. But the situation is that I'm referring the function before loading the map api.
This was working a few days ago, and started giving me this error out of nowhere. I'd be grateful if someone could help me.
Error:
//HTML
<script src="assets/js/scripts.js"></script>
<script>
var markers = [];
function myMap() {
var mapProp = {
center: new google.maps.LatLng(39.7312983, -7.5951745),
zoom: 5
};
var image = 'https://imgur.com/9SsOEZu.png';
var map = new google.maps.Map(document.getElementById('google-map'), mapProp);
//Some PHP
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API_key&callback=myMap">
</script>
</body>
</html>
Well, I solved it. The problem had nothing to do with Google Maps API but with a badly inputed value in the database that caused the code to crash before loading any JS.
hello I have a problem I wish to integrate ue google map in my site but I do not understand it appears when I update the page but then it disappears. In the console it says "no APIkey" but I did it several times. I followed the site: developers.google
but I do not understand where the error lies. I put the html part if a person understand the error please ! I also follow this topic google api in my website but nothing appears !
<div id="map"></div>
<script>
function initMap() {
var ff = {
lat: 50.638181,
lng: 3.058227
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: ff
});
var marker = new google.maps.Marker({
position: ff,
map: map
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWdGA-ndsHMtR5-cdZrc5SHtfKKBG5Bfg&callback=initMap">
</script>
Console says:-
https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error
so activate your google map API key under project.
Your API key is not activated. Make sure to generate a new one following the guide: https://developers.google.com/maps/documentation/javascript/get-api-key?hl=de
I want to:
Render a google map on a web page;
Have the map centre on a user's current location;
Show places local to that user.
Question: Assuming this is possible (and that the limiting factor is my current ability), how might this be achieved?
Resources:
I am using the Google Maps JS API v3 and Places Library
Currently, I can achieve either rendering places around a hardcoded location or centring the map on the user.
I have used this Geolocation code and this Places Search code assuming that I could integrate the code of one into the other (by handing lat/long values from the geolocator into the location object pyrmont).
There exists a SO question on this for Google Maps API v2, deprecated by v3.
First thing you need to do is define the map:
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&libraries=places&callback=initMap" async defer></script>
this tells us that we are using the places library and on callback we are going to call the initMap function.
function initMap() {
var london = {
lat: 51.5073509,
lng: -0.12775829999998223
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
london = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
map.setCenter(london);
setPlaces(london);
});
} else {
// Browser doesn't support Geolocation
//since you set coords above this section it will default to that
setPlaces(london);
}
map = new google.maps.Map(document.getElementById('map'), {
center: london,
zoom: 15
});
}
The initMap function initialises the map. We set var london to the co-ordinates of London in case the user does not have location turned on.
We then check to see if their location is turned on if (navigator.geolocation) {does this. if this is true then we override london to the users position. If changed we then move the map to the users location.
both outcomes will call:
function setPlaces(location) {
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: location,
radius: 1000,
type: ['store']
}, callback);
}
Which gets the places around the location (either user or predefined)
A working example can be seen here, for parameters etc just read the API.
JSFIDDLE: https://jsfiddle.net/4kgy68rg/1/
I created a map showing traffic with the google maps javascript API using the TrafficLayer object. A googlmaps.com-generated map of the same area displays waze incident icons, but they do not show up on my map. Is there a way to include the incident markers when generating the traffic map? Here is my code:
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.794086, lng: -122.400445},
zoom: 12
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxx&callback=initMap"
async defer></script>
At present it is impossible to add layer with incidents / constructions markers on the google traffic map.
Discussion on this topic takes place since 2010 and is available on the site:
https://code.google.com/p/gmaps-api-issues/issues/detail?id=2411
It remains to wait for the response of the google developers.
I have read up on GPS Real time tracking and found out several things about it, mostly requiring PHP, zope and a database to store the incoming data. Some other methods uses ajax with relations to PHP.
As regards to my question, is it possible to do so with just html and JS, using markers or anything else to populate the Google Map when you move anywhere in the city? Need some help on this, Thanks!
Yes, it is possible. Most browsers in the latest smartphones have implemented the W3C Geolocation API:
The Geolocation API defines a high-level interface to location information associated only with the device hosting the implementation, such as latitude and longitude. The API itself is agnostic of the underlying location information sources. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input. No guarantee is given that the API returns the device's actual location.
The API is designed to enable both "one-shot" position requests and repeated position updates, as well as the ability to explicitly query the cached positions.
Using the Geolocation API to plot a point on Google Maps, will look something like this:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var point = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Place a marker
new google.maps.Marker({
position: point,
map: map
});
});
}
else {
alert('W3C Geolocation API is not available');
}
The above will only gather the position once, and will not auto update when you start moving. To handle that, you would need to keep a reference to your marker, periodically call the getCurrentPosition() method, and move the marker to the new coordinates. The code might look something like this:
// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = null;
function autoUpdate() {
navigator.geolocation.getCurrentPosition(function(position) {
var newPoint = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
if (marker) {
// Marker already created - Move it
marker.setPosition(newPoint);
}
else {
// Marker does not exist - Create it
marker = new google.maps.Marker({
position: newPoint,
map: map
});
}
// Center the map on the new position
map.setCenter(newPoint);
});
// Call the autoUpdate() function every 5 seconds
setTimeout(autoUpdate, 5000);
}
autoUpdate();
Now if by tracking you mean that you should also store this information on a server (so that someone else could see you moving from a remote location), then you'd have to send the points to a server-side script using AJAX.
In addition, make sure that the Google Maps API Terms of Use allow this usage, before you engage in such a project.
UPDATE: The W3C Geolocation API exposes a watchPosition() method that can be used instead of the setTimeout() mechanism we used in the above example.