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...
Related
I have a google map. When I click a marker I show a bootstrap modal with style="z-index:999999999999999999999999999". No problems here. However when I click the fullscreen button, the the modal is not shown anymore. It only works in normal mode. Any suggestions how to fix this?
To see a sample see: http://jsfiddle.net/segato/e8w4wmh6/
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function () {
$('#myModal').modal('show');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Click the marker. Then click the full screen icon and then click a marker.
The point is that fullscreen mode use fullscreen API so anything outside the fullscreen element (in this case the map DIV) remains backward.
A workaround can be to append the modal element to the map div, for example exploiting the custom controls API.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById("myModal"));
See working fiddle.
N.B. I have disable modal background because in the maps it came out with a wrong z position, coming of top of the modal. I think would not be difficult to fix that if you need the background.
The solution proposed did not worked for me but inspired from this page it's OK : Google maps tool tip not working full screen mode
document.getElementById('map_canvas').firstChild.appendChild(document.getElement
ById("modalLarge"));
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>
Working on a Google Map app built with AngularJS.
Currently deployed sandbox: http://of.xchg.com/
Click Map link and you will notice only ONE tile IF ANY are rendered.
If you then RESIZE the browser window, THEN the rest of the map tiles will render completely.
Here is the git project: https://github.com/LarryEitel/of4
Why are not all Google Map Tiles rendered?
Is there a way to test for complete rendering of tiles?
Is there a way to force re-rendering of all map tiles?
Call this function in your map controller:
google.maps.event.trigger(map, 'resize');
That should do the trick.
I found this problem when trying to re-center the map after the view loaded. There would be a single tile in the top left corner.
I noticed that it was centering the map at the topleft of the div (0,0), and figured that it must be measuring the div before it was visible. This would mean the dimensions were 0px, 0px and so to center the map would mean placing a single tile at (0,0).
I tried the solution of triggering the resize event
google.maps.event.trigger(map, 'resize');
and that almost worked - it filled the div with tiles, but it was still centered at (0,0).
What worked was to wrap the re-center code in a $timeout(). This ensures that the div is fully loaded and correctly sized before the code runs. Now it works perfectly.
$timeout(function() {
// still need this.
google.maps.event.trigger(map, 'resize');
map.setCenter(53, -6);
});
After a lot of trial and error, I found a workaround. By merely injecting the GoogleMap Service into the app run command, it successfully rendered the complete map. I ALSO had to make the default '/' route show the map page. Anything else I would do that involved trying to switch from a home (non-map) page to the map page would result in a partially rendered map. :(
Perhaps I or someone will suggest a more elegant solution. :)
// Generated by CoffeeScript 1.6.1
(function() {
'use strict';
angular.module('of4App', []).config(function($routeProvider) {
return $routeProvider.when('/menu', {
templateUrl: 'views/menu.html',
controller: 'MainCtrl'
}).when('/list', {
templateUrl: 'views/list.html',
controller: 'MainCtrl'
}).when('/map', {
templateUrl: 'views/map.html',
controller: 'MapCtrl'
}).when('/about', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
}).otherwise({
redirectTo: '/map'
});
}).run(function($rootScope, $location, GoogleMap) {
var rootScope;
rootScope = $rootScope;
rootScope.navBarHeight = 40;
return rootScope.mapShown = function() {
var mapShown;
mapShown = $location.path().indexOf('/map') > -1;
return mapShown;
};
});
}).call(this);
I am using a google maps api v3 to load some data from a kml file. I wish to style the description data when it is shown in an info window to suit my web page.
Now I am trying to set the style:
style="margin-left:-20px;border:2px dotted #897823; et-a;"
...inside the description tag of a Kml Placemark but it is not rendering it properly.
I can see that firebug just shows up the positives values of margin and padding. It entirely ignores the negative margin values. So, I was wondering, are any limitation in using css style attributes for kml files?
<placemark>
<name><![CDATA[First Office Address]]></name>
<description>
<![CDATA[
First Line Information<br>
California addresss<br>
Peak valley<br>
<div class="cInfo">Telephone<br>
Office 9089YUHJT General: (2457TYGFR</div>
]]>
</description>
<Point>
<coordinates>-420.2300,137.5332200,0</coordinates>
</Point>
</placemark>
The issue you are having is due to Content scrubbing in the Api. Scrubbing the contents is a security measure to prevent malicious code from executing.
When a feature balloon's description contents are scrubbed, the following code is removed:
JavaScript
CSS
<iframe> tags
<embed> tags
<object> tags
If you take a look at the markup in a debugger you will see that you are actually getting something like the following:
<div style="font-family: Arial,sans-serif; font-size: small;">
<div id="iw_kml">
First Line Information<br>
California addresss<br>
Peak valley<br>
<div>Telephone<br>Office 9089YUHJT General: (2457TYGFR</div>
</div>
</div>
You don't say how you are opening the info windows, but something like the following should work for you. Basically you suppress the default info window and then build your own custom one.
function initialize() {
var myLatlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions
);
var layer = new google.maps.KmlLayer(
'http://www.yourserver.com/some.kml', {
// prevent default behaviour
suppressInfoWindows: true,
map: map
}
);
// bind the event handler
google.maps.event.addListener(layer, 'click', function(kmlEvent) {
showInfoWindow(kmlEvent.featureData.description);
});
// show a custom info window
function showInfoWindow(text) {
// build your window using whatever, styles, embeds or scripts
// you like. Anything included here will bypass content scrubbing
var content = "<div style='margin-left:-20px;border:2px dotted #897823;'>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content
})
}
}
Obviously you can replace style='...' with class='whatever' which would then allow you to define the CSS style in an external file.
I would like to set the size of an infowindow to fit the content inside. The standard infowindow is too wide I tried to use maxWidth but it doesn't seem to work. What is the best way to resize an infowindow?
see code:
window.setContent( inspStates[i].name+ "<br/>"+"total: "+inspStates[i].totalInsp+ "<br/>"+ info);
the information that will be displayed in the bubble looks like this( \n means next line)
NY \ntotal 60 \n2009: 10 \n2010: 20 \n2011: 30
What you want to do is replace the "standard" Googlemaps infoWindow with your own, and put your content into it. Once you replace the standard GM infoWindow, you have a lot of latitude to work with. What I did is this:
Add a new style ID called #infoWindow, and set its width.
#infoWindow {
width: 150px;
}
Outside of any functions within my Javascript, I create a new infoWindow:
var infoWindow = new google.maps.InfoWindow();
Create a new var within the function that sets the information displayed by the marker(s), and set its value to the content:
var html = '<div id="infoWindow">';
html += 'NY<br />total 60<br />2009: 10<br />2010: 20<br />2011: 30';
html +='</div>';
Call the createMarker function using the location information you would have created elsewhere, and include the html var as one of the arguments:
var marker = createMarker(point,name,html);
The createMarker function you would declare elsewhere, which would bring all of the information together, display the marker on your map, and display the information above when it's clicked on:
function createMarker(latlng,name,html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: name
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(contentString);
infoWindow.open(map,marker);
});
}
Just so everyone is clear, if they stumble on this thread.
All you need to do is set the height and width of a container in the your info window content.
You don't need to override google classes and you don't need to get overly complicated about this.
var contentString = '<div class="map-info-window">'+
'<h1>My Info Window</h1>'+
'<p>Hello World</p>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString, });
In my css I have this:
.map-info-window {
width:200px;
height:200px;
}
That's it. That's all you need to do to set the width of a Google Maps InfoWindow.
For me this CSS works fine:
.gm-style-iw {
width: 324px !important;
height: 120px !important;
}
please take a look at following API references and examples:
Google Map V3 Examples:
https://developers.google.com/maps/documentation/javascript/examples/
Google Map V3 API Ref:
https://developers.google.com/maps/documentation/javascript/reference#MapOptions
To set the size of the bubble info-window inside a google map it's enough to add the following css in your CSS file:
.gmap-popup {
max-width:204px;
max-height:110px;
}
Adapted from this discussion.
JFrancis answers is the right one, just don't forget to add "!important" in your CSS when you set the width! This might look like a minor thing, but if you don't do it, your CSS will simply get overwritten!
#infoWindow {
width: 150px !important;
}