We Keep Coding

amCharts cursor zoom not working in OpenLayers map overlay

I added amCharts chart to OpenLayers map overlay but chart cursor zoom not work like the image provided below:
The example provided below:
// Overlays init variables and function
var container;
var content;
var closer = document.getElementById('popup-closer');
var overlay;
function createOverlay(width) {
container = document.getElementById('popup');
container.style.width = width;
content = document.getElementById('popup-content');
closer = document.getElementById('popup-closer');
return container;
}
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([51.338076, 35.699756]),
zoom: 12
})
});
map.on("click", function(e) {
let coordinates = e.coordinate;
createOverlay("500px");
content.innerHTML = '<div id="chartdiv" class="ltr"></div>';
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var chart = am4core.create("chartdiv", am4charts.XYChart);
var data = [];
var value = 50;
for(let i = 0; i < 300; i++){
let date = new Date();
date.setHours(0,0,0,0);
date.setDate(i);
value -= Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({date:date, value: value});
}
chart.data = data;
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 60;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}"
series.tooltip.pointerOrientation = "vertical";
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = dateAxis;
//chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarX = new am4core.Scrollbar();
}); // end am4core.ready()
$(".ol-popup").show();
overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanMargin: 20,
autoPanAnimation: {
duration: 50
}
});
map.addOverlay(overlay);
overlay.setPosition(coordinates);
});
/* ol PopUp */
.ol-popup {
text-align: right;
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
border-radius: 10px;
bottom: 12px;
transform: translateX(50%);
display: none;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 50%;
transform: translateX(-50%);
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 50%;
transform: translateX(-50%);
}
.ol-popup-closer {
text-decoration: none !important;
font-size: 16px;
position: absolute;
top: 5px;
right: 8px;
cursor: pointer;
}
.map {
height: 400px;
width: 100%;
}
#chartdiv {
width: 100%;
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/>
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
<i class="fas fa-times ol-popup-closer" id="popup-closer"></i>
<div id="popup-content" class="p-4"></div>
</div>
As you can see, I created a dynamic overlay and add it to map and when user click on map then overlay popup will be shown to the user after that chart created and the chart cursor zoom not work but in the other place of my website it works perfectly.

This occurs due to OpenLayers Overlay entity stopping the event propagation (e.g. click & drag event on chart)
This can be disabled very easily via stopEvent: false;
overlay = new ol.Overlay({
element: container,
stopEvent: false,
autoPan: true,
autoPanMargin: 20,
autoPanAnimation: {
duration: 50
}
});
More on OpenLayers Overlay
The problem with this is that, the same click & drag event will be propagated to the map in the back, and the selection of the chart will be impossible to do. Example of this trouble can be seen on this fiddle. Also there is a ticket on Github regarding this exact issue.
To resolve this I've used a very simple idea, to track when the cursor is on the overlay, and disable map events during those times;
var mouseOver = false;
function createOverlay(width) {
container = document.getElementById('popup');
container.style.width = width;
container.onmouseover = function() {
mouseOver = true; // when cursor is targeting overlay we enable this boolean
};
container.onmouseout = function() {
mouseOver = false; // and disable when out
};
...
}
Then using this boolean as following;
map.on("pointerdrag", function(e) {
if (mouseOver) {
e.stopPropagation();
return;
}
});
to disable dragging event, and;
map.on("click", function(e) {
if (mouseOver) {
return;
}
// rest of chart creation logic here
}
to disable a new overlay creation event.
Final perfectly working fiddle can be found
here
Pirooz bashi buddy

Custom style for a googlemaps info window (background)

I'm building a map with google maps and I have a problem. I'm trying to style the infowindow which is opened when some user will click on the pin. My problem is that it actually works but it is rendered with a strange effect on a father div of the window itself (when someone click multiple times on my window, the window display a weird white border, which is the color of the background of the father of my div with a class of gm-style-iw).
My code is the following:
MY JAVASCRIPT:
function initMap() {
var styledMapType=new google.maps.StyledMapType([{my custom style}]);
var mycompany = {lat: 44.348534, lng: -79.669197};
var map = new google.maps.Map(document.getElementById('map'), {
center: mycompany,
zoom: 14,
scrollwheel: false,
mapTypeControl: false
});
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
var contentString = '<div class="iw-content">' + '<div class="iw-subTitle">My company </div>' + '<p>455 street</p>' + '<p>City, World</p>' + '<p>Canada, Postalcode</p>' + '</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: mycompany,
map: map,
title: 'My company'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
google.maps.event.addListener(infowindow, 'domready', function() {
var iwOuter = $('.gm-style-iw');
var iwBackground = iwOuter.prev();
iwBackground.children(':nth-child(2)').css({'background' : '#252525'});
var iwmain = iwBackground.children(':nth-child(2)');
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
var iwCloseBtn = iwOuter.next();
});
}
initMap();
MY CSS:
#map .gm-style-iw {
background-color: #252525;
padding: 2% 11%;
}
#map .iw-content p {
color: #a5a5a5;
}
#map .iw-subTitle {
color: white;
font-size: 16px;
font-weight: 700;
padding: 5px 0;
}
Plus I want to style the weird triangle at the bottom of the map which is also white because of the native color of the background.
I'm gonna add a picture to explain as better my problem
Thank you in advance for any help

