Can't implement two infoboxes with google maps api - html

I'm using the infobox plugin in the google maps api to create customized infoboxes for places, yet it's only working for the first one (the one named "west").
When I replicate the code for it using different coordinates and names, it doesn't open when I click the marker.
Here's the code:
function initMap() {
var west = {
lat: 39.288682,
lng: -74.565635
};
var firststreetbeach = {
lat: 39.2807806,
lng: -74.5575138
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: west,
mapTypeId: google.maps.MapTypeId.HYBRID,
styles: [
{ featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }]}]
});
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: west,
visible: true
});
marker.setTitle("west");
var firststreetbeachMARKER = new google.maps.Marker({
position: firststreetbeach,
map: map
});
firststreetbeachMARKER.setTitle("First Street Beach");
var boxText = document.createElement("div");
boxText.style.cssText = "border: 4px solid black; margin-top: 8px; background: deepskyblue; padding: 3px;";
boxText.innerHTML =
`<h1><div style="font-family: 'Permanent Marker', cursive;">
west</div></h1><p>
<b>Sick Place</b></p>`
var firststreetbeachBOX = document.createElement("div");
firststreetbeachBOX.style.cssText = "border: 4px solid black; margin-top: 8px; background: deepskyblue; padding: 3px;";
firststreetbeachBOX.innerHTML =
`<h1><div style="font-family: 'Permanent Marker', cursive;">
First Street Beach</div></h1><p>
<b>Guarded Beach, Can Only Be Surfed Before The Life Guards Show Up, Or After.(Life Guards On Duty 10Am-5:30PM Starting May 25-End Of Summer)</b></p>`
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-120, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.90,
width: "235px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "https://lh3.google.com/u/0/d/1vBKI8gNIslaOItFoenaRADfZ3Mh4hrM5=w50-h48-p-k-nu-iv1",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function(e) {
ib.open(map, this);
});
var ib = new InfoBox(myOptions);
ib.open(map, this);
map.panTo(ib.getPosition())
var myOptionsa = {
content: firststreetbeachBOX,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-120, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.90,
width: "235px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "https://lh3.google.com/u/0/d/1vBKI8gNIslaOItFoenaRADfZ3Mh4hrM5=w50-h48-p-k-nu-iv1",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(firststreetbeachBOX, "click", function(e) {
ib.open(map, this);
});
var id = new InfoBox(myOptionsa);
id.open(map, this);
map.panTo(id.getPosition())
}
google.maps.event.addDomListener(window, 'load', initMap);
JSFIDDLE: https://jsfiddle.net/kaidemarco/06wpx75j/228/

