EXTJS Google Map are blank - google-maps

I am using GmapPanelv3.js. I can see the zooming and everything, but how come the map is blank? Here is an example http://jsfiddle.net/anthor/4aAKL/3/
Ext.onReady(function() {
var w = Ext.create('Ext.window.Window', {
title: 'Gmap',
height: 400,
width: 600,
layout: 'border',
items: [
{
title: 'Message List',
region: 'south',
height: 50,
split: true,
collapsible: true,
margins: '0 5 5 5',
collapsed: true
},{
region: 'west',
title: 'Tree',
collapsible: true,
width: 100,
items: [
{
xtype: 'button',
text: 'add',
handler: addInfoWindow // reference to event handler function
}]
},{
xtype: 'gmappanel',
region: 'center',
cls: 'reset-box-sizing',
mapConfOpts:['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
lat: 3.951941,
long: 102.052002
}
}
]
});
/**
* Just example, do not write code like this!
* GMApPanel source code
* http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js
*/
// get the map reference
var map = w.down('gmappanel');
function openInfoWindow(content, marker) {
// create a info window
var infowindow = new google.maps.InfoWindow({
content: content,
size: new google.maps.Size(50,50)
});
infoBubble = new InfoBubble({
content: '<div class="example">Some label</div>',
//position: new google.maps.LatLng(53.5267, newlong),
shadowStyle: 1,
padding: 10,
borderRadius: 5,
minWidth: 200,
borderWidth:1,
//borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: false,
backgroundClassName: 'example',
//arrowSize: 0,
//arrowPosition:7,
//arrowStyle:3
});
infoBubble.open(map.gmap,marker);
var div = document.createElement('DIV');
div.innerHTML = 'Hello';
infoBubble.addTab('A Tab', div);
infoBubble.addTab('A Tab', div);
// All GMapPanel instances has the reference to the underlying googlemap object
// porperty name `gmap`.
//infowindow.open(map.gmap, marker);
}
function addInfoWindow() {
// uses GMapPanel `addMarker` method to create a marker and attached it to tree.
// Detailes - look at the source code of GMapPanel
var marker = map.addMarker({
lat: 53.5267,
lng: -1.13330,
title: 'Marker',
// listeners can be added via configuration or after create
// using standard google maps API, i.e.
// google.maps.event.addListener(marker, 'click', function() {...})
listeners: {
click: function() {
openInfoWindow('hello', marker);
}
}
});
}
w.show();
});

i just change
setCenter: {
'lat': 3.951941,
'lng': 102.052002,
}
all problem are solved!

Related

Change cluster icon for a particular google map cluster - markerclusterplus

