I create a street view Panorama by the following code, but it returns a custom street view which was taken by some photographers. Is there any method to ignore those panoramas as some of them are internal building views, I just want to get the google official street view?
pano.setOptions({
visible: true,
position: map.getCenter(),
enableCloseButton : false
});
Related
I have a directory website with placed you can have lunch. On the homepage you an search on your location or type in a city / lunchroom you know. When you press search you will see the result page with several listings. Here you can also choose to view the map (this is a Mapbox Api).
On the map the listings are shown, but the map doesn't automatically zoom in to your location. The map just shows the center of all listings. I want to show the listings within a 10km radius of the position you searched for.
On the MapBox website this is called GeoLocate (locate the user) and there is code for this you can use. So I changed the code to my preference only now I need to add it to my Wordpress theme. I'm using Directory theme Guido.
The code in the theme edit builder is different from the code I've made and I hope you can help me adjust the code properly. I'll show you both type of codes here so maybe that gives a better understanding:
This is the Wordpress Guido code in theme editor:
if ( $item.data('latitude') !== "" && $item.data('latitude') !== "" ) {
var zoom = (typeof MapWidgetZoom !== "undefined") ? MapWidgetZoom : 15;
self.addMakerToMap($item);
map.addLayer(markers);
map.setView([$item.data('latitude'), $item.data('longitude')], zoom);
$(window).on('update:map', function() {
map.setView([$item.data('latitude'), $item.data('longitude')], zoom);
});
$('.location-map-view').on('click', function(e){
e.preventDefault();
$('#single-listing-street-view-map').hide();
$('#'+map_e_id).show();
$('.location-street-view').removeClass('hidden');
$(this).removeClass('hidden').addClass('hidden');
map._onResize();
});
And the code for the MapBox Geolocate I need to add can be found here exactly: https://docs.mapbox.com/mapbox-gl-js/example/locate-user/
Hope anyone can help, thanks in advance
I have created a web page in angular which is using TomTom map API. I want to use my own search bar to search locations in the map instead of using the built-in search bar of tomtom map. How can I do this?
You can check very basic implementation done at: https://github.com/tomtom-international/geofences-creator
html:
<input type="text" id="search-text" class="form__input" value="San Francisco Airport">
js:
var query = document.getElementById("search-text").value;
fuzzySearch(query)
.then(getAdditionalData)
.then(processAdditionalDataResponse);
function fuzzySearch(query) {
return tomtom
.fuzzySearch()
.query(query)
.go()
.then(function(result) {
return result;
});
}
There is also a tutorial that covers an application that have builtin search box adjusted. You can also check it: https://developer.tomtom.com/maps-sdk-web/tutorials-use-cases/pizza-delivery
I am having trouble customizing the "clicked" infowindows in the google places API. I am able to use the places api to find locations and to customize the searched infoWindows (image 1) but I cannot seem to figure out how to customize the infoWindows launched by the places icons (image 2).
I apologize, part of my problem is I don't know what those specific infoWindows are called and if I did, I might be able to search for the solution. It seems most questions on this site are related to customizing the searched infoWindow content and I have had success doing that.
Searched Customized InfoWindow (image 1)
The InfoWindow that I want to customize and is launched by icons on the map (image 2)
Those are called clickableIcons. From the documentation
clickableIcons | Type: boolean
When false, map icons are not clickable. A map icon represents a point of interest, also known as a POI. By default map icons are clickable.
and:
getClickableIcons() | Return Value: boolean
Returns the clickability of the map icons. A map icon represents a point of interest, also known as a POI. If the returned value is true, then the icons are clickable on the map.
To control the InfoWindow, stop the default one from being opened, as described in the IconMouseEvent documentation:
google.maps.IconMouseEvent object specification
This object is sent in an event when a user clicks on an icon on the map. The place ID of this place is stored in the placeId member. To prevent the default info window from showing up, call the stop() method on this event to prevent it being propagated. Learn more about place IDs in the Places API developer guide.
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var iw = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function(evt) {
evt.stop()
if (evt.placeId) {
console.log(evt.placeId);
iw.setContent(evt.placeId);
iw.setPosition(evt.latLng);
iw.open(map);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map_canvas"></div>
I'm using a code similar the one below to display buildings KML Layer. Click event works and i get name and HTML. What i need to do is, I want to change style of the clicked polygon/line. Let say I want to change border width. How can i do that?
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {
lat: 41.876,
lng: -87.624
}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
ctaLayer.addListener('click', function(kmlEvent) {
//need to change style of the clicked element here.
});
}
You can't change the styling of a KmlLayer using the API.
Options:
use a FusionTablesLayer (import your KML into a FusionTable, you can dynamically style polylines from a FusionTable).
use a 3rd-party KML parser, like geoxml3 or geoxml-v3 to render the KML as native Google Maps JavaScript API v3 polylines, then modify those. Note that the 3rd-party parsers are subject to the same domain security policy for the KML, so can only access KML from other domains through a proxy.
example using geoxml3 (polylines change to yellow on mouseover)
I have a webmap with GMaps & GEarth integrated, in order for the user to switch between different views.
I load 3 KML files and control their visibility using checkboxes. This example here uses the same function stackOverflowQuestion
When I switch views Map - Satellite - Earth I have my KMLs working on Map & Satellite view, BUT not on Earth View.
function init() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(xx, xx),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
googleEarth = new GoogleEarth(map);
google.maps.event.addListenerOnce(map, 'tilesloaded', addOverlays);
}//end init
[...]
function OnOffKML(i) {
if(currentKmlObjects[i].getMap() === null) {
currentKmlObjects[i].setMap(map);
}
else {
currentKmlObjects[i].setMap(null);
}
}
this function works for Google Maps Api 3, but not for Google Earth plugin...
Does this mean I have to use the fetch{} for it to show on GE? Is there a workaround?
Could I exclude my toggleKML{} for the earth view in any way?
OK,
The problem here is that we cannot code for GM Api 3 and expect to have results for GE Api as well.
Sure the two can be integrated but you have to decide that one of the two will have limited functionality.
Thus I decided to split the application up, work separately and efficiently.
As for GE method for KML usage, I have used the fetch{} function, along with checkbox selection.
That is not strictly true, you would just need to reload your Kml into the earth API.
You could modify your OnOffKML function to act differently depending on the current mode (earth/maps).
The problem you have currently is that you are using Google Maps Api methods, on the Google Earth plugin.
Anyhow, something like the following would work, allowing the method to handle both.
function OnOffKML(i) {
if(googleEarth.getWindow().getVisibility()) {
// code for earth api
} else {
// code for maps api
}
}