I've happily implemented v2 of Google maps to my site without a hitch, I also successfully perform a drive directions using GDirections.load().
What I need to do is stop the popup of the mini map when you select a particular step in the routing directions. So when the user clicks on say "step 3", instead of the default popup showing a mini map, I'd like to add a custom icon to that position.
Hope it makes sense
Thanks in advance guys.
You need to add a handler on the GDirections object for the addoverlay event:
GEvent.addListener(gdir, "addoverlay", onGDirectionsAddOverlay);
When your onGDirectionsAddOverlay handler is called you can iterate through the new markers and replace them with copies that open your custom info window:
for (var i = 0; i <= gdir.getNumRoutes(); i++)
{
var originalMarker = gdir.getMarker(i);
latLngs[i] = originalMarker.getLatLng();
icons[i] = originalMarker.getIcon();
newMarkers[i] = new GMarker(latLngs[i], { icon: icons[i], draggable: true, title: 'Kan flyttes' });
map.addOverlay(newMarkers[i]);
// add stuff to your newMarkers[i] click event...
// ..
// Now we can remove the original marker safely
map.removeOverlay(originalMarker);
}
Related
The Google Maps documentation offers some customization of the StreetViewPanorama. However, what I'm using is the regular Google Maps Map, but with the option to go to Street view, as the StreetViewControl option is on.
Once the user goes into Street View on my Google Maps, the Street View shows default controls: A fullscreen button on the top right, and a back button with the address on the top left. But this is something my users don't quite intuitively understand (and frankly I don't blame them). I need a way to hide those controls, so I can substitute my own buttons.
I am familiar with detecting when a user has entered Street View, and I know how to show a button to have it exit Street View. What I don't know is, can I hide Google's default "back" button? I've tried using the properties of the StreetViewControl object straight into my Map object initialization, but it doesn't work; and understandably so, since some of the option names clash.
Per request, here is the code for showing the map, and showing/hiding my button that exits the Street view:
// Create a map object and specify the DOM element for display.
map = new google.maps.Map(document.getElementById('map'), {
center: this.mapCenter,
scrollwheel: true,
scaleControl: false,
overviewMapControl: false,
zoom: this.zoom
});
// Show the button for exiting Street View when Street view is entered
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function(){
if(this.getVisible() == true) {
document.getElementById("exitStreetViewButton").style.display = "block";
} else {
document.getElementById("exitStreetViewButton").style.display = "none";
}
});
And this is the code that the Exit button executes to exit the Street View:
map.getStreetView().setVisible(false);
You can use this option:
panorama.setOptions(
{
enableCloseButton:false
}
);
I just ran into the same problem. Disabling the UI doesn't work, the exit button is the only element (besides the legal stuff at the bottom) still there.
As far as the documentation goes there is no way to remove it. I resorted to hiding it using css:
.gm-iv-container {
display: none;
}
Have a look at the StreetViewPanoramaOptions.
Try the disableDefaultUI option. You can set it to true to disable the default UI then enable some controls individually if you need.
var panoramaOptions = {
disableDefaultUI: true
};
JSFiddle demo
Edit:
If you need you can also do it that way:
var panorama = map.getStreetView();
panorama.setOptions(panoramaOptions);
I have a spoke in my wheels and I am not sure how to sort this out. I have been struggling with it for a couple days and it isn't like a normal infobox as it is not set to a marker rather a polygon which is something new for me. I have polygons that display with data from an XML file and they show up fine. I have searched the web and got it to have the mouseover set up to where you mouseover a polygon the opacity changes and an infobox pops up. Problem is the infobox when it pop up shows "undefined" instead of the html I have set in it to display with data from the XML file.
Here is a link to the test map for example.
http://www.mesquiteweather.net/googlemap_poly.html
Here is a link to the XML file where I am just trying to show the elements events and expires in the info box.
http://www.mesquiteweather.net/xml/warnings_test.xml
This is the code I am working with to create the infoboxes and mouseover events
function attachPolygonInfoWindow(polygon, html, event, expires)
{
var html = "<strong>" + event + "</strong>";
eventWarnings.infoWindow = new google.maps.InfoWindow({content: html});
google.maps.event.addListener(eventWarnings, 'mouseover', function(e) {
var latLng = e.latLng;
this.setOptions({fillOpacity:80});
polygon.infoWindow.setPosition(latLng);
polygon.infoWindow.open(map);
});
google.maps.event.addListener(eventWarnings, 'mouseout', function() {
this.setOptions({fillOpacity:0.35});
polygon.infoWindow.close();
});
}
var polygon = new google.maps.Polygon(/* omitted for brevity */);
attachPolygonInfoWindow(eventWarnings);
eventWarnings.setMap(map);
}
});
I am pretty sure it is something easy I am overlooking but I haven't been able to find anything that pertains to my issue. I am just lucky I got the infobox to show at all as I have learned it's tricky since polygons don't have a true center and they are not set up like you would with a marker which I can handle.
If anyone has any suggestions please let me know.
-Thanks
You defined your attachPolygonInfoWindow function with 4 argument, but only provide one when you call it:
// definition
function attachPolygonInfoWindow(polygon, html, event, expires)
...
// call
attachPolygonInfoWindow(eventWarnings);
Probably you want (I don't see the html or expires parameters being used):
attachPolygonInfoWindow(eventWarnings, "", event, null);
The other option would be to change the definition to:
// definition
function attachPolygonInfoWindow(polygon, event, expires)
and the call to (assuming you are going to use "expires" for something):
attachPolygonInfoWindow(eventWarnings, event, expires);
As it doesn't look like you need to pass in that parameter (event is serving the function that I would expect it to serve).
Also, FYI, you have a "hanging comma" in your alertColors.js which make IE unhappy...
example
I'm creating a Google Map from the developer API v3. It's populated with markers created dynamically from ColdFusion querying an MsSQL database.
<cfloop query="One">
<script>locations[<cfoutput>#One.userID#</cfoutput>
] = new google.maps.LatLng(<cfoutput>#One.latLng#</cfoutput>);
</script>
</cfloop>
I need a way to recognise the marker when its clicked so I can display address details in a box below the map and also higlight markers when a button is clicked lower on the page.
In general, you would typically assign your own custom properties to the Marker. Something like:
function markerClicked(e) {
console.log('Marker ' + marker.myData + ' has been clicked');
}
var marker = new google.maps.Marker(...);
marker.myData = 1; //this could be arbitrary data or even another object
google.maps.event.addListener(marker, 'click', markerClicked);
Adding custom data to any Google Maps API object has risks though. Google's code is obfuscated and the internal (non-documented) properties can and do change. Make sure your property is named in such a way that it won't conflict with any existing property or future property. Tip: Choose a property name longer than 3 letters.
If you are going to minify/compile/compress your maps code, then there are additional considerations.
What about :
google.maps.event.addListener(marker, "click", function (e) {
var clicked = this;
//...
});
This is pretty thoroughly documented/explained in the documentation.
https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows
When you create markers, add dom listeners to the markers like this
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
I did draggable directions according to Google manual:
ren = new google.maps.DirectionsRenderer( {'draggable':true} );
ser = new google.maps.DirectionsService();
google.maps.event.addListener(ren, 'directions_changed', function() {
// here I can load map, etc... everything works.
});
But, what should I do, if I want to change route options before next drag. I want exactly toggle avoidHighways and avoidTolls to true/false.
Is it even possible or not?
Both properties are options of a directionsRequest, so you'll have to request the route again(based on the current origin/destination) with the desired options.
I have a map with a google marker, but I would like to do some fun things with it like post a link in there, and format the text there to have an information item per line instead of all in one line.
Is that possible? If so, then what can be done and how? :)
Here is my current boring map and marker at the bottom of this page:
http://www.comehike.com/outdoors/parks/trailhead.php
You could do:
<script...
var marker = new GMarker(point);
map.addOverlay(marker);
var myHtml = "<your html here/>";
GEvent.addListener(marker, 'mouseover', function() {
map.openInfoWindow(point, myHtml);
};
.../>
where
<your html here/>
is what you want to show, for example image and contact info or something.
That is if you want the info window opened on mouseover event. You could either open it by default by calling that function ( map.openInfoWindow(point, myHtml) ) right away.
Hope that helps.