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') + ', ';
});
});
Related
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>
I'm trying to understand how can I display markers/popups on osm map with openlayers3, I have found examples in examples on ol3 web page, but...
Is there more examples for coding markers/popups with javascript or jquery, preferably something like this or similar examples.
The idea is to mark a building, by clicking on the marker it will popup some info for the building, further more I would like to connect important places from the city to this building (library, restaurants, bus stops, etc). I wish if someone can explain me how to start up building this, and I don't want to use bootstrap3 for this ( I have seen overlay example), instead want pure html5, css3, javascript/jquery)
You can create a popup with pure HTML, CSS and JavaScript, as shown in the popup example. A fully working example for what you want is here: http://jsfiddle.net/ahocevar/z86zc9fz/1/.
The HTML for the popup is simple:
<div id="popup" class="ol-popup">
<div id="popup-content"></div>
</div>
The CSS is a bit more involved:
.ol-popup {
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));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 80px;
}
.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: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
To make a popup, use ol.Overlay:
var container = document.getElementById('popup');
var overlay = new ol.Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
map.addOverlay(overlay);
var closer = document.getElementById('popup-closer');
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
To make features clickable, use
var content = document.getElementById('popup-content');
map.on('singleclick', function(evt) {
var name = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
return feature.get('name');
});
var coordinate = evt.coordinate;
content.innerHTML = name;
overlay.setPosition(coordinate);
});
For visual feedback when the pointer is over a feature, use
map.on('pointermove', function(evt) {
map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
});
The features (i.e. markers) come from a vector layer:
var markers = new ol.layer.Vector({
source: new ol.source.Vector({
features: [
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([16.37, 48.2])),
name: 'Vienna',
type: 'City'
}),
new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.13, 51.51])),
name: 'London',
type: 'City'
})
]
}),
style: new ol.style.Style({
image: new ol.style.Icon({
src: '//openlayers.org/en/v3.12.1/examples/data/icon.png',
anchor: [0.5, 1]
})
})
});
map.addLayer(markers);
The above snippet uses a fixed style, i.e. the same icon for all types of features. If you have different types of features, you can define a style function instead of a fixed style:
var cityStyle = new ol.style.Style({
image: new ol.style.Icon({
src: '//openlayers.org/en/v3.12.1/examples/data/icon.png',
anchor: [0.5, 1]
})
});
var otherStyle = new ol.style.Style({
image: new ol.style.Icon({
src: '//openlayers.org/en/v3.12.1/examples/data/Butterfly.png'
})
});
var markers = new ol.layer.Vector({
// ...
style: function(feature, resolution) {
if (feature.get('type') == 'City' {
return cityStyle;
}
return otherStyle;
}
});
I'm trying to use the Places search functionality of Google Maps API.
My problem is, the search box shifts and the height of the API container changes after the map is completely loaded.
I've made a demonstration of the problem. Try refreshing the page and you'll observe the above mentioned behaviour.
I found similar questions and the suggestions were --
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
or
window.onload = map_initialize;
However, neither of them seem to solve this shift behaviour.
One option would be to set the input to display:none, add it to the map on the idle event, then display it.
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
google.maps.event.addListenerOnce(map, 'idle', function() {
input.style.display = "block";
});
proof of concept fiddle
code snippet:
// This example adds a search box to a map, using the Google Place 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 initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -33.8688,
lng: 151.2195
},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
google.maps.event.addListenerOnce(map, 'idle', function() {
input.style.display = "block";
});
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
var icon = {
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.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
google.maps.event.addDomListener(window, 'load', initAutocomplete);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#target {
width: 345px;
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box" style="display:none">
<div id="map"></div>
You can simply use the defer attribute for your <script> tag where you loading the google maps JS api, and a callback function to initialize your map.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google map demo</title>
<style type="text/css">
html,
body,
#map_canvas {
width: 100%;
height: 700px;
margin: 0;
padding: 0;
}
.infowindow * {
font-size: 90%;
margin: 0
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initialize" defer></script>
</head>
<body>
<div id="map_canvas"></div>
</body>
<script type="text/javascript">
function initialize() {
alert("map api loaded");
// initialize map
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(37.422104808, -122.0838851)
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</html>
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
this is my first post here so I apologize if I make a newbie faux pas.
I've got a Google Fusion Table layer that I have on top of a map. I created it by importing a KML file. Everything works great, but last week I realized that the InfoWindow is now displaying all of the vertices of the relevant polygon in the geometry field.
The strange thing is that these vertices do not display in the actual Fusion Table but only on the layer on top of the map. I suspect something might be going on with the JavaScript code, which I am very new to, or perhaps the new API for the Fusion Tables.
I removed the body section to get around some formatting issues on this page, but here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Georgia Areas</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; weight: 100% }
#search-panel {
position: absolute;
` top: 10px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#address {
width: 345px;
}
#instruction {
position: fixed;
float: right;
bottom: 10px;
right: 20px;
width: 375px;
z-index: 4;
background-color: #fff;
padding: 7px;
border: 1px solid #999;
font-family:"Arial";
}
p.small {font-size: small}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyARy6zbLmjvq3uaPjI--s45afA0LA-ynnA&sensor=false">
</script>
<script type="text/javascript">
var infoWindow = new google.maps.InfoWindow();
var input = document.getElementById('address');
var geocoder;
var gaCentroid;
var gaBounds;
var myMap;
function myclick(num) {
google.maps.event.trigger(markers[num], "click");
}
function initialize() {
geocoder = new google.maps.Geocoder();
gaCentroid = new google.maps.LatLng(32.900000, -83.22671);
gaBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(30.34,-85.652),
new google.maps.LatLng(35.01,-80.85)
);
var mapOptions = {
center: gaCentroid,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
myMap = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var lyr = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1Bgo94POIxKwQOOltuFbaAW6CpjQqPvYLVSqXuLk'
},
styles: [{
polygonOptions: {
fillColor: '0xDEEBF7',
fillOpacity: 0.1
}
}]
});
lyr.setMap(myMap);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode({'address':address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myMap.setCenter(results[0].geometry.location);
myMap.fitBounds(results[0].geometry.viewport)
var marker = new google.maps.Marker({
map: myMap,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function reCenter() {
var currentCenter = myMap.getCenter();
google.maps.event.trigger(myMap, 'resize');
myMap.setCenter(currentCenter);
}
</script>
</head>
</html>
Can anyone shed some light on this?
Thanks,
Ryan
You can configure the content shown in the infowindow.
See this page in the Fusion Tables Help
You must define the templateId to have the same content for the infoWindow.
Add this to the options passed to the layer:
templateId:2
I ended up changing the code to reference another Fusion Tables Layer. All I changed was the ID. This seems to work with the new layer, but I still do not know what happened to display the geometry in the InfoWindow.
If it happens again, I will most likley attempt Dr.Molle's suggestion.