Related
I have a strange issue. I want to display a google map on the site I'm working on. I use a map.php including html code and my initMap and createMap fonction to create my map with Map class and a constructor in a file named class.map.js .
The web page seems to be loading endlessly like the class.map.js, there is no error in the console, the repet in the console is a console.log("repet") placed in the constructor showing that the class.map.js is doing a sort of looping. any clue ?
// Class to store the maps functions
// #class Map
class Map {
constructor(googleApiKey, locale, lat, lng, latLngRef, filter, geo) {
///////////////////////// <- VARIABLES -> ////////////////////////////////
/////////////////////////////////////////////////////////////////////////
/*The global parameters */
this.googleApiKey = googleApiKey; // The Api key
// locale ? this.locale = locale.split('_')[0] : this.locale = 'fr';
this.locale = 'fr';
// locale.split('_')[0]; // The country
this.filter = filter; // the filter above the IM
this.defaultZoomLevel = 13;
this.boolZoomDisplay = true;
// Used by refreshData to determine if a displayData() is needed
this.isGeo = geo; // == true if the geolocation is available; else == false
// If geo == true : lat / lng = My current position
// else : lat / lng = the ref ground position (or NaN if there isn't any)
this.lat = lat;
this.lng = lng;
this.latLng = {lat: lat, lng: lng};
this.latLngRef = latLngRef; // User ref ground geoloc, can value NaN
this.countryLatLng = {lat: 48.6, lng: 2.3};
console.log("repet")
// The coordinate of the country
// if the navigator object is available we set the countryLatLng value to the value obtained by a text file
// if(navigator.language != null){
// let pays = navigator.language.split('-')[1];
// // Do a $.ajax, and not a $.JSON, to make the call not asynchronous
// let _latLng;
// $.ajax({
// url: "countryCoordinates.json",
// dataType: 'json',
// async: false,
// success: function(data) {
// let obj = data[pays] || data['FR'];
// let lat = obj['lat'];
// let lng = obj['lng'];
// // let lat = 48.6;
// // let lng = 2.3;
// _latLng = {lat: lat, lng: lng};
// }
// });
// this.countryLatLng = _latLng;
// }
this.markersArray = []; // Contains all the markers already created
this.newMarkers = []; // Contains all the markers undisplayed
this.mouseDownPos = null; // used for the workaround to disable the click event onscroll
// The currently opened infoWindow
this.selectedInfoWindow = new google.maps.InfoWindow({});
// Temporary marker (to creat a new ground)
this.tempMarker;
// == True if the click is on a cluster; else == false
this.clusterClicked = false;
// Configuration du style de la carte : https://snazzymaps.com
this.styles = [
{ "featureType": "all", "elementType": "labels.text.fill", "stylers": [{ "saturation": 36 }, { "color": "#333333" }, { "lightness": 40 }] },
{ "featureType": "all", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "on" }, { "color": "#ffffff" }, { "lightness": 16 }] },
{ "featureType": "all", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] },
{ "featureType": "administrative", "elementType": "geometry.fill", "stylers": [{ "color": "#fefefe" }, { "lightness": 20 }] },
{ "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{ "color": "#fefefe" }, { "lightness": 17 }, { "weight": 1.2 }] },
{ "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#f5f5f5" }, { "lightness": 20 }] },
{ "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#f5f5f5" }, { "lightness": 21 }] },
{ "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#dedede" }, { "lightness": 21 }] },
{ "featureType": "road", "elementType": "geometry.fill", "stylers": [{ "color": "#858585" }] },
{ "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{ "lightness": 17 }] },
{ "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#ffffff" }, { "lightness": 29 }, { "weight": 0.2 }] },
{ "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#ffffff" }, { "lightness": 18 }] },
{ "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [{ "color": "#c7c7c7" }] },
{ "featureType": "road.local", "elementType": "geometry", "stylers": [{ "color": "#ffffff" }, { "lightness": 16 }] },
{ "featureType": "road.local", "elementType": "geometry.fill", "stylers": [{ "color": "#c7c7c7" }] },
{ "featureType": "transit", "elementType": "geometry", "stylers": [{ "color": "#f2f2f2" }, { "lightness": 19 }] },
{ "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#e9e9e9" }, { "lightness": 17 }] },
{ "featureType": "water", "elementType": "geometry.fill", "stylers": [{ "color": "#c7c7c7" }] }
];
// generate clusterStyles
// probably better to move clusterStyles and mcOptions
let clusterStyles = [
{
textColor: 'white',
url: 'assets/img/ui/m1.png',
width: 55,
height: 54,
},
{
textColor: 'white',
url: 'assets/img/ui/m2.png',
width: 58,
height: 57,
},
{
textColor: 'white',
url: 'assets/img/ui/m3.png',
width: 68,
height: 67,
},
{
textColor: 'white',
url: 'assets/img/ui/m4.png',
width: 80,
height: 79,
},
{
textColor: 'white',
url: 'assets/img/ui/m5.png',
width: 92,
height: 91,
},
];
this.mcOptions = {
gridSize: 50,
styles: clusterStyles,
maxZoom: 12
};
// document.addEventListener('DOMContentLoaded', function() {
this.map = new google.maps.Map(document.getElementById('map'), {
styles: this.styles,
// Default zoom value
zoom: 11,
minZoom: 1,
streetViewControl: false, // Disables the street view ("Petit bonhomme jaune")
gestureHandling: "greedy",
zoomControl: true, // The 2 ('+' & '-') buttons that control the zoom
fullscreenControl: false, // The button that controles the fullscreen
});
// Creates the marker clusterer
this.markerClusterer = new MarkerClusterer(this.map);
// })
So i found the error, my class Map was named like the constructor provided by google to display the map.
I would like to import a url attribute from a linked xml file of map locations and display a hyperlink in the Infowindow.
Infowindow currently only displays link with no hyperlink, I need a piece of code that will add the hyperlink using the url from the xml file and surrounding the result with PROFILE
right now I'm running into trouble because of the quotes.
Map: https://worldteleport.site-ym.com/mpage/Map_NEW2
Code:
<meta content="initial-scale=1.0, user-scalable=no" name="viewport" />
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<title>World Teleport Map 2.0</title>
<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: 100%;
margin: 0;
padding: 0;
}
</style>
<div id="map"> </div>
<script>
var customLabel = {
Teleport: {
label: 'T'
},
bar: {
label: 'B'
}
};
function initMap() {
var styledMapType = new google.maps.StyledMapType(
[ { "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#f5f5f5" } ] }, { "featureType": "administrative", "elementType": "geometry", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#bdbdbd" } ] }, { "featureType": "administrative.neighborhood", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "poi", "elementType": "labels.text", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.arterial", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#dadada" } ] }, { "featureType": "road.highway", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "featureType": "road.local", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "transit", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#c9c9c9" } ] }, { "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "color": "#82d1fd" } ] }, { "featureType": "water", "elementType": "labels.text", "stylers": [ { "visibility": "off" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] } ],
{name: 'Styled Map'});
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(48.273056, -11.346264),
zoom: 3,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map']
}
});
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('https://worldteleport.site-ym.com/resource/resmgr/scripts/Teleport_PINS.xml', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var tier = markerElem.getAttribute('tier');
var site = markerElem.getAttribute('site');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = tier
infowincontent.appendChild(document.createElement('br'));
infowincontent.appendChild(text);
var text = document.createElement('text');
text.textContent = site
infowincontent.appendChild(document.createElement('br'));
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var image = 'https://www.worldteleport.org/resource/resmgr/scripts/pin_member.png';
var marker = new google.maps.Marker({
map: map,
position: point,
icon: image,
label: icon.image
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
xmlUrl = "https://worldteleport.site-ym.com/resource/resmgr/scripts/Markers.xml";
loadMarkers();
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function loadMarkers() {
map.markers = map.markers || []
downloadUrl(xmlUrl, function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var tier = markers[i].getAttribute("tier");
var site = markers[i].getAttribute("site");
var marker_image = markers[i].getAttribute('markerimage');
var id = markers[i].getAttribute("id");
var address = markers[i].getAttribute("address1")+"<br />"+markers[i].getAttribute("address2")+"<br />"+markers[i].getAttribute("address3")+"<br />"+markers[i].getAttribute("postcode");
var image = {
url: marker_image,
size: new google.maps.Size(71, 132),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(71, 132)
};
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<div class='infowindow'><b>" + name + "</b><br/>" + tier + "<br/>"+ site +"<br/></div>";
var marker = new google.maps.Marker({
map: map,
position: point,
icon: image,
title: name
});
map.markers.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function doNothing() {}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQGTqENdfELfxLInlrbi2c78yP7d8sKc4&callback=initMap">
</script>
Using one of the two loops that are creating markers with infowindows in you code, I don't see any issues with quotes:
Adding the code below adds the hyperlink to the URL text:
var a = document.createElement('a');
a.href = site;
var text = document.createElement('text');
text.textContent = site
infowincontent.appendChild(document.createElement('br'));
a.appendChild(text);
infowincontent.appendChild(a);
full marker processing loop:
var markers = xml.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var tier = markerElem.getAttribute('tier');
var site = markerElem.getAttribute('site');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = tier
infowincontent.appendChild(document.createElement('br'));
infowincontent.appendChild(text);
var a = document.createElement('a');
a.href = site;
var text = document.createElement('text');
text.textContent = site
infowincontent.appendChild(document.createElement('br'));
a.appendChild(text);
infowincontent.appendChild(a);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
proof of concept fiddle
code snippet:
var customLabel = {
Teleport: {
label: 'T'
},
bar: {
label: 'B'
}
};
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(48.273056, -11.346264),
zoom: 3,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map'
]
}
});
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
var infoWindow = new google.maps.InfoWindow;
// loading xml string and parsing it, since can't easily load XML asynchronously on jsfiddle/code snippet
var xml = parseXml(xmlStr);
var markers = xml.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var tier = markerElem.getAttribute('tier');
var site = markerElem.getAttribute('site');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = tier
infowincontent.appendChild(document.createElement('br'));
infowincontent.appendChild(text);
var a = document.createElement('a');
a.href = site;
var text = document.createElement('text');
text.textContent = site
infowincontent.appendChild(document.createElement('br'));
a.appendChild(text);
infowincontent.appendChild(a);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
if (id == 1)
google.maps.event.trigger(marker, 'click');
});
}
google.maps.event.addDomListener(window, "load", initMap);
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
var xmlStr = '<markers><marker id="1" name="Eutelsat Rambouillet Teleport" tier="Certified - Tier 4" site="http://www.worldteleport.org/members/?id=38992582" lat="48.549400" lng="1.782600" type="Certified Teleport"/><marker id="2" name="Arqiva Chalfont Grove Teleport (London) UK" tier="Certified - Tier 4" site="" lat="51.615214" lng="-0.576008" type="Certified Teleport"/><marker id="3" name="Batelco - Ras Abu Jarjur (RJR)" tier="Certified - Provisonal" site="" lat="51.615214" lng="26.0716346" type="Certified Teleport"/><marker id="4" name="Elara Comunicaciones" tier="Certified - Provisonal" site="" lat="19.296691" lng="-99.155804" type="Certified Teleport"/></markers>';
var styledMapType = new google.maps.StyledMapType(
[{
"elementType": "geometry",
"stylers": [{
"color": "#f5f5f5"
}]
}, {
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"elementType": "labels.text.fill",
"stylers": [{
"color": "#616161"
}]
}, {
"elementType": "labels.text.stroke",
"stylers": [{
"color": "#f5f5f5"
}]
}, {
"featureType": "administrative",
"elementType": "geometry",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#bdbdbd"
}]
}, {
"featureType": "administrative.neighborhood",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#eeeeee"
}]
}, {
"featureType": "poi",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#757575"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{
"color": "#e5e5e5"
}]
}, {
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#9e9e9e"
}]
}, {
"featureType": "road",
"elementType": "geometry",
"stylers": [{
"color": "#ffffff"
}]
}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road.arterial",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#757575"
}]
}, {
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [{
"color": "#dadada"
}]
}, {
"featureType": "road.highway",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#616161"
}]
}, {
"featureType": "road.local",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#9e9e9e"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [{
"color": "#e5e5e5"
}]
}, {
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [{
"color": "#eeeeee"
}]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#c9c9c9"
}]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"color": "#82d1fd"
}]
}, {
"featureType": "water",
"elementType": "labels.text",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{
"color": "#9e9e9e"
}]
}], {
name: 'Styled Map'
});
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"> </div>
I am trying to add a button align to left side in the toolbar of my datatable.
In the rigth side I have 5 button for export.
I am newbie with Datatables and I am not an expertise with javascript, so If someone can help me I apreciate.
$(document).ready(function () {
var table = $('#TableId').DataTable(
{
columnDefs: [
{ "width": "5%", "targets": [0] },
{ "className": "text-left custom-middle-align", "targets": [0, 1, 2, 3, 4, 5, 6, 7] }
],
dom: '<"html5buttons"B>lTfgitp',
buttons: [
{extend: 'copy'},
{extend: 'csv'},
{extend: 'excel', title: 'ExampleFile'},
{extend: 'pdf', title: 'ExampleFile'},
{extend: 'print',
customize: function (win){
$(win.document.body).addClass('white-bg');
$(win.document.body).css('font-size', '10px');
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
}
],
processing: true,
serverSide: true,
ajax:
{
url: "/Plugin/GetData",
type: "POST",
dataType: "JSON"
},
rowId: "Sr",
columns: [
{
"className": 'details-control sorting_disabled',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "Sr" },
{ "data": "OrderTrackNumber" },
{ "data": "Quantity" },
{ "data": "ProductName" },
{ "data": "SpecialOffer" },
{ "data": "UnitPrice" },
{ "data": "UnitPriceDiscount" }
],
order: [[1, "asc"]]
});
I have this
And I want this
Thank in advance.
Best regards.
Jolynice
Hi all and thanks for the support.
I have a website that loads GoogleMaps API v3 and places markers from a XML file and I am trying to integrate it with the MarkerCluster. No matter what I try It seems to be wrong. Can someone help? I will paste the code that renders the map and loads the data from the xml...
Can someone explain where to add the Markercluster specific code? Thank you.
PS: feel free to use the code if you like it – I've also been able to write it thanks to several examples on the web.
<script type="text/javascript" >
$(document).ready(function() {
var myLatLng = new google.maps.LatLng(21.150272,-4.636016);
MYMAP.init('#map', myLatLng, 2);
MYMAP.placeMarkers('markers/markers.xml');
});
var styles = [ { "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "saturation": -100 }, { "lightness": -61 } ] },{ "featureType": "road", "elementType": "labels", "stylers": [ { "saturation": -67 }, { "visibility": "off" } ] },{ "featureType": "poi", "stylers": [ { "lightness": 40 }, { "saturation": -73 } ] },{ "featureType": "poi", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.land_parcel", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.neighborhood", "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "featureType": "administrative.country", "elementType": "geometry.stroke", "stylers": [ { "color": "#ffff80" }, { "weight": 1 } ] },{ "featureType": "landscape", "stylers": [ { "saturation": -89 }, { "lightness": 25 } ] },{ "featureType": "water", "elementType": "labels", "stylers": [ { "visibility": "off" } ] } ]
var MYMAP = {
map: null,
bounds: null
}
MYMAP.init = function(selector, latLng, zoom) {
var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_CENTER,
},
}
this.map = new google.maps.Map($(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}
MYMAP.placeMarkers = function(filename) {
$.get(filename, function(xml){
$(xml).find("marker").each(function(){
var name = $(this).find('name').text();
var facebook = $(this).find('facebook').text();
var linkedin = $(this).find('linkedin').text();
var twitter = $(this).find('twitter').text();
var photo = $(this).find('photo').text();
var ico = $(this).find('ico').text();
var city = $(this).find('city').text();
var country = $(this).find('country').text();
var email = $(this).find('email').text();
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
MYMAP.bounds.extend(point);
var marker = new google.maps.Marker({
position: point,
map: MYMAP.map,
icon: 'img/'+ico+'marker.png'
});
var infoWindow = new google.maps.InfoWindow();
var html='<div class="img"><img src="markers/'+photo+'.jpg"></div><div class="txt"><p>'+name+'</p><br /><p>'+city+',<br />'+country+'</p><br /><div style="margin-top:-4px"><a target="" href="'+facebook+'"><img src="img/gosocial16/facebook.png"></a><a target="" href="'+twitter+'"><img src="img/gosocial16/twitter.png"></a><a target="" href="'+linkedin+'"><img src="img/gosocial16/linkedin.png"></a><a target="" href="'+email+'"><img style="margin-left:3px" src="img/gosocial16/email.png"></a></div></div>';
google.maps.event.addListener(MYMAP.map, 'zoom_changed', function() {
if (MYMAP.map.getZoom() < 2) MYMAP.map.setZoom(2);
});
google.maps.event.addListener(MYMAP.map, 'zoom_changed', function() {
if (MYMAP.map.getZoom() > 18) MYMAP.map.setZoom(18);
});
google.maps.event.addListener(marker, 'click', function() {
$("#close").click(function() {
infoWindow.close();
});
infoWindow.setContent(html);
infoWindow.setOptions({maxWidth:350});
infoWindow.open(MYMAP.map, marker);
});
MYMAP.map.fitBounds(MYMAP.bounds);
});
});
}
</script>
Here is an example based off of Mike Williams' v2 tutorial, ported to v3.
If you look at the documentation for MarkerClusterer, it includes this example:
var markers = [];
for (var i = 0; i < 100; i++) {
var latLng = new google.maps.LatLng(data.photos[i].latitude,
data.photos[i].longitude);
var marker = new google.maps.Marker({'position': latLng});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
If you add it into your existing loop, you should be able to just do this after you create the marker variable:
markers.push(marker);
Then create the marker clusterer where you currently call fitBounds. Did you try that and it didn't work?
Working example based off your code, adding the MarkerClusterer per the suggestion above; major modifications to use the marker clusterer's sample data as couldn't use yours.
I was wondering if you could change the features of the hybrid maptype like you can do on a styledmaptype. I ask this because i want to show the satellite map (or changed hybrid map) with only country borders, no roads citynames etc.
Thanks in advance!
You may observe the event maptypeid_changed of the map.
Check the current mapTypeId by using getMapTypeId() and if it is equal to google.maps.MapTypeId.HYBRID apply the following style to the map by using map.setOptions()
{
featureType: "all",
elementType: "labels",//hides all labels
stylers: [
{ visibility:'off' }
]
},
{
featureType: "road",//hides the roads
stylers: [
{ visibility:'off' }
]
}
When the mapTypeId is not google.maps.MapTypeId.HYBRID apply the same style, but set both visibility-stylers to on
In the end it may look like this:
google.maps.event.addListener(map, 'maptypeid_changed', function() {
var onoff=(this.getMapTypeId()==google.maps.MapTypeId.HYBRID)
?'off'
:'on';
this.setOptions(
{
styles:[{
featureType: "all",
elementType: "labels",
stylers: [{ visibility:onoff }]
},
{
featureType: "road",
stylers: [{ visibility:onoff}]}
]
}
);
});
google.maps.event.trigger(map,'maptypeid_changed');