I want to hide map markers while in street view. (Google maps v3) - google-maps-api-3

When a user drags the little yellow man onto the screen, it transitions into a full screen street view. This is good. However, it also litters the screen with my map markers. This is bad.
The hard way of solving this is for me to loop through every possible marker I could have on the map, storing which were visible before street view was initiated, and then restoring them when street view is done. But I can't find a street view initiation event anywhere in the API documentation.
The better and easier solution would be to set some option like "Don't show my markers while in street view."
Edit: managed to find a way to monitor the state of street view. How to detect enter and exit streetView in Google Maps API v3
However, I'd still like to know if there's a way to just... not show markers when in street view.
Final edit:
I'm including the 'solution'. This is a simplified version of what I ended up writing, because the layers each touch various modules throughout the application, so they aren't as simply handled as is shown.
Final solution:
// Add listener for when we go into street view.
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function() {
var setAllMap = function (mapObjects, state) {
for (var i = 0, len = mapObjects.length; i < len; i++) {
mapObjects[i].setMap(state);
}
};
// If street view was just activated
if (this.getVisible()) {
// hide everything
setAllMap(LayerOne, null);
setAllMap(LayerTwo, null);
setAllMap(LayerThree, null);
// If we're leaving street view
} else {
// show the marker layers that were on
setAllMap(LayerTwo, true);
setAllMap(LayerThree, true);
// If visibility state was true
if (LayerOne.getVisible()) {
setAllMap(LayerOne, true);
}
if (LayerTwo.getVisible()) {
setAllMap(LayerTwo, true);
}
if (LayerThree.getVisible()) {
setAllMap(LayerThree, true);
}
}
});

Using the listener in the answer you posted, see when street view is active and do setAllMap(null); to hide the markers. When it leaves street view, do setAllMap(map); to show the markers again.
Edit (from the Google Maps documentation):
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}

Related

How to update an InfoWindowText after the initial click on a marker using Google Maps with Flutter?

