how can i use only Dynamic Maps with Maps Javascript API without Dynamic Street View like here in the description:
https://developers.google.com/maps/billing/understanding-cost-of-use#dynamic-maps
i use maps like this:
const eventMapOptions = {
panControl: false,
zoomControl: true,
scaleControl: true,
mapTypeControl: false,
center: ...,
zoom: 16,
streetViewControl: false
};
new google.maps.Map(document.getElementById('map', eventMapOptions);
now i have for example for the last month:
14479 maps loads - Maps JavaScript API
14479 maps loads - Maps and Street View API
i don't want and don't use street view api and have to pay for this
but how can i disable usage of street view?
In the MapOptions set streetViewControl to false and the feature will disappear.
Example
var mapOptions =
{
streetViewControl: false,
// ...
};
Documentation
https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions
Related
Morning all.
I'm am currently using the below code to load my Google Map's API V3 at a specific long-lat, it's for a client and I'm wondering if I can load an infoWindow similar to the one the pops up on Google Maps with the business information, review stars etc.
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(lat-long),
disableDefaultUI: true,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("location"),
mapOptions);
var point = new google.maps.LatLng(lat-long);
var marker = new google.maps.Marker({
position:point,
map: map,
});
}
</script>
Is this done in a different API? If so could anyone point me to some helpful information?
Sounds like you might be looking for the Places API/Library:
https://developers.google.com/maps/documentation/javascript/places#place_details_responses
Not sure if it has everything you find on Google Maps.
How can i modify a V3 map's mapOptions (after the initial map has been loaded)?
Specifically, I would like to be able to flip the
draggable: false
option to
draggable: true
When an action (such as a click on a div) is triggered.
Addition: I have tried loading jquery-ui-map and using:
$('#map').gmap('option', 'draggable', true);
However this seems to reload the map and forget all the other existing options. I could redefine them all, but that seems a bit hackish.
Any pointers appreciated.
Thanks!
Found that I don't even need jQuery for this – it's already part of the Google Maps API. Simply do:
map.set('draggable', true);
Too easy! Hope it helps someone.
======
2020 update - you should use:
map.setOptions({ draggable: true });
Google Maps JavaScript API V3.25 update
Note that map.set() does not work in newer versions of Maps API. You have to use map.setOptions()
Source: Google Maps Reference
If you have already created the map previously, you can set several options ( https://developers.google.com/maps/documentation/javascript/reference#MapOptions ) at once like this:
var myOptions = {
zoom:11,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false
};
map.set(myOptions);
I'm building an application using CakePHP that will store events including the event location. When a user visits the application they will see a Google Map that will get their location and show events near them in the form of little pins that they can click on to view the event details.
I have some questions though:
1.) How would I store the Location in the DB? Would the actual geolocation coordinates be the best bet and how would I make it easy for a user to create an event and enter them.
2.) Once I have the events in place how do I create custom pins with the info pulled from the DB? Example like foursquare:
3.) Whilst getting the users location using HTML5 Geolocation how do I show a little loader on the map again like Foursquare does?
So far I've managed to create the Map and make the controls minified and get the location of the viewer but I'm not sure how do 3 and show a better feedback to the user for the geolocation.
If someone could help me with those other two questions as well it'd be very much appreciated as I'm finding it very confusing so far. Thanks.
var map;
function initialize() {
var myOptions = {
zoom: 8,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5.'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
1) Store the actual coordinates of the location and any extra meta data (if you have it) like place name, foursquare_id, date, etc. Storing it this way will make using the data later on straightforward, such as plotting on a map or location name lookup. This will be your Location model.
Create an Event model which you can then associate to a Location. You could hack together some nice interactive functionality using event handlers on your map markers.
Something like: "the user clicks a location on the map, up pops a box asking them would like like to create a new event at this location, marker is added to the map and a form appears where they can populate the event details, etc, etc." You get the idea.
Have a look at the Marker documentation.
2) You can set a custom image for the map markers using ImageMarker Class. Take a look at the huge set of examples for ideas of what's possible.
3) The navigator.geolocation.getCurrentPosition() method as I understand it, is asynchronous. The first argument is the successCallback.
With this in mind, you could set an overlay on your map: "Finding your location", then make the call to getCurrentPosition(). In your successCallback function, you would then hide the overlay.
I am working on google map api v3 and want to add a feature of editing the polyline. As of the google documentation. There are 3 events fired when a polyline is in edit mode.
insert_at
set_at
remove_at
I know when first two events are fired and am able to get the edited coordinates as well. I also want to delete a node but not sure how it works?. Can anyone tell me when will the event "remove_at" will be fired ?
According to the documentation these events belong to class google.maps.MVCArray. You can find there also a description of remove_at event:
This event is fired when removeAt() is called. The event passes the
index that was passed to removeAt() and the element that was removed
from the array.
But I'm not sure you can use these events to handle changes while editing the Polyline. That's very interesting, please let us know if it works and how!
'remove_at' will be triggered when you undo an edit to an existing overlay that results in control point(s) getting removed.
I've created a fiddle to demonstrate this.
From the fiddle:
var myLatlng = new google.maps.LatLng(60.629765, 6.424094);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var drawMan = new google.maps.drawing.DrawingManager({
map: map,
drawingControl: false,
polygonOptions: {
editable: true,
draggable: true
}
});
drawMan.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
google.maps.event.addListener(drawMan, 'overlaycomplete', function (event) {
// When draw mode is set to null you can edit the polygon you just drawed
drawMan.setDrawingMode(null);
google.maps.event.addListener(event.overlay.getPath(), 'remove_at', function () {
alert('remove_at triggered');
});
});
At the moment I use Google Static Maps API:
<img src="http://maps.google.com/maps/api/staticmap?center={$listing.City},{$listing.State}&zoom=5&size=145x145&maptype=roadmap&sensor=false"></img>
As you can see I am using Smarty to populate the location with:
{$listing.City},{$listing.State}
I would like to add a marker and zoom control utilizing Google Maps API v3. What is the most efficient way to achieve this? I assume I need to use geocoding?
Thanks
I recently had a project that include a Google Map using API v3. I chose to wrap the API into a jQuery plugin. The API is pretty straight forward. Here is a link to a blog post where I talk about the jQuery plugin. More importantly, you can get the plugin code. That code shows all the details on how to create a map and add markers.
http://blog.bobcravens.com/2010/06/a-google-maps-version-3-jquery-plugin/
Here are a few snippets of importance:
Include the following in your header:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
This snippet creates a map:
var latlng = new google.maps.LatLng(lat, lng);
var settings = {
zoom: options.zoom,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
navigationControl: options.navControl,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var theMap = new google.maps.Map($("#div_id")[0], settings);
To add an overlay do the following:
var latlng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: latlng,
map: theMap,
title: "title"
});
I encourage you to look at the plugin for more details. Hope this helps.
Bob