I have static images of map areas and I need to display them with a clickable marker overlay with multiple dynamic markers on it. The markers have to correspond to specific geo locations. I will know the geo coordinates of the markers, but they will change frequently.
The static images HAVE to be displayed without any of the surrounding areas visible (and- NO zoom, no drag, no pan etc). For example, a map of a state in the USA with NO bordering states and multiple, specifically placed, clickable markers. This makes it impossible to use google maps api as is even with map style customization (at least for the actual map display).
So my question(s) is/are:
Is there a way to do this while still leveraging the google map api marker functionality? Or will I have to rewrite my own version of the marker functionality (click, info box etc)?
Is there a way to load the google map with the markers and then dynamically "swap" the google map with my static one?
Picture this:
(source: nebdev.net)
Where the markers are clickable and positioned based on specific geo codes.
your answers are:
Yes.
Yes.
Disable controls: https://developers.google.com/maps/documentation/javascript/examples/control-disableUI
Stylized map markers: https://developers.google.com/maps/documentation/javascript/examples/icon-complex
Listening to click/DOM events: https://developers.google.com/maps/documentation/javascript/examples/event-domListener
I'm interested in this quesiton. But I'm afraid you cannot make what you want.
At lease, you can try these things with Google Maps:
1. Specify the bounds you need (to match your static image) -- Google API
2. Add markers -- Google API
3. Disable draggable and ScrollWheelZoom -- Google API
4. Add click event on markers -- Google API
5. Replace the map with your static image -- Google API
The problem will be the 1st step, which you can hardly specify the bounds of Google Map as exactly to the area of your static image.
You can specify an area on Google Map though, like area layer , but basically the outer space will still be a rectange(Google Map itself and LatLngBounds)
Ok, I think I got it to work. The concept is pretty simple:
Create a non-Google Map overlay OVER the map area to hide the gmap as it's loading. I had to do this because otherwise, the marker wouldn't load correctly.
Once the map and marker(s) are loaded, remove all images from inside the map element.
Set the background image of the map element to our custom map
Remove the overlay that was obscuring the map area.
Demo: http://web2.nebdev.net/tasks/sandbox/t1234.html
Here is the code (it may explain things better than I am):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
//$('#map-canvas').hide();
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
disableDefaultUI: true,
draggable: false,
disableDoubleClickZoom: true,
keyboardShortcuts: false,
mapTypeControl: false,
noClear: true,
overviewMapControl: false,
panControl: false,
rotateControl: false,
scaleControl: false,
scrollwheel: false,
streetViewControl: false,
zoomControl: false
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(marker,'click',function() {alert('Click')});
//google.maps.event.addDomListener(marker,'mouseover',function() {alert('Mouseover')});
google.maps.event.addDomListener(map,'idle',removeMaps);
}
function removeMaps() {
window.setTimeout(function(){
$('img','#map-canvas').remove();
$('.gm-style-cc,.gmnoprint .gm-style-cc,.gmnoprint').remove()
$('#map-canvas').show();
$('#map-canvas').attr('style','background:url(http://web2.nebdev.net/tasks/sandbox/untitled4.png) no-repeat top left transparent');
$('#map-canvas-overlay').hide();
console.log(marker.getVisible());
},1000);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:400px;height:400px;"></div>
<div id="map-canvas-overlay" style="width:400px;height:400px;background:url() #CCC;position:absolute;top:0px;left:0px;z-index:10000">Loading...</div>
</body>
</html>
Related
I am using Mapbox GL JS, embedding a map into Wordpress, via plug-in Page Builder-Custom HTML.
HTML
<div id='map'></div>
<script>
mapboxgl.accessToken = '*******';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
center: [144.9509223,-37.8253897], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
CSS
#map { position:static; }
However, the logo always goes out of the grid. Mapbox and 'i' button actually spread full page width. I reckon there is a mapbox css I need to deeply reach to.
I can't use mapbox plugin, as the map will have javascript for user interaction. Any suggestions, please? Thanks.
changed to Google Maps, now works like a charm...
Is there a way to change the zIndex of a groundOverlay?
With Geoxml3 I am parsing two KML files, one of them contains a polygon and the other one contains a groundOverlay. Everythings goes perfect except for the fact that i want my groundOverlay OVER the polygon, because now the groundOverlay appears behind the polygon.
Update:
This is my 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>Geoxml3</title>
<style>
html{height:100%;}
body{height:100%;margin:0px;}
#map_canvas{height: 90%;width: 90%;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/trunk/ProjectedOverlay.js">
</script>
</head>
<body>
<div id="map_canvas"></div>
</div>
<script type="text/javascript">
var geoXml=null, map=null;
function initialize() {
var myOptions = {
center: new google.maps.LatLng(39.397, -100.644),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geoXml = new geoXML3.parser({
map: map,
zoom: true,
createOverlay: addMyOverlay
});
geoXml.parse(['groundOverlay.kml','polygon.kml']);
function addMyOverlay(placemark,doc){
//How to change the the GroundOverlay zIndex
var groundOverlay = geoXml.createOverlay(placemark);
return groundOverlay;
};
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
The test is here:
http://jorgeluisperez.260mb.net/geoxml/
Probably the easiest way would be to specify zIndex for GroundOverlay once the map is loaded:
google.maps.event.addListenerOnce(map, 'idle', function(){
var overlayDiv = document.getElementById(groundOverlay.id_);
overlayDiv.style.zIndex = '999';
console.log(overlayDiv);
});
Note: groundOverlay should be accessible from event
Working example: Plunker
The ProjectedOverlay class which is used to render GroundOverlays in geoxml3 attaches the overlays to the overlayLayer. That is the same pane in which polygons are rendered. The OverlayView class doesn't support zIndex, and the zIndex supported by Polygons specifically states it is only good between "polys". It is possible that the order of adding the Polygons vs. the GroundOverlays might change that, but a quick test didn't work. You could modify the ProjectedOverlay code to append the overlay to a pane above the overlayLayer.
from the documentation on MapPanes:
This object contains the DOM elements in which overlays are rendered. They are listed below with 'Pane 0' at the bottom and 'Pane 4' at the top.
Properties
floatPane | This pane contains the info window. It is above all map overlays. (Pane 4).
mapPane | This pane is the lowest pane and is above the tiles. It may not receive DOM events. (Pane 0).
markerLayer | This pane contains markers. It may not receive DOM events. (Pane 2).
overlayLayer | This pane contains polylines, polygons, ground overlays and tile layer overlays. It may not receive DOM events. (Pane 1).
overlayMouseTarget | This pane contains elements that receive DOM events. (Pane 3).
Is there a way to set the transparency of a kml layer when you add it? I am adding a kml layer that you cannot see through to the streets below. Is there a way to accomplish this
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'images/test3.kml'
});
var ctaLayer2 = new google.maps.KmlLayer({
url: 'images/test.kml'
});
var ctaLayer3 = new google.maps.KmlLayer({
url: 'images/kmztest2.kmz'
});
ctaLayer3.setMap(map);
ctaLayer2.setMap(map);
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
As KML are added by Google Maps API as images in the DOM, you can change its opacity with CSS by searching the <img> elements that contain "kml" in its src attribute:
#map img[src*='kml'] {
opacity: .5;
}
Also, you can achieve this using jQuery:
jQuery("#map").find("img[src*='kml']").css("opacity","0.5");
But keep in mind that when user zoom's out or moves the map, new KML images will be loaded, so you'll have to call that jQuery function again.
You can't modify the opacity of the polygons in a KmlLayer. You have three options (that I can think of):
define the opacity in the KML
example, the KML looks like this:
<Style
id="Style1">
<LineStyle><color>66000001</color><width>1</width></LineStyle>
<PolyStyle>
<color>00ff6633</color> <!-- first 00 is opacity of zero -->
<fill>1</fill>
<outline>1</outline>
</PolyStyle>
</Style>
<Placemark id="Opacity0">
<name>Opacity 0</name>
<visibility>1</visibility><open>0</open><styleUrl>#Style1</styleUrl>
<Polygon><extrude>0</extrude><tessellate>1</tessellate><altitudeMode>clampToGround</altitudeMode>
<outerBoundaryIs><LinearRing><coordinates>-116.365673309192,43.6628960911185 -116.365591334179,43.6560111958534 -116.364375539124,43.6559975333512 -116.364402864128,43.6483204644173 -116.359539767727,43.6483955662698 -116.359567092732,43.64422573708 -116.356452545151,43.6442223004997 -116.356329582632,43.6403188481927 -116.355482675135,43.6384234484285 -116.354444492608,43.6376550793648 -116.354198567569,43.6375697515905 -116.354198567569,43.6375560890883 -116.354348855093,43.6375355534256 -116.352818906307,43.6375834140927 -116.349636046216,43.6375697515905 -116.349677033722,43.6339155770838 -116.317438473925,43.6339155770838 -116.314392238855,43.6339600011706 -116.314187301323,43.6484194546938 -116.334391040727,43.6484843306243 -116.33440470323,43.6627594660968 -116.335292598233,43.6629438679665 -116.336767980829,43.6629097536206 -116.359348576516,43.6629985179752 -116.360673587769,43.6628994438797 116.365673309192,43.6628960911185</coordinates>
</LinearRing></outerBoundaryIs></Polygon>
</Placemark>
import the KML into FusionTables, and use a FusionTablesLayer (which allows you to change the opacity of polygons) (No longer useful as FusionTables will be turned down/off on December 3, 2019)
If the KML is not too complex, use a third party parser (geoxml3 or geoxml-v3, which will parse the KML and render it as native Google Maps Javascript API v3 objects (which allow you to modify the opacity).
This solution is not perfect because it causes a slight flash when changing zoom levels, but some may find this useful:
google.maps.event.addListener(map, 'tilesloaded', function() {
$("#map").find("img").css("opacity","0.5");
});
If you use preserveViewport: true, you shouldn't have any issues.
var kmlLayer = new google.maps.KmlLayer(kmlsrc, {
suppressInfoWindows: true,
preserveViewport: true,
map: map
});
I'm trying to add the google map with a marker into my form in order to help users choose the location, but it went wrong somewhere.
As you see, the map didn't display correctly in its area. I've put a marker into the map and also set center there, but the location of that marker is not correct, it hides outside the initial map (in the top right of the map above, instead of the center).
When I hit the F12 button to enable Firebug (in firefox), the map display correctly
Here's the code for creating the form and adding google map:
The form in index.html file:
<div id="map_company" style="float: left; width: 500px;height: 350px;">
<label style="margin-bottom: 5px;">Chọn vị trí hãng xe trên bản đồ:</label>
<div id="map_canvas" style="width: 100%; height: 100%; position: relative;"></div>
</div>
And the javascript in the script file:
//add map to company tab
//Set Center
var myOptions =
{
center: new google.maps.LatLng(21.044813, 105.79864),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var comMarker = new google.maps.Marker({
position: new google.maps.LatLng(21.044813, 105.79864),
map: map,
draggable: true
});
google.maps.event.addListener(comMarker, 'dragend', function {
document.getElementById("cLat").value = this.getPosition().lat();
document.getElementById("cLon").value = this.getPosition().lng();
});
Can anyone help me to figure out the problem here, I even don't know how to explain it to google.
It appears that you use tabs.
When yes, you must trigger the resize-event of the map when the tab with the map has been selected.
Give your map_canvas a fixed size (in pixels, not percentage) and remove the position = relative. If you use percentages the parent node must also have a size, otherwise it make no sense, (100% of what?).
<div id="map_canvas" style="width: 400px; height: 300px;"></div>
i'm trying to put a layer on top of my google maps to cover it up. There doesn't have to be any interaction with google maps, it's just one layer on top the other.
what i have now:
<div id="map">
<div id="overlay"></div>
</div>
in the map div i put my google maps, and the overlay layer has a background as big as the map div, but the google maps keeps putting itself on top.
Anyone an idee what i can do about it?
Google Maps API V3 supports an option called noClear:
If true, do not clear the contents of the Map div.
Use it like:
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
noClear: true,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
However, semantically it feels better to put the div#overlay as the next sibling of the map div as #Marcelo suggests.
The API will overwrite anything inside the DIV you assign to the map as container.
To cover the map you'd need to put your overlay div outside the map div with position:absolute