You need to use the following CSS attributes to correctly style the information window:
/*style the box which holds the text of the information window*/
.gm-style .gm-style-iw {
background-color: #252525 !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 120px !important;
padding-top: 10px;
display: block !important;
}
/*style the paragraph tag*/
.gm-style .gm-style-iw #google-popup p{
padding: 10px;
}
/*style the annoying little arrow at the bottom*/
.gm-style div div div div div div div div {
background-color: #252525 !important;
margin: 0;
padding: 0;
top: 0;
color: #fff;
font-size: 16px;
}
/*style the link*/
.gm-style div div div div div div div div a {
color: #f1f1f1;
font-weight: bold;
}
JSfiddle Example: http://jsfiddle.net/hLenqzmy/18/

I strongly recommend using Snazzy Info Window here. The accepted answer recommends a very hacky and undocumented approach, which might break as soon as Google updates their structure.
With Snazzy Info Window you can simply specify your attributes and then customize the styling even with SCSS:
let map = new google.maps.Map(document.getElementById('map-canvas'));
let latLng = new google.maps.LatLng(1, 1);
let marker = new google.maps.Marker({
position: latLng,
map: map
});
let headline = 'Amazing Location';
let content = 'Put your great great content here';
let info = new SnazzyInfoWindow({
marker: marker,
content: `<h1>${headline}</h1><span class="info-content">${content}</span>`,
closeOnMapClick: false,
pointer: false,
shadow: false,
});
And then add in your SCSS:
$si-content-bg: #000;
See https://github.com/atmist/snazzy-info-window/blob/master/examples/scss-styles/styles.scss for more styling options and here for the full example.
It's 2018 people, no need to beat yourself up by overwriting 10 times nested divs.

Esri MAP Showing ARE.StreetName instead of Actual street name or address.

