I am trying to add a map to my website, but I would like to have it show the business view by default rather than going from satellite to street view and then to business view.
Is this possible?
If business view is what is now called indoor map, once you reach the view you should like to show on a map, you could simply retrieve the link to the view or to the iframe embed code, as explained in https://support.google.com/maps/answer/144361?hl=en
indoor map example: https://goo.gl/maps/SAhHg5hhLrGdLjaJ9
However, embedding the map via iframe source code gives you limited chances of customization.
If you need a higher level of customization you can use the street view service of Maps Javascript API (you will need an API KEY )
example: http://jsfiddle.net/eg561mx8/
var lat2 = 48.87708978509529, lng2 = 2.3392088036591754;
var map;
var panorama;
var panoramaService;
var streetView;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
zoom: 14,
center: new google.maps.LatLng(lat2, lng2),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
streetView = map.getStreetView();
panoramaService = new google.maps.StreetViewService();
panoramaService.getPanoramaByLocation(
new google.maps.LatLng(lat2, lng2),
100,
function(streetViewPanoramaData, streetViewStatus) {
if (streetViewStatus != "OK") {
alert("no street view at this location I'm afraid");
} else {
streetView.setPosition(
streetViewPanoramaData.location.latLng);
streetView.setVisible(true);
}
}
);
}
Related
I am attempting to show a google maps marker via satellite view and street view at the same time. However, the marker placed on street view seems to change location (be slightly offset) depending on where along the street you are looking at it. In the examples below, you can see in one angle the marker is successfully on the grass and the satellite view matches the street view. However, if I navigate down the road one step, the marker is now on the driveway, despite the satellite view indicating otherwise. The same marker is used for all examples.
Any thoughts?
Example: https://jsfiddle.net/6Lpgoex2/
const startPosition = new google.maps.LatLng(33.82444502161826, -84.32112795727612);
// Aerial view map with marker
var locationMap = new google.maps.Map(document.getElementById('location'), {
center: startPosition,
zoom: 21,
mapTypeId: 'satellite'
});
locationMap.setTilt(0)
var locationMarker = new google.maps.Marker({
position: startPosition,
map: locationMap
});
// Street view map with marker
var viewMap = new google.maps.Map(document.getElementById('view'), {
center: startPosition,
zoom: 14
});
var viewMarker = new google.maps.Marker({
position: startPosition,
map: viewMap,
});
// Update streetview to look at the marker
var panorama = viewMap.getStreetView();
const panoramaService = new google.maps.StreetViewService();
panorama.setVisible(true);
panoramaService.getPanoramaByLocation(startPosition, 100, function(streetViewPanoramaData, streetViewStatus) {
if (streetViewStatus == "OK") {
let heading = google.maps.geometry.spherical.computeHeading(streetViewPanoramaData.location.latLng, startPosition);
const position = streetViewPanoramaData.location.latLng;
panorama.setPosition(position)
panorama.setPov({
heading: heading,
pitch: 0
});
panorama.setZoom(1); // Fix bug to make marker visible https://issuetracker.google.com/issues/35830290
panorama.setVisible(true);
}
});
Note: An issue has been opened.
First time ever posting on StackOverflow so tell me and be crude if I am doing something terribly wrong anyway. I recently created a KML file with maps.google.com and I uploaded the kml to my site, and I am trying to implement to the google maps that we created, but I am stumped as I have no errors but it does not show at all.
// North Campus SHuttle KML implementation
var redShuttle = new google.maps.KmlLayer (
'http://blazelist.org/maps/test/RedShuttle.kml'
);
redShuttle.setMap(map);
Can you share more code?
In my example your code is working:
function initialize()
{
var map = new google.maps.Map(document.getElementById("map"),
{
center: new google.maps.LatLng(22.7964,73.8456),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
/* var kmlLayer = new google.maps.KmlLayer('http://blazelist.org/maps/test/RedShuttle.kml',
{
suppressInfoWindows: true,
map: map
});
*/
var redShuttle = new google.maps.KmlLayer ( 'http://blazelist.org/maps/test/RedShuttle.kml' ); redShuttle.setMap(map);
}
http://jsfiddle.net/iambnz/WbzpS/
I have a Google Maps elevation service (for my Geography of Pennsylvania students) that works fine with point clicks on Google's basemaps. I would like to add a kml layer showing PA counties. When I add it, the elevation infowindow no longer displays. Is there a way to add the kml but suppress its click response so that the elevation response shows?
Current code (partial):
function initialize() {
var mapOptions = {
zoom: 7,
center: centerOfPA,
mapTypeId: 'roadmap'
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var paCounties = new google.maps.KmlLayer('http://mapmaker.millersville.edu/arcgis/services/PAcounties/MapServer/KmlServer', {suppressInfoWindows: true});
paCounties.setMap(map);
// Create an ElevationService
elevator = new google.maps.ElevationService();
// Add a listener for the click event and call getElevation on that location
google.maps.event.addListener(map, 'click', getElevation);
}
Either suppress click events on the KmlLayer (clickable: false) or handle the click events and call the elevation service (with the latLng from that click event).
Here is a working example
I am building a cycle information site and want to be able to grab the users location from their iPhone so i update my Google map and provide the user with relevant information. There is a Drupal module called Geolocation which uses the HTML5 option to do this and i have found the code which it is performing the task in the module below.
// START: Autodetect clientlocation.
// First use browser geolocation
if (navigator.geolocation) {
browserSupportFlag = true;
$('#geolocation-help-' + i + ':not(.geolocation-processed)').addClass('geolocation-processed').append(Drupal.t(', or use your browser geolocation system by clicking this link') +': <span id="geolocation-client-location-' + i + '" class="geolocation-client-location">' + Drupal.t('My Location') + '</span>');
// Set current user location, if available
$('#geolocation-client-location-' + i + ':not(.geolocation-processed)').addClass('geolocation-processed').click(function() {
navigator.geolocation.getCurrentPosition(function(position) {
latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
Drupal.Geolocation.maps[i].setCenter(latLng);
Drupal.Geolocation.setMapMarker(latLng, i);
Drupal.Geolocation.codeLatLng(latLng, i, 'geocoder');
}, function() {
Drupal.Geolocation.handleNoGeolocation(browserSupportFlag, i);
});
});
}
Does anybody have any Google Maps API V3 experience of implementing this or similar? I would prefer the user to have to click "My Location" or equivalent to then use their iPhone's location to update the map rather than request it automatically. This is my Map and the array of markers that i have on it. How can i utilise the iPhones location to update it?
function initialize() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(51.51251523, -0.133201961),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
setMarkers(map, spots);
}
var spots = [
['Marylebone', 51.51811784, -0.144228881, '2.png', 2901, 'Broadcasting House - Marylebone</br>Available Bikes: 1</br>Number of Docks: 13</br> View more information about this dock'],
['Fitzrovia', 51.51991453, -0.136039674, '3.png', 2908, 'Scala Street - Fitzrovia</br>Available Bikes: 8</br>Number of Docks: 21</br> View more information about this dock'],
['Fitzrovia', 51.52351808, -0.143613641, '3.png', 2923, 'Bolsover Street - Fitzrovia</br>Available Bikes: 6</br>Number of Docks: 19</br> View more information about this dock'],
['Fitzrovia', 51.52025302, -0.141327271, '3.png', 2975, 'Great Titchfield Street - Fitzrovia</br>Available Bikes: 5</br>Number of Docks: 19</br> View more information about this dock'],
['Bloomsbury', 51.51858757, -0.132053392, '3.png', 2982, 'Bayley Street - Bloomsbury</br>Available Bikes: 12</br>Number of Docks: 25</br> View more information about this dock']
];
function setMarkers(map, locations) {
var image1 = new google.maps.MarkerImage('amber-spot.png',
new google.maps.Size(30, 36),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var spot = locations[i];
var myLatLng = new google.maps.LatLng(spot[1], spot[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: spot[3],
title: spot[0],
zIndex: spot[4],
html: spot[5]
});
bounds.extend(myLatLng);
map.fitBounds(bounds);
var infowindow = new google.maps.InfoWindow({
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map,this);
});
}
}
thanks
Lee
First you will need a javascript function that will be fired from a button press, or a link click. This function will use the geolocation api available through html5 to check if the user can provide you with their location and grab it if so. The remainder of the function will use the google maps api to pan to that lat lng coordinate and set the zoom level appropriately.
Here is the google maps api map object which has the methods you need:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
And this site has a great overview of basically everything you are trying to do:
http://www.html5laboratory.com/geolocation.php
Finally don't forget to save the location in your database or client side javascript array. If you are saving the data, warn the user of that for privacy implications.
I have a online shop and people buy products and we send a products to their address , but sometimes customers enter a bad address and we couldn't find the destination.
I want to show a Google map in address form then customer locate their address on the map and finally address of that point fetched from Google map.
Is Google offers this feature?
You can also check the address against known deliverable addresses within the area. This database is maintained by the USPS, who visits (practically) every address every single weekday. Using a web-based API you could query the database and either get an automatic match or get a list of suggested matches. I know this doesn't provide you a map, but in many cases, it can allow your clients to correct their address right there on the spot and can be very easy to implement and use. Some services offer a Javascript implementation as well as an XML hook into the API. If you're googling it, look for address verification webservice, or something similar.
I work for an address verification service called smartystreets.
Yes, this service is known as reverse geocoding.
And it's actually quite simple to implement. Assuming you get lat and long values from map click event, like so:
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
getAddress(event.latLng);
});
}
function getAddress(location latlng) {
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
}
Take a look at reverse geocoding.Although your question is many questions in one and you should break it to smaller ones and ask them here also.