I'm experiencing an issue which only seems to occur in IE11. I have been used Browserstack to test this issue.
Either in desktop, or full screen mode the Google map on my contact page here will not be displayed. I cannot see any issues in the console and it loads fine in the previous version of IE. Contact page: http://ryanfitton.co.uk/contact/
I've also put up a very simple demo which uses the same code here: http://ryanfitton.com.
HTML:
<html>
<style type="text/css">
#map {
padding:0!important; /*Remove Jumbotron padding. Added important for IE8*/
}
#map-canvas {
height:500px;
position:relative;
z-index:1;
}
</style>
<body>
<div id="map">
<div id="map-canvas"></div>
</div>
</body>
<script src="maps.js"></script>
</html>
Maps JS:
function initialize() {
//Map Custom Styles
var styles = [
//Start to display all features
{
featureType: "all",
elementType: "all",
stylers: [
{ saturation: -25 }, { visibility: "on" }
]
},
//Turn off individual features
//Turn off Points of Interest (POI). E.g. Other businesses
{
featureType: "poi",
stylers: [
{ visibility: "off" }
]
},
//Turn off Transit. E.g. Train stations and Bus stops
{
featureType: "transit",
stylers: [
{ visibility: "off" }
]
}
];
//Map Styled options
var styledMapOptions = {
name: "Greyscale"
};
//Set to a variable
var mapType = new google.maps.StyledMapType(styles, styledMapOptions);
//Set Map options
var mapOptions = {
zoom: 10, //Default Zoom level
center:new google.maps.LatLng(53.6837636,-1.8310225), //The default center of the map
disableDefaultUI: true, //Show default UI? True or False
streetViewControl: false, //Show streetview controls? True or False
scrollwheel: false, //Allow scrolling of map with mouse scroll wheel? True or False
draggable: false, //Allow map to be draggable? True or False
panControl: true, //Show Pan controls? True of False
panControlOptions: { //Pan contol options
position: google.maps.ControlPosition.RIGHT_CENTER
},
zoomControl: true, //Allow zoom controls - Especially on mobile? True or False
disableDoubleClickZoom: true, //Disable Double click zoom
zoomControlOptions: { //Zoom control options
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
},
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'Greyscale']
},
mapTypeId: 'Greyscale'
};
//Load map and insert into #map-canvas
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//Set Map Type
map.mapTypes.set('Greyscale', mapType);
//Map Marker Options
var marker = new google.maps.Marker({
position: new google.maps.LatLng(53.6844873,-1.5032883), //Comment out line to not display an icon
map: map,
title:"Ryan Fitton"
});
//Force Map Data to stay in center when resizing window
google.maps.event.addDomListener(window, 'resize', initialize);
google.maps.event.addDomListener(window, 'load', initialize);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
jsfiddle
Your code appears to work properly in Internet Explorer 11. The Fiddle was also not working in Chrome, which suggested the problem wasn't with a particular browser, but with either the fiddle configuration, the code itself, or the library (very unlikely).
Your code was set to execute onLoad per the jsfiddle configuration. The problem though is that when your code is executed, all it does is bind a handler to the onload event, which already happened by that time. By merely changing the jsfiddle configuration to run unwrapped in <head>, the issue is resolved.
http://jsfiddle.net/jonathansampson/o2za2Lu0/8/
The website itself appears to work for me as-is without needing anything further:
Related
In Google Maps static API (and the other APIs as far as I can tell), at zoom level 7 the country label for USA disappears and at zoom level 8 the labels for individual states disappear.
I am interested in generating maps at zoom level 8 but retaining the country and state labels. I realise the labels are not entirely appropriate to this zoom level but I would like them to be visible if you happened to view the map at the appropriate location.
Is there any way of acheiving this with the Google Maps API?
I have tried
style=feature:administrative.country|element:labels|visibility:on&stylefeature:administrative.province|element:labels|visibility:on
but this doesn't add the labels I want at zoom level 8. My suspicion is that this simply can't be done, but maybe someone knows a workaround.
You can't use styled maps to change that. But you can add them yourself to the map at the higher zoom levels.
proof of concept fiddle
proof of concept with all 50 states, but probably need to tweak some of the locations
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(35.9, -97.092877),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
document.getElementById('zoom').innerHTML = "zoom="+map.getZoom();
google.maps.event.addListener(map, 'click', function(e) {
console.log(e.latLng.toUrlValue(6));
});
// 35.930648,-97.166119
var myOptions = {
content: "OKLAHOMA",
boxStyle: {
border: "none",
textAlign: "center",
fontSize: "14pt",
width: "50px",
color: "grey"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, 0),
position: new google.maps.LatLng(36.05, -97.4),
closeBoxURL: "",
isHidden: false,
pane: "mapPane",
enableEventPropagation: true
};
var ibLabel = new InfoBox(myOptions);
google.maps.event.addListener(map, 'zoom_changed', function() {
console.log("zoom=" + map.getZoom());
document.getElementById('zoom').innerHTML = "zoom=" + map.getZoom();
if (map.getZoom() == 8) {
ibLabel.open(map);
} else {
ibLabel.close();
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 98%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="zoom"></div>
<div id="map_canvas"></div>
I am trying to create multiple rectangles with info windows on a Google Map. I have followed the pattern used for multiple markers found at Generating Google Maps markers From Database
I first used that example and used one of the lat and one of long to display icons on the map. That worked. Then I change the code to rectangles and added bounds. But no rectangles appear on the map. I tried to hard code one of the rectangles on the map and one rectangle appeared.
I also made sure that the description to be used in the infowindow did not have any links in. I found that to be a problem if I was passing a link in the data variable. But I could get the link to work if I add the variable with a link at the point of the creation of the infowindow content.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
<asp:Repeater ID="rptMarkers" runat="server">
<ItemTemplate>
{
"title": '<%# Eval("Quad_Name") %>',
"north": '<%# Eval("poly_north") %>',
"east": '<%# Eval("poly_east") %>',
"south": '<%# Eval("poly_south") %>',
"west": '<%# Eval("poly_west") %>',
"description": '<%# Eval("smqcomment") %>'
}
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(41.78768535298007, -99.96481875),
zoom: 7,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
map: map,
bounds: {
north: data.north,
south: data.south,
east: data.east,
west: data.west
}
});
(function (rectangle,data) {
google.maps.event.addListener(rectangle, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map,rectangle);
});
})(rectangle,data);
}
}
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<div id="dvMap" style="width: 960px; height: 532px"></div>
Any help would be great thanks.
I get a javasript error on your live page: js:31 InvalidValueError: setBounds: not a LatLngBounds or LatLngBoundsLiteral: in property south: not a number. You need to translate the strings in your JSON into numbers before using them to construct google.maps.Rectangle objects.
To open an infowindow on a rectangle, you need to set the position of the infowindow. The syntax infoWindow.open(map, rectangle) doesn't apply to rectangles, that only applies to markers (at least for API objects), see the documentation for more information.
position contains the LatLng at which this info window is anchored. Note: An InfoWindow may be attached either to a Marker object (in which case its position is based on the marker's location) or on the map itself at a specified LatLng. Opening an info window on a marker will automatically update the position.
(function(rectangle, data) {
google.maps.event.addListener(rectangle, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.setPosition(rectangle.getBounds().getCenter());
infoWindow.open(map);
});
})(rectangle, data);
code snippet:
window.onload = function() {
var mapOptions = {
center: new google.maps.LatLng(41.492537, -99.901813),
zoom: 6,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
map: map,
bounds: {
north: parseFloat(data.north),
south: parseFloat(data.south),
east: parseFloat(data.east),
west: parseFloat(data.west)
}
});
(function(rectangle, data) {
google.maps.event.addListener(rectangle, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.setPosition(rectangle.getBounds().getCenter());
infoWindow.open(map);
});
})(rectangle, data);
}
}
var markers = [
{
"title": 'Andrews',
"north": '42.75001',
"east": '-103.625',
"south": '42.62501',
"west": '-103.75',
"description": 'Andrews description',
}
,
{
"title": 'Arlington',
"north": '41.50001',
"east": '-96.25001',
"south": '41.37501',
"west": '-96.37501',
"description": '<img src="http://snr.unl.edu/csd-esic/download/geologysoils/digitalgeologicmapscleaned/Arlington/Arlington_Quad.jpg" height="400">',
}
,
{
"title": 'Ashland East',
"north": '41.12501',
"east": '-96.25001',
"south": '41.00001',
"west": '-96.37501',
"description": '<img src="http://snr.unl.edu/csd-esic/download/geologysoils/digitalgeologicmapscleaned/Ashland_East/Ashland_East_Quad.jpg" height="400"">',
}
,
{
"title": 'Beaver Wall',
"north": '43.00001',
"east": '-102.625',
"south": '42.87501',
"west": '-102.75',
"description": 'Beaver Wall description',
}
];
html,
body,
#dvMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="dvMap"></div>
I see that geocodezip updated the code in their original answer to the question. Two things are new
First the defining of the bounds applied the function of parseFloat() to each of the coordinates. I am not sure that was necessary since I have been able to get icons or polygons to draw with the coordinates without this function.
I think what really solved the problem was adding the line of code
var bounds = new google.maps.LatLngBounds();
I am not actually sure what this is doing beside defining the variable "bounds" but it seems to have solved my problem.
Thanks geocodezip!
I have a png image to place as a custom marker. Code is simple:
<script type="text/javascript">
document.write('<div id="gmap" style="width:960px; height:360px;"></div>');
var map_center = new google.maps.LatLng(xxx, xxx);
var map = new google.maps.Map( document.getElementById("gmap"), {
zoom: 11,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
streetViewControl: false,
mapTypeControl: false,
styles: [
{
featureType: 'all',
elementType: 'all',
stylers: [
{ visibility: "on" },
{ saturation: -100 }
]
}]
});
var pos;
var marker;
for(var i = 0 ; i < 10 ; i++) {
pos = new google.maps.LatLng(xxx, xxx);
marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Tu jesteśmy',
icon: 'pointer.png',
optimized: false,
shadow: 'shadow.png'
});
}
</script>
My problem is, neither shadow.png nor pointer.png has any PNG proporties. Both look like gifs. How can I solve this?
The issue is that you're creating multiple markers at the same position, so while they are transparent, you have 10 stacked on top of one another which is giving the appearance of one fully opaque marker.
Here's the updated Plunker with your loop reduced to a single iteration to get my point across.
I have been struggling with this all day. I have made new buttons to actually go on my map that match the Google Maps buttons sit on the map better. I have been trying to get them to work with the current buttons above the map so I can remove those but I can't seem to get them to work. What am I missing.
Here is a link to the page so you can see. The buttons above the map work and I am going to remove them. The buttons on the map don't work which I am trying to get to work.
DEMO LINK
Here is the code. The var radarButton and var satButton is the new ones. The ones below that is to the current buttons.
jQuery(document).ready(function($) {
var mapTypeId = wundermap.getMapTypeId("hyb");
var googlemap = new google.maps.Map($("#map")[0], {
center: new google.maps.LatLng(32.782878, -96.609862),
panControl: false,
zoom: 6,
mapTypeId: mapTypeId,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
});
var radarOptions = {
gmap: googlemap,
name: 'Radar',
position: google.maps.ControlPosition.TOP_RIGHT,
action: function(){
if (wundermap.map.overlayMapTypes.length==0) {
wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
wundermap.map.overlayMapTypes.setAt("1",Radar);
}
else {
wundermap.map.overlayMapTypes.clear();
}
}
}
var radarButton = new buttonControl(radarOptions);
var satOptions = {
gmap: googlemap,
name: 'Satellite',
position: google.maps.ControlPosition.TOP_RIGHT,
action: function(){
if (wundermap.map.overlayMapTypes.length==0) {
wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
wundermap.map.overlayMapTypes.setAt("1",Satellite);
}
else {
wundermap.map.overlayMapTypes.clear();
}
}
}
var satButton = new buttonControl(satOptions);
wundermap.setOptions({
map: googlemap,
refreshPeriod: 60000,
units: "english",
debug: 0,
source: "wxmap",
StreetsOverlay: true,
layers: [
{
layer: "Radar",
active: "on",
opacity: 70,
type: "N0R",
type2: "",
animation: {
num: 6,
max: 10,
delay: 25
},
stormtracks: "off",
smooth: "on",
subdomain: "radblast-aws"
},
{
layer: "Satellite",
defaultUI: 0,
opacity: "85",
source: "",
active: "off",
animation: {
num: 1,
max: 8,
delay: 25
}
},
],
});
wundermap.initialize();
});
Here is the link to the code for the actual layer. The code is to long to post but the overlay is called Radar.
RADAR CODE
The place to start is the JavaScript console. The error messages there tell you what the problems are.
First, when the page is loaded you have an error on line 286 of wxgr3radar.php:
<body onload="initialize()">
Where is your initialize() function defined? I don't see it in your code.
Then, when I click the Satellite button it stops on line 41 of imap.js because map.overlayMapTypes is undefined:
if (map.overlayMapTypes.length==0) {
Here you're expecting map to be a Maps API object, but map is not what you think it is. Look at it in the debugger. It's a DOM element, not a Maps API map. Your Maps API map is in a variable called googlemap, which you create in line 3 of imap.js.
var layout = Ext.create('Ext.panel.Panel', {
width: window.innerWidth,
height: window.innerHeight,
// title: 'Border Layout', //no title will be blank
layout: 'border',
items: [{
title: 'Message List',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
collapsible: true,
margins: '0 5 5 5',
collapsed: true
}, tree, {
html: '<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZx1jmE9yB533ED9suD13buyd0pEfmTzI&sensor=false&dummy=.js">
</script>
<script type="text/javascript">
init();
function init() {
var googleMapOptions =
{
center: new google.maps.LatLng(53.5267, -1.13330),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),googleMapOptions);
}</script>
<body>
<div id="map_canvas" style="width:600px; height:400px"></div>
</body>',
renderTo: Ext.getBody()
}],
renderTo: Ext.getBody()
// get the body and display Layout at there
});
but i m using http://jsfiddle.net/anthor/ufTpN/ are work well, when paste in ExrJS then can't load google map. Why?
PS: I don't want to use Gmappanel and No Iframe, because I want to add marker on this page
First of all, I advise you to use Ext.ux.GMapPanelView basic implementation.
P/S:i don't want to use Gmappanel and No Iframe,because i want to add marker on this page
You can add a marker very simple, look at the code:
addMarker: function(marker) {
marker = Ext.apply({
map: this.gmap
}, marker);
if (!marker.position) {
marker.position = new google.maps.LatLng(marker.lat, marker.lng);
}
var o = new google.maps.Marker(marker);
Ext.Object.each(marker.listeners, function(name, fn){
google.maps.event.addListener(o, name, fn);
});
return o;
}
So you can even add listeners to it.
What you are trying to do in the code snippet (example):
{
html: '<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZx1jmE9yB533ED9suD13buyd0pEfmTzI&sensor=false&dummy=.js"></script>
<script type="text/javascript">
init();
function init() {
var googleMapOptions = {
center: new google.maps.LatLng(53.5267, -1.13330),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),googleMapOptions);
}
</script>
**<body>**
<div id="map_canvas" style="width:600px; height:400px"></div>
**</body>**',
**renderTo: Ext.getBody()**
}
Sorry, absolutely is wrong. Adding body tag, rendering to body being under the panel container Ext.panel.Panel, which itself renders its items and etc, this looks that you know not much about the ext's internals and how it works.
You are trying to do something similar that guys from sencha propose to use via basic and very, very simple ux implementation. You can extend it even further.
Just take a look at:
GMapPanelView example
also look at the source just to see where googleapis are plugged (you can extend the gmap view loading it async if you want)
GMapPanelView source code
example source
An very simple example with layout border, you have used. In the west region you can find add button, press it to add marker.
Gmap usage, jsfiddle (just an example; don't write actual code this way)
Do not be afraid to look at the source!
Good Luck ;)