I am using ESRI Map geocodes method to retrieve addresses of particulars pointer. e.g if a person clicked on streets of map, there will be an info window open with these informations. Adress, city and Address. other informations retrieving perfectly but in streets section it is showing USA.PointAddress. i don't know why this ${Loc_name} is not showing proper street and even city is also showing location. look at fiddle for reference.
Any help regarding this issue will be appriciated.
// Add Location MAP Code star from here //
/* Esri Map GeoLocation */
var map, gsvc, pt;
var o;
function getaddress() {
$("#txtIncidentLongitude").val(o.location.x);
$("#txtIncidentLatitude").val(o.location.y);
$("#txtIncidentStreet").val(o.address.Loc_name);
$("#txtIncidentArea").val(o.address.Neighborhood);
$("#txtIncidentCity").val(o.address.City);
$("#txtIncidentEmirate").val(o.address.Region);
};
require([
"esri/map", "esri/tasks/locator", "esri/graphic", "esri/tasks/GeometryService", "esri/tasks/ProjectParameters", "esri/SpatialReference", "esri/InfoTemplate", "esri/dijit/Search", "esri/geometry/webMercatorUtils", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/PictureMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", "dojo/number", "dojo/parser", "dojo/dom", "dojo/on", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function (
Map, Locator, Graphic, GeometryService, ProjectParameters, SpatialReference, InfoTemplate, Search, webMercatorUtils, SimpleMarkerSymbol, PictureMarkerSymbol, SimpleLineSymbol, Color, number, parser, dom, on, registry) {
parser.parse();
map = new Map("map", {
basemap: "streets",
center: [-74.6851, 40.6884],
zoom: 9
});
var locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
gsvc = new GeometryService("https://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
var search = new Search({
map: map
}, "search");
$('#search_input').attr('placeholder', 'Find Address');
search.startup();
search.on("select-result", showLocation);
function showLocation(e) {
map.graphics.clear();
var point = e.result.feature.geometry;
var ppy = point.getLatitude().toFixed(4);
var ppx = point.getLongitude().toFixed(4);
};
dojo.connect(map, "onClick", function (evt) {
map.graphics.clear();
var def = locator.locationToAddress(esri.geometry.webMercatorToGeographic(evt.mapPoint), 100);
def.then(function (candidate) {
if (candidate.address) {
o = candidate;
/*$("#txtIncidentStreet").val(o.address.Loc_name);
$("#txtIncidentArea").val(o.address.Neighborhood);
$("#txtIncidentCity").val(o.address.City);*/
var infoTemplate = new InfoTemplate("Location", "<table width='100%' class='m-t'><tr><td>Address: </td><td>${Address}</td></tr><tr><td>City: </td><td>${City}</td></tr><tr><td>Street: </td><td>${Loc_name}</td></tr></table><p style='margin:0' class='text-center'><a class='btn m-t btn-sm btn-primary' onClick='getaddress();' id='addloc' href='javascript:;'><i class='fa fa-plus-square'></i> Add Location</a></p>");
var symbol = new PictureMarkerSymbol({
"url": 'dist/images/active.png',
"height": 27,
"width": 16,
"yoffset": 12,
});
// this service returns geocoding results in geographic - convert to web mercator to display on map
var location = esri.geometry.geographicToWebMercator(candidate.location);
var graphic = new esri.Graphic(location, symbol, candidate.address, infoTemplate);
map.graphics.add(graphic);
map.infoWindow.setTitle(graphic.getTitle());
map.infoWindow.setContent(graphic.getContent());
//display the info window with the address information
var screenPnt = map.toScreen(location);
map.infoWindow.resize(300, 250);
map.infoWindow.show(screenPnt, map.getInfoWindowAnchor(screenPnt));
} else {
//no address found
console.log("No address found for this location");
}
}, function (error) {
var latitude = evt.mapPoint.getLatitude();
var longitude = evt.mapPoint.getLongitude();
map.infoWindow.setTitle("Location");
map.infoWindow.setContent(
"<strong>Address not Available</strong><br>" + "Latitude: " + latitude.toFixed(4) + "<br>Logitude: " + longitude.toFixed(4)
);
map.infoWindow.show(evt.mapPoint, map.getInfoWindowAnchor(evt.screenPoint));
console.log("error: " + error.message);
});
});
});
#map, .map.container {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#info {
top: 2px;
color: #444;
height: auto;
font-family: arial;
font-weight: bold;
left: 69px;
margin: 5px;
padding: 10px;
position: absolute;
width: 260px;
z-index: 40;
border: solid 1px #003300;
border-radius: 4px;
background-color: #E5E5E5;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 36px;
left: 74px;
}
/*Beginning of search box modifications*/
.arcgisSearch .searchClear {
background-color: #E5E5E5;
}
.arcgisSearch .esriIconZoom {
background-image: url("finding.png");
background-size: 20px 20px;
}
.esriIconZoom:before {
content: "";
}
.arcgisSearch .searchGroup .searchInput,
.arcgisSearch .searchBtn,
.arcgisSearch .noResultsMenu,
.arcgisSearch .suggestionsMenu {
border: 1px solid #003300;
background-color: #E5E5E5;
}
.arcgisSearch .noValueText {
color: red;
font-size: 14px;
}
/*Beginning of popup modifications*/
.esriPopup .titlePane {
background-color: #015a82;
border-bottom: 1px solid #121310;
font-weight: bold;
}
.esriPopup a {
color: #DAE896;
}
<link href="http://js.arcgis.com/3.16/esri/css/esri.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://js.arcgis.com/3.16/init.js"></script>
<div id="search"></div>
<div id="map"></div>