User clicks on the marker on a google map on a flutter app on an android device
As expected infowindow appears
User clicks on infowindow, nothing happens
It was expected to see Title and Snipped updated
I tried with multiple versions and codes.
mapController.onInfoWindowTapped.add((marker) {
_launchURL(data[i]["urlmember"]);
// options
print(marker.id.toString());
print(data[i]["urlmember"]);
MarkerOptions( infoWindowText: InfoWindowText("counseling","find us on second service"));
);
The expected result is for the infowindow to display the new title and snipped
The below code snippet is in the example app in the Flutter Google Maps Package (https://pub.dartlang.org/packages/google_maps_flutter) in the file 'place_marker.dart':
void _updateSelectedMarker(MarkerOptions changes) {
controller.updateMarker(_selectedMarker, changes);
}
void _onMarkerTapped(Marker marker) {
if (_selectedMarker != null) {
_updateSelectedMarker(
const MarkerOptions(icon: BitmapDescriptor.defaultMarker),
);
}
setState(() {
_selectedMarker = marker;
});
_updateSelectedMarker(
MarkerOptions(
icon: BitmapDescriptor.defaultMarkerWithHue(
BitmapDescriptor.hueGreen,
),
),
);
}
I believe that the way you have it set up currently, you click on an info window associated with an pre-existing marker, and that triggers the creation of another marker with no "position" (ie; a LatLng value, which is required for marker objects), but has infoWindow text properties. This would explain why nothing happens when you click on the infoWindow; it's essentially creating a marker and placing it nowhere; which means there wouldn't be anywhere to display the corresponding infoWindow text either.
I believe the logic you are looking to implement is: when a user clicks on the infoWindow, it should trigger an update to the already existing marker. To achieve this, you may implement something similar as the code snippet I shared above, except for using onInfoWindowTapped instead of onMarkerTapped.

Google Maps API 3 StreetView links without labels

The new feature for StreetView API 3 is that there is a label (called description) over the links (arrows of possible movement direction) on panorama.
I can turn on/off the links by the StreetViewPanoramaOptions.linksControl option, but I've found no way to display links without the labels, like in API 2.
I tried to intercept link-change event and overwrite link definitions, but it seems that the StreetViewPanorama.getLinks() returns a copy of the list: there is no effect on panorama image when I change the result array.
Is it possible to do it?
Well, I tried again and find out that my original statement about the links being unmodifiable was incorrect. With the following code, I was able to erase all the labels:
this.displayInContainer = function( container ) {
validatePano = new google.maps.StreetViewPanorama(
document.getElementById(container),
this.currentPanoramaOptions);
var obj = this;
google.maps.event.addListener(validatePano, 'links_changed', function() {
var links = obj.panoObject.getLinks();
for(var i = 0; i < links.length; i++ ) {
links[i].description = "";
}
});
}

fire click event on individual marker while using leaflet markercluster plugin

My site consists of a Leaflet map with the leaflet.markerclusters plugin. I am also using Flowplayer to play a video that opens in a JQuery Tools overlay using the selector id "#video1".
Currently, when I click on any marker on the map it fires my test video in an overlay. My goal is to create a click event unique to each individual marker in the cluster. Eventually, I would like every marker to have a click event that fires a video unique to that marker.
I am a beginner, and have been doing okay using these well documented libraries up until now. However, I don't have the skills to bridge this current gap. Would someone please give me a push in the right direction? Below is a link to my JS Fiddle. My issue begins on JavaScript line 2098.
var markers = new L.MarkerClusterGroup();
var addressPoints = [
[40.634902, -73.965054, "Video1"],
[40.660897, -73.961082, "Video2"],
[40.693353, -73.970413, "Video3"],
[40.693289, -73.966289, "Video4"],
[40.68973, -73.971007, "Video5"],
[40.718423, -73.957428, "Video6"],
[40.71817, -73.956918, "Video7"],
[40.681427, -73.993959, "Video8"]
];
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), {
title: title
});
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
//assign video div ID to overlay
$('#video1').overlay({
load: false,
top: "center",
left: "center"
});
//bind marker click event to overylay
markers.on('click', function () {
$("#video1").data("overlay").load();
});
Thank you,
Joey
http://jsfiddle.net/Joey84/nM458/26/
You are headed in the right direction with the markers.on("click"... function. You just need to make a few edits. Just as you added the event listener to the entire "markers" layer, you can add it to individual markers in your for loop.
...
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), {
title: title
});
if (title=="Video1") {
marker.on('click', function () {
$("#video1").data("overlay").load();
});
}
marker.bindPopup(title);
markers.addLayer(marker);
}
...
Likewise - and probably the better solution - you can access details about the marker you clicked in the on("click"... you are currently using by passing a variable to the function. This would be useful if you have multiple videos and don't want to check with an if statement when creating markers.
markers.on('click', function (d) {
// Grab marker title and make it look like an ID
var marker_title = "#" + d.layer.options.title.toLowerCase();
// Make sure the jQuery object exists
if ( $(marker_title) ){
// Call up the video.
$(marker_title).data("overlay").load();
}
});
Note that I used toLowerCase() because your data has the title capitalized and the video id is all lowercase.
Here it is in action:
http://jsfiddle.net/nM458/44/

Set Sencha Touch Map Location

Set Sencha Touch Map Location
Hi All, I am trying to simply set the Sencha Touch 2 map object to a specific zipcode. I an setting the config to to {useCurrentLoction: true} which works fine but after hours of research I can't seem to find a way to tell the map object to reposition to another city, or address or specifically a zipcode somewhere else in the US.
It looks like the Google API has these features but this include:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
Doesn't recognize the api calls that Google is using in their docs. Google says to get am API access key but this needs to run from multiple locations so I was hoping to achieve this without needing to get a key.
Has anyone been able to reposition the Sencha Touch 2 map object with the API accessed by the above (maps.google.com/maps/api/js?sensor=true) ?
Thanks!
Just include <script src="http://maps.google.com/maps/api/js?sensor=true"></script> in your HTML file
Then in your view create a xtype map, and then in the listener add an event painted like this:
listeners:
{
painted: function( component, eOpts ) {
console.log("Entered paint");
gotoAddress();
var map = Ext.getCmp('mymap');
map.setMapCenter(addr);
}
}
// Location function add the parameter as desired address to navigate.
// This also includes showing mapper and info window
function gotoAddress() {
var address = "enter the address required";
var map = Ext.getCmp('mymap');
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
addr= results[0].geometry.location;
map.setMapCenter(results[0].geometry.location);
marker.setMap(map.getMap());
marker.setPosition(results[0].geometry.location);
infowindow.setContent(address);
infowindow.open(map.getMap(),marker);
} else {
alert('Sorry Address could not be traced: ' + status);
}
});
}
Note: Paint is the event that gets called every time you navigate to page where you have used the map. Initialize event will be created only once when you create this page.

