I've been doing quite a bit of searching here and on Google, but it's hard to think of a good search string.
In HTML, I set the mapInit callback where I do this:
map = new google.maps.Map( elem,
{
center: { lat: 52.1, lng: 4.8 },
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
What I expected is a map just like as if the user started a new tab with maps.google.com, with just those things overruled. That doesn't happen. The tab is always a lot poorer than when I start maps 'by hand'. No search box, no right-click menus, really nothing of all these things that I so like.
Is there a way to do what I want, and if so, how?
Google Maps API lets you create a map viewer on your website.
The experience is very limited compared to the maps.google.com and there is no way to get the "full" maps experience, it's something Google still reserves to themselves.
Related
As everyone of us know that google maps platform has introduced new pricing model, i'm trying my best to reduce the cost of google maps service as much as possible by disabling the stuff that i'm not using on my website which is using maps service.
Here is the screenshot of last three days of costing of my google maps service as we're managing high traffic website, i think we're going to spend a lot of money on maps service.
Also i'm loading google map onto the screen only when needed and then i'm calling this function to initialise maps:
find_centre_map = new google.maps.Map(document.getElementById("find-centre-map"), {
center: {lat: -28.214739, lng: 134.657340}
, zoom: 5
, mapTypeControl: false
, gestureHandling: 'greedy'
, styles: [{featureType:"poi",elementType:"labels",stylers:[{visibility:"off"}]}]
, zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
, streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
});
After this i'm using a static json file which conatins lat,lng and marker info and loop it to show markers on google map.
Can anyone please explain me how can i disable Maps and Street View API - Dynamic maps service??
And just use Maps javascript API which is free. Check above screenshot to see map serivce usage and it's SKU pricing.
Any help to reduce map costs will be greatly appreciated.
I am not good at English, so I'm sorry in the machine translation sentences.
I am suffering from the same problem. However, I will tell you that I was able to reduce many charges for the time being. It is to turn off Street View.
find_centre_map = new google.maps.Map(document.getElementById("find-centre-map"), {
center: {lat: -28.214739, lng: 134.657340}
, zoom: 5
, mapTypeControl: false
, streetview : false
, gestureHandling: 'greedy'
, styles: [{featureType:"poi",elementType:"labels",stylers:[{visibility:"off"}]}]
, zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
});
I am trying to use Bing maps API in ionic v1 framework app which builds on android,iOS and windows platforms.
I am facing problem in Bing maps which is plotting properly but zoom in,zoom out,changing the map type from aerial to road & fetching current location these buttons are not functional.I have proper API key to access maps. I even tried it doing ionic serve on browser but nothing helped me.
I have followed code from the below link:
https://github.com/eppineda/ionic.bing-map-demo
I have also changed JS src file of bing maps in index.html page from:
src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0'
To
src='http://www.bing.com/api/maps/mapcontrol'
The src file i have changed referring to Microsoft document pages as below:
http://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#loadMapAsync+HTML
Issue can be seen in the link -
http://plnkr.co/edit/NO5eLxogOyPHsiXzzpaQ?p=preview
$scope.init = function () {
console.log('Map init');
var mapOptions = {
credentials: '',
mapTypeId: Microsoft.Maps.MapTypeId.road,
center: new Microsoft.Maps.Location(51.5033640, -0.1276250),
zoom: 15,
// showLocateMeButton: false,
// // NavigationBarMode: "default",
// // NavigationBarOrientation: "vertical",
// showZoomButtons: false,
// ShowNavigationBar: false
showDashboard: true
// // showMapTypeSelector : true
// // showMapTypeSelector: false
// navigationBarMode: Microsoft.Maps.NavigationBarMode.compact
};
map = new Microsoft.Maps.Map(document.getElementById('divMap'), mapOptions);
console.log(map);
};
Please help me out to figure this out.It would be really helpful with the solution. Thanks in advance.
I suspect there is one of two issues. The first is that you have some other HTML element above the map and/or navigation bar/buttons. This would block you from being able to press those buttons. The second is that your code is actually loading the map twice somehow and as such you are ending with two maps on top of each other. When this happens the navigation bar for the bottom map ends up on top and using it actually changes the bottom hidden map. I've seen this occur once before in someone else's app who load the map twice to the same div.
Is there any possibilities in google maps api to implement **div* as marker. I have seen almost similar one in a national geographic website. but unfortunately keep on fail when implement that function in to my map :(
Does it work when use as opened infoindow ?
var options = {
zoom: 14,
center: mycity,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
My work http://jsfiddle.net/gbqzQ/2/
looking for something like this working demo:-http://natgeo125.appspot.com/
I checked the solution for my problem but all I get are codes made by Google assigned to a static longitude and latitude.
Here is JavaScript Code:
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
I want to make it dynamic according to the user location.
You can try this one...
http://netmera.com/location/js/geolocation.js
Adding geolocation.js script your html and then below code try.
$.geolocation.find(function(location) {
var lat = location.latitude;
var lng = location.longitude;
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
You can fetch the longitude and latitude of your user via the HTML5 GeoLocation API (see here for example code) and pass the retrieved values.
You will need to use HTML5 Geolocation API. Number of factors: the user has to permit your website to gather info regarding you location, if he doesn't, you won't be able to gather the info. Secondly, even the info is not always accurate. In collecting the location info, the API uses a number of resources, including the location of the server dishing out the page at your current IP address, or it might use the users GPRS service if he is viewing you website in a GPRS enabled device. In either case, chances are not much that you will get the exact location, you can almost always expect an approximate location.
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.