I get a javascript error on your fiddle: Uncaught TypeError: anchor.getPosition is not a function. You have a number of typos in your code:
firststreetbeachBOX is an InfoBox, not a google.maps.Marker. That should be firststreetbeachMARKER.
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.open(map, this);
});
should be:
google.maps.event.addListener(firststreetbeachBOX, "click", function(e) {
ib.open(map, this);
});
Currently there is only one InfoBox reference ib. If you only want one to open on clicks, that is fine, but if you want the correct content, you need to reset the options in the onclick function:
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.open(map, this);
});
should be:
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.setOptions(myOptionsa);
ib.open(map, this);
});
In the ib.open(map, this) calls that are outside of the onclick function, the this is not a valid anchor. That should be the appropriate google.maps.Marker object:
// the first should be:
ib.open(map, marker);
// the second should be:
id.open(map, firststreetbeachMARKER);
proof of concept fiddle
code snippet:
function initMap() {
var west = {
lat: 39.288682,
lng: -74.565635
};
var firststreetbeach = {
lat: 39.2807806,
lng: -74.5575138
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: west,
mapTypeId: google.maps.MapTypeId.HYBRID,
styles: [{
featureType: "poi",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}]
});
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: west,
visible: true
});
marker.setTitle("west");
var firststreetbeachMARKER = new google.maps.Marker({
position: firststreetbeach,
map: map
});
firststreetbeachMARKER.setTitle("First Street Beach");
var boxText = document.createElement("div");
boxText.style.cssText = "border: 4px solid black; margin-top: 8px; background: deepskyblue; padding: 3px;";
boxText.innerHTML =
`<h1><div style="font-family: 'Permanent Marker', cursive;">
west</div></h1><p>
<b>Sick Place</b></p>`
var firststreetbeachBOX = document.createElement("div");
firststreetbeachBOX.style.cssText = "border: 4px solid black; margin-top: 8px; background: deepskyblue; padding: 3px;";
firststreetbeachBOX.innerHTML =
`<h1><div style="font-family: 'Permanent Marker', cursive;">
First Street Beach</div></h1><p>
<b>Guarded Beach, Can Only Be Surfed Before The Life Guards Show Up, Or After.(Life Guards On Duty 10Am-5:30PM Starting May 25-End Of Summer)</b></p>`
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-120, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.90,
width: "235px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "https://lh3.google.com/u/0/d/1vBKI8gNIslaOItFoenaRADfZ3Mh4hrM5=w50-h48-p-k-nu-iv1",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function(e) {
ib.setOptions(myOptions);
ib.open(map, this);
});
var ib = new InfoBox(myOptions);
ib.open(map, marker);
map.panTo(ib.getPosition())
var myOptionsa = {
content: firststreetbeachBOX,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-120, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.90,
width: "235px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "https://lh3.google.com/u/0/d/1vBKI8gNIslaOItFoenaRADfZ3Mh4hrM5=w50-h48-p-k-nu-iv1",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.setOptions(myOptionsa);
ib.open(map, this);
});
var id = new InfoBox(myOptionsa);
id.open(map, firststreetbeachMARKER);
map.panTo(id.getPosition())
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
.action-btns {
float: left;
width: 70px;
overflow: hidden;
position: relative;
top: 12px;
left: 6px;
}
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library#master/infobox/src/infobox.js"></script>
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">

Related

Google Maps API get place text like on iframe map

