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.
Related
I'm using vue2-google-maps and it would be perfect - to change the marker icon by click on it. I try to write some code but it doesn't work correctly.
Template:
<gmap-map
ref="mainMap"
:center="startLocation"
:zoom="6"
map-type-id="roadmap"
style="width: 100%; height: 100%"
:options="{
zoomControl: false,
scaleControl: false,
mapTypeControl: false,
fullscreenControl: false,
streetViewControl: false,
disableDefaultUi: false
}"
>
<gmap-marker
v-for="(item, key) in coordinates"
:key="key"
:position="getPosition(item)"
:clickable="true"
:icon="markerOptions"
#click="toggleInfo(item, key)"
></gmap-marker>
</gmap-map>
Script:
...
let mapMarker = require('../images/ic-map-marker.svg'),
mapMarkerActive = require('../images/ic-map-marker-active.svg');
...
startLocation: {
lat: 49.0384,
lng: 33.4513
},
coordinates: {
0: {
city: City 0,
lat: '50.4021702',
lng: '30.3926088'
},
1: {
city: City 1,
lat: '49.9543502',
lng: '36.1241697'
}
},
infoOpened: false,
infoCurrentKey = null,
markerOptions: {
url: mapMarker
}
...
toggleInfo: function (marker, key) {
if (this.infoCurrentKey == key) {
if (this.infoOpened) {
this.infoOpened = false;
this.markerOptions = this.mapMarker;
} else {
this.infoOpened = true;
this.markerOptions = this.mapMarkerActive;
}
} else {
this.infoOpened = true;
this.infoCurrentKey = key;
this.markerOptions = this.mapMarkerActive;
}
}
All the markers are changed to active icon by click. Could someone help me please?
Thanks in advance!
Whole code here: https://codesandbox.io/s/map-vue-template-mv33z
all the map markers are referencing the same marker options object. When you change that object then it affects all the map markers.
you can have a data property called
selectedKey: null
have a method like:
getMarkers(key) {
if (this.selectedKey === key) return this.mapMarkerActive;
return this.mapMarker;
},
then you can have
:icon="getMarkers(key)"
or whatever logic you want to identify the selected marker (personally i'd put an id on the marker coordinate object and then have a selectedMarker data property)
in my example i have modified your example and the icons now display as you require.
https://codesandbox.io/s/map-vue-template-q67u0
I have custom Google panorama. I init it like this:
panorama = new google.maps.StreetViewPanorama(document.getElementById('map'), {
pano: 'pano',
visible: true,
panoProvider: get_custom_panorama,
pov: {
heading: 345,
pitch: -10,
zoom: 0.7
},
mode : 'webgl',
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM,
style: google.maps.ZoomControlStyle.LARGE
},
addressControl: false
});
I want to limit minimum zoom level to, let's say, 1.
Is it possible? I don't see any helpful options or listeners I can use.
The closest what I've found is:
panorama.addListener('zoom_changed', function() {
if (panorama.getZoom()<1)
{
var pov=panorama.getPov();
panorama.setPov({
heading: pov.heading,
pitch: pov.pitch,
zoom: 1
});
}
});
But even this doesn't work. And you can see why: on zoom_changed event zoom is already changed. I need something like "before_zoom_changed" listener...
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:
var layout = Ext.create('Ext.panel.Panel', {
//renderTo: 'layout',
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,{
xtype: 'gmappanel',
region: 'center',
id : 'mygooglemap',
center: new google.maps.LatLng(3.951941, 102.052002),
mapOptions: {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}],
renderTo: Ext.getBody() //get the body and display Layout at there
});
});
function addInfoWindow(lat,lng) {
var map123 = Ext.getCmp('mygooglemap');
var latLng = new google.maps.LatLng(lat, lng);
map123.SetCenter(latLng);
}
how come i can't set the map to center of the coordinate?
Firebug with this error
TypeError: map123.setCenter is not a function
[Break On This Error]
map123.setCenter(latLng);
EDITED
where is my GMapPanel.js download from https://raw.github.com/VinylFox/ExtJS.ux.GMapPanel/master/src/GMapPanel3.js
then i put it in my localhost/ux/GMapPanel3.js
and this is my config before use the GMapPanel
Ext.Loader.setPath('Ext.ux', 'ux/');
Ext.require([
'Ext.tree.*',
'Ext.data.*',
'Ext.window.MessageBox',
'Ext.window.*',
'Ext.ux.GMapPanel'
]);
but fail to set Center , why?
I am assuming that you are using the plugin from here: https://github.com/VinylFox/ExtJS.ux.GMapPanel
Assuming that is true, from looking at the code it looks like you need to use getMap() on your gmappanel before calling setCenter():
map123.getMap().setCenter(latLng);
Or, you can specify the setCenter property when configuring the gmappanel:
{
xtype: 'gmappanel',
region: 'center',
id : 'mygooglemap',
setCenter: {
lat: 3.951941,
long: 102.052002
},
mapOptions: {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}
One of the great things about ExtJS/Javascript is that you have access to the code of all of your libraries. When you see errors like "xxx is not a function", it should be pretty self-explanatory: the function you are trying to use is not available on the object on which you are calling it.
I am hacking around with gmap3 managing to get the first task working. Showing the map using a lat long.
My javascript look likes
$('#map_canvas').gmap3(
{
action: 'init',
options: {
center: [x,y],
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: []
}
}
},
{
action: 'addMarkers',
radius: 100,
markers: GetMarkers(),
clusters:
{
0:
{
content: '<div class="cluster cluster-3">CLUSTER_COUNT <div class="cluster-3text">Stops</div> </div>',
width: 66,
height: 65
}
},
marker:
{
options:
{
icon: new google.maps.MarkerImage('../img/marker.png', size, origin, null, null)
},
events:
{
mouseover: function (marker, event, data) {
getArrivalsAndStop(marker, event, data);
},
mouseout: function () {
$(this).gmap3({ action: 'clear', name: 'overlay' });
}
}
}
});
This loads the map how I want. My next step is to be able apply a new lat & long. How can I do this without destroying the whole map and recreating it everytime?
I am using jquery gmap3 plugin.
If you want to call setCenter after having initialized the map and without reloading the whole thing you can do this like this :
$('#mymap').gmap3('get').setCenter(new google.maps.LatLng(48.706685,-3.486694899999975))
$('#mymap').gmap3('get') is the magic thing here, it give you the real google map object I think.
It was hard for me to find this out so I hope it can help someone else.
From the documentation:
This example executes map.setCenter with the result of the address resolution, target is not specified because this is the map.
$('#test').gmap3(
{
action: 'getLatLng',
address: '2 bis rue saint antoine, eguilles',
callback: function(result){
if (result){
$(this).gmap3({action: 'setCenter', args:[ result[0].geometry.location ]});
} else {
alert('Bad address 2 !');
}
}
});
So it looks like if you know the coordinates and don't need to use the geocoder, it would be:
$(this).gmap3({action: 'setCenter', args:[ new google.maps.LatLng(latitude, longitude) ]});
Kind of late in the game, but I am using a list and map(google maps type). hope it helps
Here is how I achieved it
$(document).delegate('#inner_list li', 'click', function () {
var id = $(this).attr('data-id');
$("#map-canvas").gmap3({
get: {
name:"marker",
id: id,
all: true,
callback: function(objs){
$.each(objs, function(i, obj){
obj.setIcon("http://www.markericon.com");
var newLL = obj.getPosition()
$('#map-canvas').gmap3('get').panTo(newLL)
});
}
}
});
});