I am working with a Mapbox GL map, similar to something like Leaflet or OpenLayers. For this case, I have allowed a click on the map to activate a popup with text from an attribute of that element of the map. I want this click to also update a variable, img_start, which contains a key for an image in street level view. I have the following code inside my <script></script> inside the <body>. The map element is inside the <div id="map"> and the variable img_start is inside <div id="mly">. So I want a click on the map to update the img_start variable, then refresh the mly div. How can I achieve this, and what am I doing wrong?
Specific code I'm referring to:
map.on('click', function (e) {
//change img_start variable, right now just a test to see if the new value will load
img_start = 'lGQKs30MWMrNJnTjDz-2Ig';
//refresh the 'mly' div so the new start image appears
$("#mly").load(location.href + " #mly");
var features = map.queryRenderedFeatures(e.point, { layers: ['parcels-layer'] });
if (!features.length) {
return;
};
var feature = features[0];
var popup = new mapboxgl.Popup()
.setLngLat(map.unproject(e.point))
//displays the TaxIDNum of the parcel
.setHTML(feature.properties.TaxIDNum)
.addTo(map);
});
// Indicate that the symbols are clickable by changing the cursor style
map.on('mousemove', function (e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['parcels-layer'] });
map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});
Full code of my HTML document, with the image viewer at the bottom:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Kelleys Island Parcels Demo</title>
<meta content='initial-scale=1,maximum-scale=1,user-scalable=no' name=
'viewport'>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.24.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.24.0/mapbox-gl.css' rel='stylesheet' />
<script src="jquery-1.12.4.min.js"></script>
<link href=
"https://npmcdn.com/mapillary-js#1.4.1/dist/mapillary-js.min.css" rel=
"stylesheet">
<style>
body {
width: 1350px;
height: 480px;
background-color: black;
}
a:link{
color: ##e60000;
text-decoration: none
}
a:visited{
color: ##e60000;
text-decoration: none
}
a:hover{
color: ##e60000;
text-decoration: none
}
a:active{
color: orange;
text-decoration: none
}
.title {
color: white;
font-family: "Century Gothic";
font-size: 24px;
text-align: center;
font-weight: bolder;
}
.intro {
color: white;
font-family: "Century Gothic";
font-size: 14px;
text-align: center;
}
.mly-wrapper {
position: relative;
background-color: grey;
width: 100%;
height: 100%;
}
.mapillary-js {
position: relative;
height: 100%;
width: 50%;
}
#map {
position: absolute;
width: 50%;
top: 0;
right: 0;
bottom: 0;
z-index: 100;
}
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="title">
Kelleys Island Parcels
</div>
<div class="intro">
<br>
Placeholder info
</div><br>
<div class="mly-wrapper">
<div id='mly'></div>
<div id='map'></div>
</div><button onclick="play()">Play</button><button onclick=
"stop()">Stop</button>
<script src=
"https://npmcdn.com/mapillary-js#1.4.1/dist/mapillary-js.min.js">
</script>
<script>
window.img_start = 'KXPQhn74azgtjJYcrGK-Fw';
mapboxgl.accessToken = 'pk.eyJ1IjoiY2JlZGRvdyIsImEiOiI5Q09YRG1RIn0.Izu6OPJ4CEEaSSpGuys3Xg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-82.69965,41.60116],
zoom: 12
});
map.on('load', function () {
map.addSource('parcels', {
'type': 'geojson',
'data': 'https://gist.githubusercontent.com/cbeddow/0bb1a957326cab0aec649e0dea3b978d/raw/f1069a486982efd0898cb915a7f39284fdd43321/kelleys_island.geojson'
});
// Add a layer showing the parcel polygons.
map.addLayer({
'id': 'parcels-layer',
'type': 'fill',
'source': 'parcels',
'source-layer': 'parcels-layer',
'paint': {
'fill-color': 'rgba(200, 100, 240, 0.4)',
'fill-outline-color': 'rgba(200, 100, 240, 1)'
}
});
});
// When a click event occurs on a polygon, open a popup at the location of
// the feature, with description HTML from its properties.
map.on('click', function (e) {
//change img_start variable, right now just a test to see if the new value will load
img_start = 'lGQKs30MWMrNJnTjDz-2Ig';
//refresh the 'mly' div so the new start image appears
$("#mly").load(location.href + " #mly");
var features = map.queryRenderedFeatures(e.point, { layers: ['parcels-layer'] });
if (!features.length) {
return;
};
var feature = features[0];
var popup = new mapboxgl.Popup()
.setLngLat(map.unproject(e.point))
//displays the TaxIDNum of the parcel
.setHTML(feature.properties.TaxIDNum)
.addTo(map);
});
// Indicate that the symbols are clickable by changing the cursor style
map.on('mousemove', function (e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['parcels-layer'] });
map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});
var mly = new Mapillary.Viewer('mly',
'UTZhSnNFdGpxSEFFREUwb01GYzlXZzpkMWM2YzdjYjQxN2FhM2Vh', // ClientID
img_start, {cover: true, cache: false, direction: false});
</script>
</body>
</html>
Related
I am creating a web app that has mulitple tabs. I want to have the google maps script in each tab, displaying the map etc.. Im getting the error: You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors. When trying to use it like so:
In index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>West Chester Places</title>
<link rel="stylesheet" type="text/css" href="css.css">
<link rel="icon" type="image/x-icon" href="mapIcon.png">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAc0XJsW7RZN6i2BbKsEVBX5ONt2rKkQGY"></script>
</head>
<body style="padding: 20px">
<div class="tabContainer">
<div class="buttonContainer">
<button onclick="showPanel(0,'#7851a9')"><strong>Food</strong></button>
<button onclick="showPanel(1,'#7851a9')"><strong>Bars/Nightlife</strong></button>
<button onclick="showPanel(2,'#7851a9')"><strong>Other</strong></button>
<button onclick="showPanel(3,'#7851a9')">Tab 4</button>
</div>
<div class="tabPanel">
<style type="text/css">
html { height: auto; }
body { height: auto; margin: 0; padding: 0 }
#infobox { margin: 0px }
#map-canvas { height: 460px }
</style>
<script type="text/javascript" src="mapapi.js"></script>
<div class ="centerText">
<center>
<p>Come take a look at my favorite places in West Chester!</p>
<p>Fun with Google Maps API <font size="3">(Source Code Here)</font></p>
</center>
</div>
<div id="map-canvas"></div>
</div>
<div class="tabPanel">
<style type="text/css">
html { height: auto; }
body { height: auto; margin: 0; padding: 0 }
#infobox { margin: 0px }
#map-canvas { height: 460px }
</style>
<script async defer type="text/javascript" src="mapapi.js"></script>
<div class ="centerText">
<center>
<p>Come take a look at my favorite places in West Chester!</p>
<p>Fun with Google Maps API <font size="3">(Source Code Here)</font></p>
</center>
</div>
<div id="map-canvas"></div>
</div>
<div class="tabPanel">
<style type="text/css">
html { height: auto; }
body { height: auto; margin: 0; padding: 0 }
#infobox { margin: 0px }
#map-canvas { height: 460px }
</style>
<script async defer type="text/javascript" src="mapapi.js"></script>
<div class ="centerText">
<center>
<p>Come take a look at my favorite places in West Chester!</p>
<p>Fun with Google Maps API <font size="3">(Source Code Here)</font></p>
</center>
</div>
<div id="map-canvas"></div>
</div>
<div class="tabPanel">
<style type="text/css">
html { height: auto; }
body { height: auto; margin: 0; padding: 0 }
#infobox { margin: 0px }
#map-canvas { height: 460px }
</style>
<script async defer type="text/javascript" src="mapapi0.js"></script>
<div class ="centerText">
<center>
<p>Come take a look at my favorite places in West Chester!</p>
<p>Fun with Google Maps API <font size="3">(Source Code Here)</font></p>
</center>
</div>
<div id="map-canvas"></div>
</div>
</div>
<script src="myScript.js"></script>
</body>
</html>
In mapapi.js:
function initialize() {
var mapOptions = {
center: {
lat: 39.9545904,
lng: -75.6029956
},
zoom: 16
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var bonBonInfo = new google.maps.InfoWindow({
content: '<div id="infobox">' +
'<h1>Square One Bar</h1><h2>1400 S Michigan Ave</h2>' +
'</div>'
});
var masInfo = new google.maps.InfoWindow({
content: '<div id="infobox">' +
'<h1 class="title">My Home!</h1><h2>18th St & Michigan ave</h2>' +
'</div>'
});
var loveAgainInfo = new google.maps.InfoWindow({
content: '<div id="infobox">' +
'<h1 class="title">Dusek\'s Punch Bar</h1><h2>1227 W 18th Street</h2>' +
'</div>'
});
var diaDoceInfo = new google.maps.InfoWindow({
content: '<div id="infobox">' +
'<h1 class="title">Mercer 113</h1><h2>113 W Hubbard Street</h2>' +
'</div>'
});
var bonBon = new google.maps.Marker({
position: {
lat: 39.959006,
lng: -75.607625
},
map: map,
title: 'Bon Bon Sushi'
});
var mas = new google.maps.Marker({
position: {
lat: 39.960265,
lng: -75.603004
},
map: map,
title: 'Más Mexicali Cantina'
});
var loveAgain = new google.maps.Marker({
position: {
lat: 39.958445,
lng: -75.605327
},
map: map,
title: 'Love Again Local'
});
var diaDoce = new google.maps.Marker({
position: {
lat: 39.958586,
lng: -75.603630
},
map: map,
title: 'Dia Doce Gourmet Cupcakes'
});
google.maps.event.addListener(bonBon, 'click', function() {
GuidedTour();
});
google.maps.event.addListener(mas, 'click', function() {
GuidedTour();
});
google.maps.event.addListener(loveAgain, 'click', function() {
GuidedTour();
});
google.maps.event.addListener(diaDoce, 'click', function() {
GuidedTour();
});
function GuidedTour() {
diaDoceInfo.close(map, loveAgain);
map.panTo(mas.getPosition());
masInfo.open(map, mas);
window.setTimeout(function() {
map.panTo(bonBon.getPosition());
masInfo.close(map, mas);
bonBonInfo.open(map, bonBon);
}, 6000)
window.setTimeout(function() {
map.panTo(loveAgain.getPosition());
bonBonInfo.close(map, bonBon);
loveAgainInfo.open(map, loveAgain);
}, 11000)
window.setTimeout(function() {
map.panTo(diaDoce.getPosition());
loveAgainInfo.close(map, loveAgain);
diaDoceInfo.open(map, diaDoce);
}, 16000)
}
}
google.maps.event.addDomListener(window, 'load', initialize);
...
In myScript.js:
var tabButtons = document.querySelectorAll(".tabContainer .buttonContainer button");
var tabPanels = document.querySelectorAll(".tabContainer .tabPanel");
function showPanel(panelIndex, colorCode) {
tabButtons.forEach(function(node) {
node.style.backgroundColor = "";
node.style.color = "";
});
tabButtons[panelIndex].style.backgroundColor = colorCode;
tabButtons[panelIndex].style.color = "white";
tabPanels.forEach(function(node) {
node.style.display = "none";
});
tabPanels[panelIndex].style.display = "block";
tabPanels[panelIndex].style.backgroundColor = colorCode;
}
showPanel(0, '#7851a9');
css.css:
.title{
font-family: arial;
color: #000000;
text-align: center;
}
.tabContainer{
width: 100%;
height: 350px;
}
.tabContainer .buttonContainer{
height: 15%;
}
.tabContainer .buttonContainer button{
width: 25%;
height: 100%;
float: left;
border: none;
outline:none;
cursor: pointer;
padding: 10px;
font-family: arial;
font-size: 18px;
background-color: #eee;
}
.tabContainer .buttonContainer button:hover{
background-color: #d7d4d4;
}
.tabContainer .tabPanel{
height: 85%;
background-color: gray;
color: white;
text-align: center;
padding-top: 25px;
padding-bottom: 700px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 22px;
display: none;
}
.centerText {
font-size: 5;
font-family: arial;
padding-bottom: 25px;
}
How do I use the same script/key for my multiple tabs?
It looks like you are including two different versions of the same script. Instead of:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE"></script>
<script type="text/javascript" src="mapapi.js"></script>
You want to choose one of those lines. I'm guessing the first one if you are making more than one API call.
I fixed this by making a new map variable in another mapapi file:mapapi0.js which I called map0. Then I needed to change #map-canvas { height: 460px }and <div id="map-canvas"></div> to a map canvas with a new id in index.html.
I'm working on a image gallery based on OpenSeaDragon, and I'd like to be able to use overlays in collection mode. Based on the various examples on the OSD website (http://openseadragon.github.io/) I managed to hack together a minimal working example, but there are several issues I've not been able to fix (see https://jsfiddle.net/7ox0hg9L/).
First, the on/off overlay toggle works fine, but if I pan/zoom the image the overlay reappears, even though toggle-off deletes the element from the DOM using parentNode.removeChild().
Second, I can't seem to get the overlay tooltips to work consistently on the first page, and they never appear on the following pages. The tooltip on the radiobutton label works fine on any page though, so I'm not sure why the tooltips on the overlays do not.
Any suggestion would be welcome. Please bear in mind that I am new to javascript. Thanks!
EDIT: iangilman's answer below and his edits on jsfiddle put me back on track, and helped me create the gallery I had in mind. I post here the full solution for those who may need similar features. Thanks Ian!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.3.1/openseadragon.min.js"></script>
<style>
body {
margin: 0;
color: #333;
font-family: Helvetica, Arial, FreeSans, san-serif;
background-color: #121621;
}
.openseadragon{
width: 800px;
height: 600px;
border: 1px solid black;
color: #333;
background-color: black;
}
.highlight{
opacity: 0.4;
filter: alpha(opacity=40);
outline: 6px auto #0A7EbE;
background-color: white;
}
.highlight:hover, .highlight:focus{
filter: alpha(opacity=70);
opacity: 0.7;
background-color: transparent;
}
.nav {
cursor: pointer;
display: inline-block;
font-size: 25px;
}
.controls {
text-align: center;
display: table;
background-color: #eee;
table-layout: fixed;
width: 800px;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="controls">
<label class="labels"><input id="showOverlays" type="checkbox"><a id="selector" title="">Show overlays</a></label>
<a class="nav previous" title="Previous" id="prv"> < </a>
<a class="nav next" title="Next" id="nxt"> > </a>
</div>
<div id="example-runtime-overlay" class="openseadragon" />
<script type="text/javascript">
var tileSource = {
Image: {
xmlns: "http://schemas.microsoft.com/deepzoom/2008",
Url: "http://openseadragon.github.io/example-images/highsmith/highsmith_files/",
Format: "jpg",
Overlap: "2",
TileSize: "256",
Size: {
Height: "9221",
Width: "7026"
}
}
};
var runtimeViewer = OpenSeadragon({
id: "example-runtime-overlay",
prefixUrl: "openseadragon/images/",
showSequenceControl: true,
sequenceMode: true,
nextButton: "nxt",
previousButton: "prv",
tileSources: [{
tileSource: tileSource,
overlay: [{
id: 'example-overlay',
x: 0.43,
y: 0.47,
width: 0.15,
height: 0.20,
className: 'highlight',
caption: 'Nice painting'
}]
},{
tileSource: tileSource,
overlay: [{
id: 'example-overlay',
x: 0.65,
y: 0.05,
width: 0.12,
height: 0.12,
className: 'highlight',
caption: 'Milton'
}]
}]
});
var page = 0;
runtimeViewer.addHandler("page", function (data) {
page = data.page;
});
$('.next').click(function() {
radio.prop('checked', false);
});
$('.previous').click(function() {
radio.prop('checked', false);
});
var radio = $('#showOverlays')
.prop('checked', false)
.change(function() {
if (radio.prop('checked')) {
var overlay = runtimeViewer.tileSources[page].overlay[0];
var elt = document.createElement("div");
elt.id = overlay.id;
elt.className = overlay.className;
elt.title = "";
$(elt).tooltip({
content: overlay.caption
});
runtimeViewer.addOverlay({
element: elt,
location: new OpenSeadragon.Rect(overlay.x, overlay.y, overlay.width, overlay.height)
});
} else {
var overlay = runtimeViewer.tileSources[page].overlay[0];
var element = document.getElementById(overlay.id);
if (element) {
runtimeViewer.removeOverlay(element);
delete element;
}
}
});
$(function() {
$(document).tooltip();
});
</script>
</body>
</html>
Looks like you're off to a good start!
You're correctly adding the overlays with addOverlay, so you need to remove them with removeOverlay:
runtimeViewer.removeOverlay(element);
For the tooltips, unfortunately OpenSeadragon's event handling can interfere with jQuery, so you'll have to use the OpenSeadragon MouseTracker:
function bindTooltip(elt) {
new OpenSeadragon.MouseTracker({
element: elt,
enterHandler: function(event) {
// Show tooltip
},
exitHandler: function(event) {
// Hide tooltip
}
}).setTracking(true);
}
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') + ', ';
});
});
I am creating javascript web application using google maps. i am trying to create a tool for zoomin and zoomout option.i created two buttons for zoomin and zoomout, now i am trying to activate the tools. while i am using this tool for zoomin and zoomout option then it will zoomin and out operations on map. I am trying this code
<button name="button" value="" type="button" id="zoomin" onclick="document.getElementById('mapviewer').change(); clicked"></button>
<div id="mapviewer">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
},
zoomControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById('mapviewer'),
mapOptions);
map.setOptions({draggable: false, zoomControl: false, scrollwheel: false, disableDoubleClickZoom: true});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function performClick(elemId) {
var elem = document.getElementById(elemId);
if(elem && document.createEvent) {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, false);
elem.dispatchEvent(evt);
}
}
</script>
</div>
using this page as reference [blog]: How to add the pan tool within the iframe?
Now i am trying to write a script for zoomin option and if i click the button then the select arrow changed to zoom icon and it will zoom in the google map.Please provide me some code reference for this task
Map Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../include.css" />
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<title>Textual Zoom Control (Maps API v3)</title>
<style type="text/css">
html, body { height:100%; width: 100%; }
#map {
float: left;
margin: 0 25px 10px 14px;
width: 64%;
height: 70%;
border: 1px solid gray;
}
#desc {
float: left;
margin: 0 25px 10px 20px;
width: 14em;
}
#zoomcontrol {
position: absolute;
top:172px; left:71%;
}
#media screen and (max-width: 890px) {
body, html, #map {
margin: 0;
}
#map {
width: 100%;
height: 50%;
}
#desc {
margin: 0 14px;
width: 93%;
}
.include >b {
float: right;
margin-top: 17px;
}
#zoomcontrol {
position: absolute;
top: 70%;
left: 41%;
}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.j
s"></script>
<![endif]-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1Wwh21ce7jnB6yDbjVGN3LC5ns7OoOL4&sensor=false">
</script>
<script type="text/javascript">
/* A TextualZoomControl is a GControl that displays
* textual "Zoom In" and "Zoom Out" buttons.
*/
function TextualZoomControl(map) {
/* Creates a one DIV for each of the buttons and places them in a container
* DIV which is returned as our control element. We add the control
* to the map container and return the element for the map class to
* position properly.
*/
var g = google.maps;
var control = document.createElement("div");
control.id = "zoomcontrol";
var zoomInDiv = document.createElement("div");
this.setButtonStyle_(zoomInDiv);
control.appendChild(zoomInDiv);
zoomInDiv.appendChild(document.createTextNode("Zoom In"));
g.event.addDomListener(zoomInDiv, "click", function() {
map.setZoom(map.getZoom()+1);
});
var zoomOutDiv = document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
control.appendChild(zoomOutDiv);
zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
g.event.addDomListener(zoomOutDiv, "click", function() {
map.setZoom(map.getZoom()-1);
});
/* Instead of appending it to the map container
* append it to body of the document
*/
document.body.appendChild(control);
return control;
}
// Set the proper CSS for the given button element.
TextualZoomControl.prototype.setButtonStyle_ = function(button) {
button.style.textDecoration = "underline";
button.style.color = "#0000cc";
button.style.backgroundColor = "white";
button.style.fontSize = "smaller";
button.style.border = "1px solid gray";
button.style.padding = "2px";
button.style.marginBottom = "3px";
button.style.textAlign = "center";
button.style.width = "6em";
button.style.cursor = "pointer";
}
function loadMap() {
var g = google.maps;
var opts_map = {
zoom: 10,
center: new g.LatLng(53.55486, 9.98989),
disableDefaultUI: true,
scrollwheel: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: g.MapTypeControlStyle.DEFAULT
},
mapTypeId: g.MapTypeId.ROADMAP
};
var map = new g.Map(document.getElementById("map"), opts_map);
// Add self created control
var zoom_control = new TextualZoomControl(map);
zoom_control.index = 1;
}
window.onload = loadMap;
</script>
</head>
<body>
<h3>Textual Zoom Control</h3>
<div id="map"></div>
</body>
</html>
This code will work for zoom in and zoom out tool option using click button
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