So I have found a couple of ways to get maps onto my page, the first version is by using an iframe like so:
<iframe src="https://www.google.com/maps/embed/v1/place?key=[APIKEY]&q=place_id:[PlaceID]"></iframe>
which gives a marker like the following image with the name of the place next to the marker:
However, this isn't perfect as it has that massive white box in the top left and according to many SO posts, you are unable to remove it.
So I thought I would try the js route so have the following code:
var map = new google.maps.Map(this, {
zoom: 15,
center: { lat: options.latitude, lng: options.longitude }
});
marker = new google.maps.Marker({
map: map,
title: options.title
});
marker.setPlace({
placeId: options.placeId,
location: { lat: options.latitude, lng: options.longitude }
});
var infowindow = new google.maps.InfoWindow(
{
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
Where all the options are filled in with proper values. However, this produces the following map which is better as it doesn't have the white box:
However, the second map doesn't have the shop text on the map even though it is using the same place id as the first one is.
Is there any way to change the js code so that it will include the place text like in the iframe version? I have searched all the documentation and examples but couldn't find any setting to do this
You can add that label to the map yourself. One option is to use an InfoBox:
function addMapLabel(text, latlng, map) {
var labelText = "<b>" + text + "</b>";
var myOptions = {
content: labelText,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "8pt",
width: "auto",
color: "#800000"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(10, -10),
position: latlng,
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
}
proof of concept fiddle
code snippet:
function addMapLabel(text, latlng, map) {
var labelText = "<b>" + text + "</b>";
var myOptions = {
content: labelText,
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "8pt",
width: "auto",
color: "#800000"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(10, -10),
position: latlng,
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
}
var map;
var options = {
placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
latitude: 53.7153659,
longitude: -1.8790866,
title: "Dickies Tiles",
address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 15,
center: {
lat: options.latitude,
lng: options.longitude
}
});
marker = new google.maps.Marker({
map: map,
title: options.title
});
marker.setPlace({
placeId: options.placeId,
location: {
lat: options.latitude,
lng: options.longitude
}
});
var infowindow = new google.maps.InfoWindow({
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
addMapLabel(options.title, new google.maps.LatLng(options.latitude, options.longitude), 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"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>
Just in case anyone else needs this type of thing, I found a better plugin than the infobox one in my accepted answer (although I am leaving that as the accepted as it pointed me in the right direction). It is:
MarkerWithLabel.
It offers the same as InfoBox but also lets you click on the label, as you would the marker, to open the info window
An example of how I used it would be:
var map;
var options = {
placeId: "ChIJ68TmaaTCe0gRy70pZDzQ17U",
latitude: 53.7153659,
longitude: -1.8790866,
title: "Dickies Tiles",
address: "Aachen Way, Halifax HX1 3ND, United Kingdom"
}
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 15,
center: {
lat: options.latitude,
lng: options.longitude
}
});
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(options.latitude, options.longitude),
map: map,
title: options.title,
labelContent: options.title,
labelAnchor: new google.maps.Point(-13, 15),
labelClass: "map-label",
labelStyle: {
border: 'none',
textAlign: 'center',
fontSize: '12px',
width: 'auto',
color: '#800000'
}
});
marker.setPlace({
placeId: options.placeId,
location: {
lat: options.latitude,
lng: options.longitude
}
});
var infowindow = new google.maps.InfoWindow({
content: '<strong>' + options.title + '</strong><br />' + options.address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
.map-label { text-shadow: -1px -1px 0 #ffffff,1px -1px 0 #ffffff,-1px 1px 0 #ffffff,1px 1px 0 #ffffff; font-weight:bold; }
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas"></div>

how to place infowindow for the label on google map

I am plotting the markers on google map using infobox.js not using https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple which is working fine the code is as shown below
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
</style>
<script>
var map;
var AutoCircle = [
{
"latitude": '21.170931',
"longitude": '72.855607',
},
{
"latitude": '21.192533',
"longitude": '72.848750',
},
{
"latitude": '21.190178',
"longitude": '72.797578',
}
];
function initMap() {
// Create the map.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat:21.181272, lng:72.835066},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
addLabel(AutoCircle);
}
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
function addLabel(circleArray){
for (var i=0;i<circleArray.length;i++) {
var circleData = circleArray[i]
var circleLatlng = new google.maps.LatLng(circleData.latitude, circleData.longitude);
// Add the circle for this city to the map.
var myOptions = {
content: 300+"*"+"<br>autos",
boxStyle: {
background: '#FFFFFF',
color: 'red',
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -10), // left upper corner of the label
position: new google.maps.LatLng(circleArray[i].latitude,
circleArray[i].longitude),
closeBoxURL: "",
isHidden: false,
pane: "floatPane",
zIndex: 100,
enableEventPropagation: true
};
var ib = new InfoBox(myOptions);
ib.open(map);
}
}
google.maps.event.addDomListener(window, "load", initMap);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
how to add the infowindow which we click on the label
Please help
I couldn't make it work with a dynamically rendered div from a text string (if you use the domready event, you should be able to access the node by its id, not sure why that doesn't work), If I create the <div> as a DOM node, I can add a listener to it.
code snippet:
function addLabel(circleArray) {
for (var i = 0; i < circleArray.length; i++) {
var circleData = circleArray[i]
var circleLatlng = new google.maps.LatLng(circleData.latitude, circleData.longitude);
// Create div for infoBubble
var div = document.createElement("div");
// create text node
var text = document.createTextNode(300 + "*" + "\nautos\n" + circleData.content);
// append text to div
div.appendChild(text);
// add click listener to div
google.maps.event.addDomListener(div, 'click', (function(i, latLng) {
return function() {
infowindow.setContent('clicked on ' + i);
infowindow.setPosition(latLng);
infowindow.open(map);
}
}(i, circleLatlng)));
var myOptions = {
content: div, // use DOM node for content
boxStyle: {
background: '#FFFFFF',
color: 'red',
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -10), // left upper corner of the label
position: new google.maps.LatLng(circleArray[i].latitude,
circleArray[i].longitude),
closeBoxURL: "",
isHidden: false,
pane: "floatPane",
zIndex: 100,
enableEventPropagation: true
};
var ib = new InfoBox(myOptions);
ib.open(map);
}
}
var map;
var infowindow = new google.maps.InfoWindow();
function initMap() {
// Create the map.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 21.181272,
lng: 72.835066
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
addLabel(AutoCircle);
}
google.maps.event.addDomListener(window, "load", initMap);
var AutoCircle = [{
"latitude": '21.170931',
"longitude": '72.855607',
"content": "content0"
}, {
"latitude": '21.192533',
"longitude": '72.848750',
"content": "content1"
}, {
"latitude": '21.190178',
"longitude": '72.797578',
"content": "content2"
}];
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map"></div>
If I understand your code correctly, the 'label' you refer to is an instance of the InfoBox class, which according to its docs, "fires the same events as a google.maps.InfoWindow":
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
So you should be able to do something like:
var infowindow = new google.maps.InfoWindow({
content: 'foo'
});
ib.addListener('click', function() {
infowindow.open(map, this);
});

I want to customize the infowindow of googlemap I don't want to use an infobubble

I want to remove the edge of the infowindow so there is no withe around the picture. like in this picture!
infowindow
I have to use an infobox to make it work like this:
function initialize() {
var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);
var myMapOptions = {
zoom: 14,
center: secheltLoc,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
var marker = new google.maps.Marker({
map: map,
draggable: true,
position: new google.maps.LatLng(49.47216, -123.76307),
visible: true
});
var marker2 = new google.maps.Marker({
map: map,
draggable: true,
position: new google.maps.LatLng(49.47016, -123.76007),
visible: true
});
var boxText = document.createElement("div");
boxText.style.cssText = "border: none; margin-top: 6px; background: green; color: black; padding: 5px;";
boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var boxText2 = document.createElement("div");
boxText2.style.cssText = "border: none; margin-top: 6px; background: green; color: black; padding: 5px;";
boxText2.innerHTML = "test2<br>test2<br>test2<br>test2<br>test2<br>test2<br>test2<br>";
var myOptions2 = {
content: boxText2
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox();
google.maps.event.addListener(marker, "click", function (e) {
ib.close();
ib.setOptions(myOptions)
ib.open(map, this);
});
google.maps.event.addListener(marker2, "click", function (e) {
ib.close();
ib.setOptions(myOptions2)
ib.open(map, this);
});
}
http://jsfiddle.net/neo3000ultra/9jhAy/

How to remove the arrow in the Google infoBox?

Hi I am going to use infoBox instead of infoWindow and InfoBubble. I can remove the arrow of the infoBubble with the property arrowSize: 0..... But I cant remove the arrow of my infoBox. Here is my code...
<html>
<head>
<title>Street View service</title>
<style>
.infobox-wrapper {
display:none;
}
#infobox {
border:0px solid black;
margin-top: 8px;
background:#000000;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: .5em 1em;
-webkit-border-radius: 10px;
-moz-border-radius: 2px;
border-radius: 14px;
text-shadow:0 -1px #000000;
-webkit-box-shadow: 0 0 8px #000;
box-shadow: 0 0 8px #000;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script>
function initialize()
{
var fenway = new google.maps.LatLng(13.064043, 80.243705);
var mapOptions = {
center: fenway,
zoom: 14
};
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
// MAP
var panorama = new google.maps.StreetViewPanorama(document.getElementById('map'), panoramaOptions);
// MARKER
var markerSample = new google.maps.Marker({
position: new google.maps.LatLng(13.063982175280051,80.24356022683605),
//position: new google.maps.LatLng(12.925487288255711, 80.25075146336849),
//icon : iconLocation,
//draggable : isDraggable,
map: panorama
});
// info window start here.
var infowindow = new InfoBox({
content: document.getElementById("infobox"),
disableAutoPan: true,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.75,
width: "320px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
});
var contentString = '<div id="infobox">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">LOA Softwares</h1>'+
'<div id="bodyContent">'+
'<p><b>Just Development</b>' +
'<p>shenicinfo.com dfdlkf dj kfdfjkdlkfj</p>'+
'<p>Attribution: Uluru, loa softwares df dg dfgdfgldfjdn ogfdn'+
'software developemts</p>'+
'</div>'+
'</div>';
infowindow.setContent(contentString);
google.maps.event.addListener(markerSample, 'click', function () {
//infowindow.setMap(panorama);
console.log('clicked');
//$("#mySampleDialogBox").dialog();
infowindow.open(panorama,markerSample);
// infowindow.setMap(panorama);
console.log("InfoWindow Crossed ...");
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
</body>
</html>

Google Maps Infobox click through to another marker

I am attempting to stop events from firing when an infoBox is opened. The issue is when the Infobox is rendering ontop of other markers, users have the ability to click through the InfoBox and click on the markers behind it. Is there a way to prevent this while still being able to click on a marker not behind the infobox?
dropInfoBox = new InfoBox({
content: document.getElementById("pinDrop"),
disableAutoPan: false,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
color: 'white',
background: '#101010',
width: "90px"
},
infoBoxClearance: new google.maps.Size(1, 1)
});
dropInfoBox.open(map, marker);
$('.infoBox > img').css('height', '');
$('.infoBox').click(function (evt) {
evt.stopPropagation();
});
Set enableEventPropagation to false.
enableEventPropagation | boolean | Propagate mousedown, mousemove, mouseover, mouseout,
mouseup, click, dblclick, touchstart, touchend, touchmove, and contextmenu events in the
InfoBox (default is false to mimic the behavior of a google.maps.InfoWindow). Set
this property to true if the InfoBox is being used as a map label.
dropInfoBox = new InfoBox({
enableEventPropagation: false,
content: document.getElementById("pinDrop"),
disableAutoPan: false,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
color: 'white',
background: '#101010',
width: "90px"
},
infoBoxClearance: new google.maps.Size(1, 1)
});
dropInfoBox.open(map, marker);
code snippet:
var map = null;
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
var infobox = new InfoBox({
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
});
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.901458523676155,
8.381676499999912),
zoom: 15
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map.data, 'addfeature', function(e) {
if (e.feature.getGeometry().getType() === 'Point') {
var marker = new google.maps.Marker({
position: e.feature.getGeometry().get(),
title: e.feature.getProperty('name'),
map: map
});
google.maps.event.addListener(marker, 'click', function(marker, e) {
return function() {
var myHTML = e.feature.getProperty('name');
boxText.innerHTML = "<div style='text-align: center;height: 100px'><b>" + myHTML + "</b><br>This is an InfoBox</div>";
infobox.setPosition(e.feature.getGeometry().get());
infobox.setOptions({
pixelOffset: new google.maps.Size(-140, -20)
});
infobox.open(map);
};
}(marker, e));
if (e.feature.getProperty('name') == "Guetersloh") {
clickMarker(marker);
}
}
});
layer = map.data.addGeoJson(geoJson);
map.data.setMap(null);
google.maps.event.addListener(map, "click", function() {
infobox.close();
});
}
function clickMarker(marker) {
setTimeout(function() {
google.maps.event.trigger(marker, 'click');
}, 1000);
}
google.maps.event.addDomListener(window, 'load', initialize);
var geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "Guetersloh"
},
"geometry": {
"type": "Point",
"coordinates": [8.383353, 51.902917]
}
}, {
"type": "Feature",
"properties": {
"name": "Guetersloh2"
},
"geometry": {
"type": "Point",
"coordinates": [8.38, 51.9]
}
}]
};
html,
body,
#map {
width: 100%;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map"></div>
simply add optimized:false parameter when creating the markers and problem solved!