Multiple Event on a map Marker

html, body {
height: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
font-size: small;
}
#map {
width: 100%;
height: 60%;
}
#selection-map {
height: 40%;
width: 100%;
background-color: whitesmoke;
}
.selection-title {
height: 15%;
width: 15%;
margin: auto;
position: relative;
border-bottom: 3px solid #DA1A21;
font-size: 30px;
top: 30px;
color: #DA1A21;
}
.selection-form {
height: 20%;
width: 100%;
text-align: center;
top: 100px;
position: relative;
}
.selection-form input {
height: 20px;
width: 300px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SouthWest Airport Map</title>
<link rel="stylesheet" href="lib/ol3/ol.css" />
<link rel="stylesheet" href="ol3.css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="selection-map" class="map">
<h2 class="selection-title">Airports Selected</h2>
<form class="selection-form" method="post" action="traitement.php">
<p><input type="text" id="input-airports" placeholder="Click a marker" /></p>
<p>For Selecting Multiple Airpots, please press Shift and select all the markers that you need</p>
</form>
</div>
<script src="../common/lib/reqwest.min.js"></script>
<script src="lib/proj4.js"></script>
<script src="lib/ol3/ol.js"></script>
<script src="ol3.js"></script>
</body>
</html>
I implemented a map with markers pointing to airports, and when I click on a marker the name of the airport appears in a field. (All data included in a GEOJson external file). I just have a last problem that I can't resolve :
I can only select one marker at a time, and i want to be able to select multiples Markers, and make all the name appears in the field. I think that my problem are that I need to change the calling my features, but i don't know what to write instead. I already tried to change my function from "forEachFeatureAtPixel" to "forFeatureAtPixel" or things like that, but every time I break my map.
I'm a beginner in Javascript :/ Here is my JS code
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: '//localhost/osgis-ol3-leaflet-master/ol3/data.geojson'
}),
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
fill: new ol.style.Fill({
color: 'green'
})
})
})
});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
crossOrigin: ''
})
});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: [0, 0],
zoom: 3
})
});
var input = document.getElementById('id-airports');
var select_interaction = new ol.interaction.Select();
map.addInteraction(select_interaction);
select_interaction.on('select', function(evt) {
var features = select_interaction.getFeatures();
var value = '';
features.forEach(function(feature){
// change this to your own needs
value += feature.get('name') + ', ';
});
input.value = value;
});
map.on('pointermove', function(e) {
if (e.dragging) return;
var hit = map.hasFeatureAtPixel(map.getEventPixel(e.originalEvent));
map.getTarget().style.cursor = hit ? 'pointer' : '';
});

UPDATE:
(fiddle) — To select multiple use Shift + Click
You will remove that another approach:
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(
evt.pixel, function(ft, l) { return ft; });
if (feature) ...
});
And use ol.interaction.Select, see bellow.
There's a select interaction that you can add to your map with a lot of options, see ol.interaction.Select. You can set, for instance some conditions:
// only select with Mouse Hover
var select_interaction = new ol.interaction.Select({
condition: ol.events.condition.pointerMove
});
Another condition:
// only select with Alt key + Click
var select_interaction = new ol.interaction.Select({
condition: function(mapBrowserEvent) {
return ol.events.condition.click(mapBrowserEvent) &&
ol.events.condition.altKeyOnly(mapBrowserEvent);
}
});
In your case, putting all together would be something like:
var select_interaction = new ol.interaction.Select();
map.addInteraction(select_interaction);
// add a listener to know when features are selected
select_interaction.on('select', function(evt) {
var features = select_interaction.getFeatures();
features.forEach(function(feature){
// change this to your own needs
input.value += feature.get('name') + ', ';
});
});