I would like to change the cluster icon (dynamically/for particular cluster) based on some particular condition. I am able to identify the condition and have restricted further drill-down on the same. At that particular level we are opening infobox for the user.
The problem lies with cluster as I want to change the icon to something else. For the individual pins the icon is fine.
Below is the code that I am trying to implement:
<!DOCTYPE html>
<html>
<head>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 80%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtTgoZ3tcsUSNfK6yCPzX_muSVOG6N9Ho"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<button type="button" id="refreshmap">Click Me!</button>
<div id="map"></div>
<script>
var gm_map;
var markerArray = [];
var clusterMarkers = [];
var infoWindow = new google.maps.InfoWindow();
function initialize(searchMarkers = []) {
var marker, i;
if(searchMarkers.length == 0) {
clusterMarkers = [
new google.maps.Marker({
position: new google.maps.LatLng(59.381059, 13.504026),
map: gm_map,
title: "P1220214 1.JPG",
label: {
text: 'Label 1',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.381059, 13.504026),
map: gm_map,
title: "P1220214 2.JPG",
label: {
text: 'Label 2',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.340715, 13.49631),
map: gm_map,
title: "P1220214 3.JPG",
label: {
text: 'Label 3',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.327232, 13.487384),
map: gm_map,
title: "P1220214 4.JPG",
label: {
text: 'Label 4',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.379034, 13.516566),
map: gm_map,
title: "P1220214 5.JPG",
label: {
text: 'Label 5',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.330000, 13.485000),
map: gm_map,
title: "P1220214 6.JPG",
label: {
text: 'Label 6',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328501, 13.485782),
map: gm_map,
title: "P1220214 7.JPG",
label: {
text: 'Label 7',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328501, 13.485782),
map: gm_map,
title: "P1220214 8.JPG",
label: {
text: 'Label 8',
color: '#222222',
fontSize: '12px'
}
})
]
} else {
clusterMarkers = searchMarkers;
}
var options_googlemaps = {
minZoom: 9,
zoom: 9,
center: new google.maps.LatLng(59.328631, 13.485688),
maxZoom: 18,
}
gm_map = new google.maps.Map(document.getElementById('map'), options_googlemaps)
var options_markerclusterer = {
//gridSize: 20,
maxZoom: 18,
zoomOnClick: false,
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
label: {
text: 'This is custom text'
}
};
var markerCluster = new MarkerClusterer(gm_map, clusterMarkers, options_markerclusterer);
markerCluster.setCalculator(function(markers, numStyles){
var index = 0,
count = markers.length,
total = count;
while (total !== 0) {
//Create a new total by dividing by a set number
total = parseInt(total / 5, 10);
//Increase the index and move up to the next style
index++;
}
index = Math.min(index, numStyles);
samePin = _getPinStatus(markers);
if (samePin) {
return {
text: count + " ("+ count + " Jobs)",
index: index
};
} else {
return {
text: count,
index: index
};
}
});
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
//This needs some logic to identify if all the internal pings are at same location - execute else part otherwise further zoom in using if code.
var markers = cluster.getMarkers();
var samePin = false;
samePin = _getPinStatus(markers);
if (!samePin ){
gm_map.setCenter(cluster.center_);
gm_map.setZoom(gm_map.getZoom() + 2);
} else {
// This is where I want to change the icon of the particular cluster.
var array = [];
for (i = 0; i < markers.length; i++) {
array.push(markers[i].getTitle() + '<br>');
}
if (gm_map.getZoom() <= markerCluster.getMaxZoom()) {
infoWindow.setContent(markers.length + " markers<br>" + array);
infoWindow.setPosition(cluster.getCenter());
infoWindow.open(gm_map);
}
}
});
for (i = 0; i < clusterMarkers.length; i++) {
var marker = clusterMarkers[i];
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infoWindow.setContent(this.getTitle());
infoWindow.open(gm_map, this);
}
})(marker));
}
}
$(document).ready(function() {
initialize();
$('body').on('click', '#close-link', function() {
$('#toggle-photolist').fadeOut();
$('#close-overlay').fadeOut();
});
$('#refreshmap').click(function() {
searchMarkers = [
new google.maps.Marker({
position: new google.maps.LatLng(59.381059, 13.504026),
map: gm_map,
title: "Search Data 1.JPG",
label: {
text: 'Search label 1',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.338683, 13.492057),
map: gm_map,
title: "Search Data 2.JPG",
label: {
text: 'Search label 1',
color: '#222222',
fontSize: '12px'
}
})
]
initialize(searchMarkers);
});
});
function _getPinStatus(markers) {
for (i = 0; i < markers.length; i++) {
var parentLatitude = markers[0].getPosition().lat();
var parentLongitude = markers[0].getPosition().lng();
if(markers[i].getPosition().lat() == parentLatitude &&
markers[0].getPosition().lng() == parentLongitude) {
samePin = true;
}
else {
// break out of the loop in case a single pin is different and allow user to further zoom in the map
samePin = false;
break;
}
}
return samePin;
}
</script>
<!-- Replace following script src -->
</body>
</html>
The logic that I am trying to build is that if the cluster has identical pins beneath it (I would not like to drill down) then change the icon to anything else.
The function _getPinStatus helps me identify the above logic and creates the infowindow.
I also somehow could not manage to get the zoom change event - but this is rather a separate query
I tried with clearMarkers() function and remap the clusters by providing the image in options_markerclusterer array but it does replace the image on all underlying markers.
I could not find details around setStyles and its implementation. Would it be feasible to push styles once the map is already plotted.
Appreciate any suggestions.
You can add additional styles to the style array used to define the Cluster icon styles:
var mcStyles = markerCluster.getStyles();
mcStyles.push({
url: "http://www.geocodezip.com/mapIcons/markerclusterer/heart50.png",
width: 50,
height: 44,
anchorIcon: [44, 25],
textSize: 10,
textColor: "black",
textDecoration: "none",
fontStyle: "normal",
fontFamily: "Arial,sans-serif",
backgroundPosition: "0 0",
});
Then adjust the "calculator" to return the appropriate index (in this case 6) when you hit your "same pin" case:
markerCluster.setCalculator(function(markers, numStyles) {
var index = 0,
count = markers.length,
total = count;
while (total !== 0) {
//Create a new total by dividing by a set number
total = parseInt(total / 5, 10);
//Increase the index and move up to the next style
index++;
}
index = Math.min(index, numStyles);
samePin = _getPinStatus(markers);
if (samePin) {
return {
text: count + " (" + count + " Jobs)",
index: 6 // reference added style
};
} else {
return {
text: count,
index: index
};
}
});
proof of concept fiddle
code snippet:
var gm_map;
var markerArray = [];
var clusterMarkers = [];
var infoWindow = new google.maps.InfoWindow();
function initialize(searchMarkers = []) {
var marker, i;
if (searchMarkers.length == 0) {
clusterMarkers = [
new google.maps.Marker({
position: new google.maps.LatLng(59.381059, 13.504026),
map: gm_map,
title: "P1220214 1.JPG",
label: {
text: 'Label 1',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.381059, 13.504026),
map: gm_map,
title: "P1220214 2.JPG",
label: {
text: 'Label 2',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.340715, 13.49631),
map: gm_map,
title: "P1220214 3.JPG",
label: {
text: 'Label 3',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.327232, 13.487384),
map: gm_map,
title: "P1220214 4.JPG",
label: {
text: 'Label 4',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.379034, 13.516566),
map: gm_map,
title: "P1220214 5.JPG",
label: {
text: 'Label 5',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.330000, 13.485000),
map: gm_map,
title: "P1220214 6.JPG",
label: {
text: 'Label 6',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328501, 13.485782),
map: gm_map,
title: "P1220214 7.JPG",
label: {
text: 'Label 7',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328501, 13.485782),
map: gm_map,
title: "P1220214 8.JPG",
label: {
text: 'Label 8',
color: '#222222',
fontSize: '12px'
}
})
]
} else {
clusterMarkers = searchMarkers;
}
var options_googlemaps = {
minZoom: 9,
zoom: 9,
center: new google.maps.LatLng(59.328631, 13.485688),
maxZoom: 18,
}
gm_map = new google.maps.Map(document.getElementById('map'), options_googlemaps)
var options_markerclusterer = {
//gridSize: 20,
maxZoom: 18,
zoomOnClick: false,
imagePath: 'https://www.geocodezip.net/mapIcons/markerclusterer/m',
label: {
text: 'This is custom text'
}
};
var markerCluster = new MarkerClusterer(gm_map, clusterMarkers, options_markerclusterer);
var mcStyles = markerCluster.getStyles();
console.log(mcStyles);
mcStyles.push({
url: "https://www.geocodezip.net/mapIcons/markerclusterer/heart50.png",
width: 50,
height: 44,
anchorIcon: [44, 25],
textSize: 10,
textColor: "black",
textDecoration: "none",
// textLineHeight: 12,
// fontWeight: "bold",
fontStyle: "normal",
fontFamily: "Arial,sans-serif",
backgroundPosition: "0 0",
});
markerCluster.setCalculator(function(markers, numStyles) {
console.log("setCalculator(numMarkers" + markers.length + ", numStyles=" + numStyles + ")");
var index = 0,
count = markers.length,
total = count;
while (total !== 0) {
//Create a new total by dividing by a set number
total = parseInt(total / 5, 10);
//Increase the index and move up to the next style
index++;
}
index = Math.min(index, numStyles);
samePin = _getPinStatus(markers);
if (samePin) {
return {
text: count + " (" + count + " Jobs)",
index: 6
};
} else {
return {
text: count,
index: index
};
}
});
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
//This needs some logic to identify if all the internal pings are at same location - execute else part otherwise further zoom in using if code.
var markers = cluster.getMarkers();
var samePin = false;
samePin = _getPinStatus(markers);
if (!samePin) {
gm_map.setCenter(cluster.center_);
gm_map.setZoom(gm_map.getZoom() + 2);
} else {
// This is where I want to change the icon of the particular cluster.
var array = [];
for (i = 0; i < markers.length; i++) {
array.push(markers[i].getTitle() + '<br>');
}
if (gm_map.getZoom() <= markerCluster.getMaxZoom()) {
infoWindow.setContent(markers.length + " markers<br>" + array);
infoWindow.setPosition(cluster.getCenter());
infoWindow.open(gm_map);
}
}
});
for (i = 0; i < clusterMarkers.length; i++) {
var marker = clusterMarkers[i];
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infoWindow.setContent(this.getTitle());
infoWindow.open(gm_map, this);
}
})(marker));
}
}
$(document).ready(function() {
initialize();
$('body').on('click', '#close-link', function() {
$('#toggle-photolist').fadeOut();
$('#close-overlay').fadeOut();
});
$('#refreshmap').click(function() {
searchMarkers = [
new google.maps.Marker({
position: new google.maps.LatLng(59.381059, 13.504026),
map: gm_map,
title: "Search Data 1.JPG",
label: {
text: 'Search label 1',
color: '#222222',
fontSize: '12px'
}
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.338683, 13.492057),
map: gm_map,
title: "Search Data 2.JPG",
label: {
text: 'Search label 1',
color: '#222222',
fontSize: '12px'
}
})
]
initialize(searchMarkers);
});
});
function _getPinStatus(markers) {
for (i = 0; i < markers.length; i++) {
var parentLatitude = markers[0].getPosition().lat();
var parentLongitude = markers[0].getPosition().lng();
if (markers[i].getPosition().lat() == parentLatitude &&
markers[0].getPosition().lng() == parentLongitude) {
samePin = true;
} else {
// break out of the loop in case a single pin is different and allow user to further zoom in the map
samePin = false;
break;
}
}
return samePin;
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 95%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>SO MarkerClusterer Question</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=&v=weekly"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<button type="button" id="refreshmap">Click Me!</button>
<div id="map"></div>
</body>
</html>
details on how this works:
MarkerClustererPlus source on GitHub
useStyle:
/**
* Sets the icon styles to the appropriate element in the styles array.
*
* #ignore
* #param sums The icon label text and styles index.
*/
useStyle(sums: ClusterIconInfo): void
Is used in the Cluster updateIcon:
/**
* Updates the cluster icon.
*/
public updateIcon(): void
here: Cluster
const sums = this.markerClusterer_.getCalculator()(
this.markers_,
numStyles
);
this.clusterIcon_.setCenter(this.center_);
this.clusterIcon_.useStyle(sums);
this.clusterIcon_.show();
Where sums is the structure returned by the calculator function:

How to change active marker icon in vue by clicking

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

google maps api add button to pan back to user location using geolocationmarker-compiled.js

Here is my code... and i'm using ../geolocationmarker-compiled.js to find the user location.
http://deepfrogphoto.com/Brett-Pelletier-Photography/Links/maps/wasatch-ski-map-mobile.htm
I would love to add a button that pans (centers) back to the user location if they scroll around on the map and want to go back to their location (the nice blue dot) Can anyone help me out? I have no idea what I'm doing, but got all this to work somehow so far. I would be forever grateful to add a button that will pan back to the user location. Thanks for any help ahead of time...
var map, GeoMarker;
function toggleLayer(this_layer){
if(this_layer.getMap()) {
this_layer.setMap(null)
} else {
this_layer.setMap(map);
}
}
function initialize() {
var mapOptions = {
zoom: 20,
center: new google.maps.LatLng(40.563855, -111.675426),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
GeoMarker = new GeolocationMarker();
GeoMarker.setCircleOptions({fillColor: '#808080'});
google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() {
map.setCenter(this.getPosition());
map.fitBounds(this.getBounds());
});
google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
alert('There was an error obtaining your position. Message: ' + e.message);
});
GeoMarker.setMap(map);
trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
layer1 = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "skilines",
from: "1R5pCEyNN74N8Dt9MkfNXA6A9D1HbQESzOR1fYFa7",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});
layer2 = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "resorts",
from: "19iu58FDFcBIZZ-wU1iZcf89AI5ABDJ7YTv355su5",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});
layer3 = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "summerhiking",
from: "1t1XNnG7J7Zu1p5mIUpm6qIGVYwzhkCgPy_je0IKr",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
if(!navigator.geolocation) {
alert('Your browser does not support geolocation');
}
you can recenter the map on the GeoMarker like this:
map.setCenter(GeoMarker.getPosition());
working code snippet:
var map, GeoMarker;
function toggleLayer(this_layer) {
if (this_layer.getMap()) {
this_layer.setMap(null)
} else {
this_layer.setMap(map);
}
}
function originalCenter() {
map.setCenter(new google.maps.LatLng(40.563855, -111.675426));
}
function recenterMapOnGeoLoc() {
map.setCenter(GeoMarker.getPosition());
}
function initialize() {
var mapOptions = {
zoom: 20,
center: new google.maps.LatLng(40.563855, -111.675426),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
GeoMarker = new GeolocationMarker();
GeoMarker.setCircleOptions({
fillColor: '#808080'
});
google.maps.event.addListenerOnce(GeoMarker, 'position_changed', function() {
map.setCenter(this.getPosition());
map.fitBounds(this.getBounds());
});
google.maps.event.addListener(GeoMarker, 'geolocation_error', function(e) {
alert('There was an error obtaining your position. Message: ' + e.message);
});
GeoMarker.setMap(map);
trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
layer1 = new google.maps.FusionTablesLayer({
map: map,
heatmap: {
enabled: false
},
query: {
select: "skilines",
from: "1R5pCEyNN74N8Dt9MkfNXA6A9D1HbQESzOR1fYFa7",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});
layer2 = new google.maps.FusionTablesLayer({
map: map,
heatmap: {
enabled: false
},
query: {
select: "resorts",
from: "19iu58FDFcBIZZ-wU1iZcf89AI5ABDJ7YTv355su5",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});
layer3 = new google.maps.FusionTablesLayer({
map: map,
heatmap: {
enabled: false
},
query: {
select: "summerhiking",
from: "1t1XNnG7J7Zu1p5mIUpm6qIGVYwzhkCgPy_je0IKr",
where: ""
},
options: {
styleId: 2,
templateId: 2
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
if (!navigator.geolocation) {
alert('Your browser does not support geolocation');
}
html,
body,
#map_canvas {
width: 100%;
height: 100%;
}
<script src="http://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library#master/archive/geolocationmarker/src/geolocationmarker.js"></script>
<input type="button" id="recenter" onclick="recenterMapOnGeoLoc();" value="recenter" />
<input type="button" id="original" onclick="originalCenter();" value="original center" />
<div id="map_canvas"></div>
working jsfiddle

show google map inside a jquery dialogue form

Hi i'm trying to show a map in my form inside a jquery dialogue,
my jquery dialogue return a partial view where i put this code inside #section scripts and i called also the maps api
<script type="text/javascript">
$(document).ready(function () {
Initialize();
});
// Where all the fun happens
function Initialize() {
// Google has tweaked their interface somewhat - this tells the api to use that new UI
google.maps.visualRefresh = true;
var Liverpool = new google.maps.LatLng(53.408841, -2.981397);
// These are options that set initial zoom level, where the map is centered globally to start, and the type of map to show
var mapOptions = {
zoom: 14,
center: Liverpool,
mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
};
// This makes the div with id "map_canvas" a google map
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// This shows adding a simple pin "marker" - this happens to be the Tate Gallery in Liverpool!
var myLatlng = new google.maps.LatLng(53.40091, -2.994464);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Tate Gallery'
});
// You can make markers different colors... google it up!
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
// a sample list of JSON encoded data of places to visit in Liverpool, UK
// you can either make up a JSON list server side, or call it from a controller using JSONResult
var data = [
{ "Id": 1, "PlaceName": "Liverpool Museum", "OpeningHours": "9-5, M-F", "GeoLong": "53.410146", "GeoLat": "-2.979919" },
{ "Id": 2, "PlaceName": "Merseyside Maritime Museum ", "OpeningHours": "9-1,2-5, M-F", "GeoLong": "53.401217", "GeoLat": "-2.993052" },
{ "Id": 3, "PlaceName": "Walker Art Gallery", "OpeningHours": "9-7, M-F", "GeoLong": "53.409839", "GeoLat": "-2.979447" },
{ "Id": 4, "PlaceName": "National Conservation Centre", "OpeningHours": "10-6, M-F", "GeoLong": "53.407511", "GeoLat": "-2.984683" }
];
// Using the JQuery "each" selector to iterate through the JSON list and drop marker pins
$.each(data, function (i, item) {
var marker = new google.maps.Marker({
'position': new google.maps.LatLng(item.GeoLong, item.GeoLat),
'map': map,
'title': item.PlaceName
});
// Make the marker-pin blue!
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png')
// put in some information about each json object - in this case, the opening hours.
var infowindow = new google.maps.InfoWindow({
content: "<div class='infoDiv'><h2>" + item.PlaceName + "</h2>" + "<div><h4>Opening hours: " + item.OpeningHours + "</h4></div></div>"
});
// finally hook up an "OnClick" listener to the map so it pops up out info-window when the marker-pin is clicked!
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
})
}
i'm calling the map inside a div :
<div id="map_canvas" style="height: 240px; border: 1px solid gray"> map here</div>
but the problem that my map is not showing in the dialogue, even though it works well in normal page
any help plz !?
I've solved this issue with the following code:
this code is on the main view, the #next is a trigger of the form to submit, and the #dialog is inside the #form.
$(function () {
datepair();
$('#dialog').dialog({
autoOpen: false,
modal: true,
height: 720,
width: 700,
resizable: false,
title: 'Verify Location',
show: "fade",
hide: "fade",
open: function (event, ui) {
var form = $('#form');
$.ajax({
url: form.attr('actoin'),
type: form.attr('method'),
data: form.serialize(),
context: this,
success: function (result) {
$(this).html(result);
}
});
}
});
$('#next').click(function (e) {
$('#dialog').dialog('open');
return false;
});
});
this code is on the partialView
$(function () {
window.$required = $('<div></div>').dialog({
autoOpen: false,
resizable: false,
modal: true,
title: 'Verity Location Error',
buttons: {
"Ok": function () {
$(this).dialog('close');
callback();
}
}
});
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (json) {
Initialize();
}
});
return false;
});
function callback() {
$('#dialog').dialog('close');
}
function Initialize() {
//init the map
}
and this is the controller
public ActionResult PartialViewMapController()
{
return PartialView();
}
Hope it not to late for you :)

ExtJS Google Map SetCenter ERROR

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.