Draggable Marker to Update Lat and Long Fields

I wonder whether someone may be able to help me please.
I've put some coding together (please see below) whereby a user goes onto a HTML form, they type in an address and click a 'Search' button. Upon doing this, the location is plotted on the Google map and the Lat and Long co-oridnates are automatically entered into the associated text boxes on my form.
What I would like to do, if at all possible, is for the marker to be draggable so the user can fine tune the location, and as they drag the marker, I'd like for the Lat and Long fields to change their
associated co-ordinates.
In addition, I'd also like, if at all possible, to have a field on the form called 'NearestAddress' to show the nearest address to where the marker has been dragged to.
I've managed to make the markers draggable but they don't update the Latitude and Longitude text boxes. I'm also unsure how to add the functionality to show the updated address to where the marker has been dragged to.
(function() {
// Defining some global variables
var map, geocoder, myMarker, infowindow;
window.onload = function() {
// Creating a new map
var options = {
zoom: 3,
center: new google.maps.LatLng(55.378051,-3.435973),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
// Getting a reference to the HTML form
var form = document.getElementById('LocationSearchForm');
// Catching the forms submit event
form.onsubmit = function() {
// Getting the address from the text input
var address = document.getElementById('Address').value;
// Making the Geocoder call
getCoordinates(address);
// Preventing the form from doing a page submit
return false;
}
}
// Create a function the will return the coordinates for the address
function getCoordinates(address) {
// Check to see if we already have a geocoded object. If not we create one
if(!geocoder) {
geocoder = new google.maps.Geocoder();
}
// Creating a GeocoderRequest object
var geocoderRequest = {
address: address
}
// Making the Geocode request
geocoder.geocode(geocoderRequest, function(results, status) {
// Check if status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK) {
// Center the map on the returned location
map.setCenter(results[0].geometry.location);
// Creating a new marker and adding it to the map
var myMarker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable:true
});
document.getElementById('Latitude').value= results[0].geometry.location.lat();
document.getElementById('Longitude').value= results[0].geometry.location.lng();
google.maps.event.addListener(myMarker, 'dragend', function(evt){
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function(evt){
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
}
});
}
})();
I am new to Google maps development and I'm not even sure whether it's possible to achieve what I want. I've been working on this now for a few weeks and it's driving me a little crazy, so if someone could perhaps point me in the right direction it would gratefully be received.
Many thanks and kind regards
Chris
Instead of evt.latLng.lat().toFixed(3) you should just use the myMarker object and grab it's position.
Getting the nearest address is not that easy, but requires reverse geocoding, and to be honest I don't see the point in doing it. You would have to make special cases for the occurences where there couldn't be found a closest address and stuff like that.
If you really want to do it though there is a webservice you can call to do it.

Resources