Draggable Icons on a Google Map V3 - Set to Draggable=True, but can not drag it

I have everything working on this Google map V3 on how I would like it except for one last thing. Right now, If you load up the map, the map is able to search for a place and drag an icon from outside the map into the Google map. However, once the icon is inside the map, I am not able to drag it. I've search endlessly on where I went wrong on my code.
Below are a few examples of many that I read on:
Link1,
Link2, Link3, Link4 (Link 4 is what i need but could not connect the code after further inspection)
I feel I am very close but I believe I am just not declaring the right variables or not connecting them right. Below is the code and here is a FIddle that can give you a picture of my problem. (Try dragging the icon once and then dragging it again inside the map)
<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html {
height: 100%;
}
body {
height: 97%;
}
#map-canvas {
width: 70%;
height: 100%;
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -30%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#shelf {
position: absolute;
margin-right: 5px;
top: 25px;
left: 70%;
height: 98%;
width: 30%;
float: right;
}
#draggable {z-index:1000000000;}
#draggable2 {z-index:1000000000;}
#draggable3 {z-index:1000000000;}
.ecostation {
margin-left: auto;
margin-right: auto;
border: 1.0px solid #F0F0F0;
border-radius: 5.0px 5.0px 5.0px 5.0px;
width: 85%;
text-align: center;
}
#wrapper {
display: table-row;
border: 1.0px solid rgb(204,204,204);
border-radius: 5.0px 5.0px 5.0px 5.0px;
}
#wrapper div {
display: table-cell;
border-radius: 10.0px 10.0px 10.0px 10.0px;
width: 12.5%;
}
#wrapper div img {
display: block;
padding: 5.0px;
margin: 5.0px auto;
text-align: center;
}
#wrapper div h5, #wrapper div p {
text-align: center;
font-size: 11px;
margin-top: -10px;
font-weight: 800;
}
.title {
margin-left: 7%;
color: #F0F0F0;
font-weight: 600;
}
#target {
width: 345px;
}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
$("#draggable2").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
});
</script>
<script>
// This example adds a search box to a map, using the
// Google Places autocomplete feature. People can enter geographical searches.
// The search box will return a pick list containing
// a mix of places and predicted search terms.
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each plce, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// [END region_getplaces]
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>
<div id='shelf'>
<div class="ecostation">
<div id="wrapper">
<div>
<img src="https://cdn1.iconfinder.com/data/icons/mobile-development-icons/30/Map_marker.png" id="draggable" title="Estation Trash/Compost" alt="Estation Trash and Compost"/>
<p>Trash/Compost</p>
</div>
<div>
<img src="https://cdn1.iconfinder.com/data/icons/large-tab-bar-icons/30/Start_flag.png" id="draggable2" title="Estation Trash" alt="Estation Trash"/>
<p>Trash</p>
</div>
<div>
<img src="http://i1288.photobucket.com/albums/b489/Wallace_Adams/bth_facebook-icon-30x30_zpsb49e1af3.jpg" id="draggable3" title="Estation Recycling" alt="Estation Recycling"/>
<p>Recycle</p>
</div>
</div>
</div>
</div>
</html>
end of code
If you guys can let me know that would be great! Also, i noticed that marker is declared twice. Is that one of the problems? I tried declaring something else but had no luck.
I also came accross this code but not sure if it is helpful in this situation
var overlay;
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
Possibly thinking it has to do something with this piece of code below?
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
But then again, couldn't figure what was wrong with, am I connecting the variables correctly?
Help would be greatly appreciated, I am very close to finishing what I want to accomplish on this map

Check to make sure you are not using svg images for the icon. They seem to work on FireFox and Chrome, but not IE