I'm recently new in the google map api v3, and wanted to ask if there is any way I could trigger the street view mode just by clicking a link in my infoBox.
so far this is my code:
var map;
var marker;
var infowindow;
function HomeControl(controlDiv, map) {controlDiv.style.margin = '50px 0 0 0';}
function initialize() {
var location = new google.maps.LatLng(37.78391, -122.407157);
var mapOptions = {
center: location,
zoom: 18,
panControl: false,
scrollwheel: false,
zoomControl: false,
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
marker = new google.maps.Marker({position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
var boxText = document.createElement("div");
boxText.style.cssText = "margin-top: 26px; background: url('inc/images/infowindow-overlay.png') repeat left top; padding: 15px 20px;";
boxText.innerHTML = "<span class='pointing-arrow'></span><h2 class='adress-title'>San Francisco Center</h2><a href='#'>Centre Website</a><a href='#'>Street View</a>";
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-5, 0),
zIndex: null,
boxStyle: {width: "280px"}
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var image = 'inc/images/westfield-marker-logo.png';
marker = new google.maps.Marker({
position: location,
map: map,
title: 'Westfield HQ',
draggable: true,
icon: image
});
//infowindow.open(map,marker);
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(18);
map.setCenter(marker.getPosition());
ib.open(map, this);
});
var ib = new InfoBox(myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
now what I want to do is that, in the part where I initialize the boxText, and add the mark-up, i want the street view anchor tag to initialize the street view onclick.
I've found some options in the documentation like centering the map to the marker by clicking external links, but couldn't find any to activate the street view on click.
The way to handle a click event on an element inside an InfoBox (or an InfoWindow) is a little convoluted.
Here's a JSFiddle to demonstrate how it's done. DEMO
Basically, you write your click handler like this:
google.maps.event.addDomListener(ib.content_,'click',(function(marker) {
return function() {
openStreetView(); // Here's where you activate the StreetViewPanorama
}
})(marker));
I didn't include details about how to activate a StreetViewPanorama through code, since there's plenty of information on that subject in the Google Maps JS API Docs.
EDIT
I just realized that this handler runs anytime you click anything inside the InfoBox which is not exactly what you asked for. To achieve exactly what you want (event handler on the 'Street View' link inside the InfoBox), I had to use a little jQuery. Here's the updated fiddle: DEMO
Here, you create the content of the InfoBox as a jQuery element, so you can bind a click handler to the 'Street View' link. (I gave #swl as an id to that link, so I could find it with jQuery.)
var boxObj = $("<div style='margin-top: 26px; background: url('inc/images/infowindow-overlay.png') repeat left top; padding: 15px 20px;'><span class='pointing-arrow'></span><h2 class='adress-title'>San Francisco Center</h2><a href='#'>Centre Website</a><a href='#' id='swl'>Street View</a></div>");
boxObj.find('#swl').on('click', function(){
openStreetView();
});
It's not the prettiest code (you should create a css class and move all style definitions under that class) but it gets the job done. I'm sure you can clean it up and make it production worthy :)
Related
I'm trying to get an infobox to open after clicking an overlay(custom HTML marker).
This map shows a typical marker and a customer HTML marker. When I click the typical marker, the infobox opens correctly. When I click the custom HTML marker, the infobox doesn't open with error msg: TypeError: anchor.getPosition is not a function. This relates to the incorrect parameters I'm passing to infobox.open(). It expects a marker, but since I'm clicking an overlay (custom HTML marker), the parameter passed is incorrect.
How can I adjust the infobox.open() function so that it accepts my overlay as a parameter?
<!DOCTYPE html>
<html>
<style>
#map{
height: 600px;
width: 600px;
}
</style>
<body>
<div id="map"></div>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script src="....path/to/custom-html-markers-google-maps.js"></script>
<script>
var infobox = new InfoBox({
disableAutoPan: false,
maxWidth: 300,
pixelOffset: new google.maps.Size(-75, -70),
zIndex: null,
boxStyle: {width: '150px'},
infoBoxClearance: new google.maps.Size(15, 50)
});
function initialize() {
var loc = new google.maps.LatLng(-33.89, 151.26);
var locMarker = new google.maps.LatLng(-33.89, 151.23);
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: loc,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//This works FINE.. It sets the marker and infobox listener
var marker = new google.maps.Marker({
map: map,
position: locMarker,
visible: true
});
google.maps.event.addListener(marker, 'click', function() {
infobox.setContent('<div style="background-color:yellow">This is<br>an infobox.</div>');
infobox.open(map, this);
});
//Overlay from: http://humaan.com/custom-html-markers-google-maps/
var overlay = new CustomMarker(loc, map, {marker_id: '123'});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Part of Custom HTML Marker script:
google.maps.event.addDomListener(div, "click", function(event) {
infobox.setContent('<div style="background-color:yellow">Hi there</div>');
infobox.open(map, this); //*******THIS IS THE PROBLEM********
google.maps.event.trigger(self, "click");
});
My problem is infobox.open(map, this); is expecting a marker and I give it the "div". How can I adjust this function so that it accepts my div?
Full script: http://humaan.com/custom-html-markers-google-maps/
To use anything as an anchor for a marker, it needs to expose a latLng position property and an optional anchorPoint property.
from the documentation:
open(map?:Map|StreetViewPanorama, anchor?:MVCObject)
Return Value: None
Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.
I wasn't carrying the correct loc(lat/lng) and map into the function call.
Here is the revised listener:
google.maps.event.addDomListener(div, "click", function(event) {
var map = self.getMap();
var loc = self.latlng;
infobox.setContent('<div style="background-color:yellow">Hi there</div>');
infobox.openRevised(map, this, loc);
google.maps.event.trigger(self, "click");
});
Here is the revised infobox.open() function:
InfoBox.prototype.openRevised = function (map, anchor, loc) {
if (anchor) {
this.position_ = loc;
}
this.setMap(map);
};
I would like to be able to have my own 'street view' button using google maps api v3. When the button is clicked I want this to load street view based on my latlng of the marker. Then I would like the button to change to say 'Back to map' and this would then load the default map view again.
I am trying to use getStreetView(myLatlng) when the button is clicked but it's not loading the street view so I must be missing something here but I can't seem to find any help for this on the web. Here's my code:-
var map;
var myLatlng = new google.maps.LatLng(42.333029,-83.04559);
/**
* The HomeControl adds a control to the map that simply
* returns the user to Chicago. This constructor takes
* the control DIV as an argument.
* #constructor
*/
function customStreetView(controlDiv, map) {
// Offset from the corner
controlDiv.style.padding = '10px';
// Create control div
var controlUI = document.createElement('div');
controlUI.innerHTML = "View on street";
controlUI.className = "google_map_button"
controlDiv.appendChild(controlUI);
// Setup the click event listener
google.maps.event.addDomListener(controlUI, 'click', function() {
var panorama = map.getStreetView(myLatlng);
if(panorama){panorama.setVisible(false);}
});
}
function initialize() {
var mapOptions = {
zoom: 17,
center: myLatlng,
panControl: true,
zoomControl: true,
mapTypeControl: false,
scaleControl: true,
streetViewControl: false,
overviewMapControl: true
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Set the marker
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'images/google-map-marker.png'
});
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new customStreetView(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
google.maps.event.addDomListener(window, 'load', initialize);
}
</script>
Can anyone help?
Thanks
of course you must set visible to true when you want to show the panorama
the position will not be set via an argument of getStreetView(), you must set the property via set, setValues, setPosition or setOptions
google.maps.event.addDomListener(controlUI, 'click', function() {
map.getStreetView().setOptions({visible:true,position:myLatlng});
});
I have a google map embedded in xhtml. It has markers with popup InfoBoxes that I converted from InfoWindows to take advantage of layout control, but now I'm getting some inconsistent behavior. When the page first loads the infoBoxes all open normally with mouseover. But as I move around the map or move the cursor off the map and back on, they start behaving badly, sometimes they work, sometimes not.
/* map stuff */
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(41.40, -91.32),
mapTypeId: google.maps.MapTypeId.HYBRID
});
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
var marker;
/* load each marker with info */
function addEvents(lat, lng, markerInfo) {
/* set each marker */
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map
});
var iconFile = '#{request.contextPath}/img/pin.png';
marker.setIcon(iconFile);
/* infoBox properties - tried moving this to global, doesn't work */
var boxOpts = {
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
boxStyle: {
background: '#ffffff',
opacity: 1,
width: '180px'
},
closeBoxURL: '',
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: 'floatPane',
enableEventPropagation: true
};
var infobox = new InfoBox(boxOpts);
var html = '<div style="color:#333; font-size:12px; box-shadow: 12px 12px 8px 4px rgba(0,0,0,0.4);">' markerInfo + '</div>';
/* mouseover shows infoBox - only works sometimes, tried addListener as well */
google.maps.event.addDomListener(marker, 'mouseover', function(){
infobox.setContent(html);
infobox.open(map, this);
});
google.maps.event.addDomListener(marker, 'mouseout', function(){
infobox.close(map, this);
});
}
the addEvents function is called here:
<div id="myController" style="visibility: hidden;">
<rich:dataList var="eventAdd" value="#{some.resultList}">
<script type="text/javascript">
addEvents('<h:outputText value="#{eventAdd.latitude}"/>',
'<h:outputText value="#{eventAdd.longitude}"/>',
'<h:outputText value="#{eventAdd.markerInfo}"/>
);
</script>
There doesn't appear to be any pattern to why some work and some don't, it's not always the same ones. I can mouseover one and the infoBox shows, move to another and it doesn't, move back to the previous one and it doesn't show either.
ETA:
When I go back to InfoWindow, the popups show as expected.
I'm having trouble with v3 of the Google Maps API and using the InfoBox plugin specifically with respect to this usability issue use case:
Since my map requires a custom infobox to be opened upon hovering the mouse over each respective marker, when the map has 2 markers on it that are close in proximity, even when/if one of the markers lies behind an infobox that is currently open after hovering the other close-by marker, it is triggered when mousing over it marker (even though it's behind the currently open infobox) and the other infobox obstructs the currently/previously opened infobox
I've followed the question and answer process by another poster here: Google Maps API v3 Event mouseover with InfoBox plugin and have followed the recommended code, but i can't wrap my mind around how to prevent markers that lie BEHIND an open infobox to not be triggered until that infobox is closed.
var gpoints = [];
function initializeMap1() {
var Map1MileLatLang = new google.maps.LatLng(39.285900,-76.570000);
var Map1MileOptions = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
mapTypeControl: false,
zoom: 14,
center: Map1MileLatLang,
//mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeId: 'Styled'
};
var Map1Mile = new google.maps.Map(document.getElementById("map_canvas"), Map1MileOptions);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });//new
Map1Mile.mapTypes.set('Styled', styledMapType);//new
for ( var i=0; i<5; i++ ) {
gpoints.push( new point(Map1Mile) );
gpoints.push( new point2(Map1Mile) );
}
function popup(_point) {
_point.popup = new InfoBox({
content: _point.content,
pane: 'floatPane',
closeBoxURL: '',
alignBottom: 1
});
_point.popup.open(_point.marker.map, _point.marker);
google.maps.event.addListener(_point.popup, 'domready', function() {
//Have to put this within the domready or else it can't find the div element (it's null until the InfoBox is opened)
$(_point.popup.div_).hover(
function() {
//This is called when the mouse enters the element
},
function() {
//This is called when the mouse leaves the element
_point.popup.close();
}
);
});
}
function point(_map) {
this.marker = new google.maps.Marker({
position: new google.maps.LatLng(39.291003,-76.546234),
map: _map
});
this.content = '<div class="map-popup" style="width:100px;"><div class="map-popup-window"><div class="map-popup-content">Just try to click me!<br/>Hovering over this text will result in a <code>mouseout</code> event firing on the <code>map-popup</code> element and this will disappear.</div></div>';
// Scope
var gpoint = this;
// Events
google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
popup(gpoint);
});
}
function point2(_map) {
this.marker = new google.maps.Marker({
position: new google.maps.LatLng(39.295003,-76.545234),
map: _map
});
this.content = '<div class="map-popup" style="width:100px;"><div class="map-popup-window"><div class="map-popup-content">Just try to click me!<br/>Hovering over this text will result in a <code>mouseout</code> event firing on the <code>map-popup</code> element and this will disappear.</div></div>';
// Scope
var gpoint = this;
// Events
google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
popup(gpoint);
});
}
After doing experimenting, i suspect this issue is irrelevant to z-index... am i correct in understanding this needs to be caught in the javascript?
Any help or advice would be greatly appreciated!
Adding optimized: false attribute for your markers should solve the problem.
this.marker = new google.maps.Marker({
position: new google.maps.LatLng(39.295003,-76.545234),
map: _map,
optimized: false
});
not sure where the problem lies with this, i created a google map with custom markers a few months back using v3 of the api. the info windows were working back then.
i have been porting it onto a new site and cant get the info window to open, the js alerts in the right point when creating the click event but the click event does not fire all i can do is drag the map, so i looked at the last site i did, and its not working there either now.
so not sure how to fix this, the code i have to create ther info window is as follows:
markersArray.push(marker);
markersPosArray.push(myLatLng);
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(myData, marker) {
alert('creating listener for: '+marker);
// Creating the event listener. It now has access to the values of
// myData and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
//create thecontent for the infowindow
alert('creating info window');
var content = 'hello there'; //createContent(myData);
infowindow.setContent(content);
infowindow.open(map, marker);
});
})(myData, marker);
maybe something has changed in the api that i am unaware off?
the testpage can be seen at: http://www.disposalknowhow.com/locator.php
In the locator use the following to obtain results:
type: electrical/electronics - item: computers - radius: 100 - postcode: n11hl
the previous one i did that is not working either now can be seen at: http://www.focus-on-plants.com/locator_iconed.php
(can use any parameters here in the form)
UPDATE:
in reply to treffys answer:
the infowindow is defined when i create the map:
var myLatLng = new google.maps.LatLng(51.470, -0.00);
var bounds = new google.maps.LatLngBounds();
var geocoder = new google.maps.Geocoder();
var gotIcons = false;
var iconImageArray = {image:{}, size:{}, sizeX:{}, sizeY:{}, origin:{}, originX:{}, originY:{}, anchorpoint:{}, anchorpointX:{}, anchorpointY:{}};
var iconShadowArray = {image:{}, size:{}, sizeX:{}, sizeY:{}, origin:{}, originX:{}, originY:{}, anchorpoint:{}, anchorpointX:{}, anchorpointY:{}};
var iconShapeArray = {poly:{}, coord:{}};
var myIconArray = {icon:{}, shadow:{}, shape:{}}
var infowindow = new google.maps.InfoWindow();
var markersArray = []; // to store out markers
var markersPosArray = []; // to store lat/lang of markers for zooming function
var markersInfoArray = [];
// MAP OPTIONS
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
};//end map options
var map = new google.maps.Map(document.getElementById("loc_map"), myOptions);
I am using the following code to display an info bubble:
var info_pane = new google.maps.InfoWindow({
content: info,
disableAutoPan: false,
maxWidth: '300px'
});
info_pane.open(map, marker);