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'm trying to style my google map so it blends in nicely in my webtheme. Here is the style I'm currently using. anyone knows how to make all land displaying in a specific hex color? I did try this with "administrative.country" featureType without any luck.
var myStyle = [
{
featureType: "administrative",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: " administrative.country",
elementType: "geometry",
stylers: [
{ hue:"#6E6E6E"}
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
Was able to mess around with the style wizard here to determine you want to use the landscape feature like this:
[
{
featureType: "landscape",
elementType: "geometry",
stylers: [
{ hue: "#ff2200" },
{ saturation: 85 },
{ lightness: -42 }
]
}
]
Sample using that style.
You can use http://googlemapscolorizr.stadtwerk.org/ to test the map. It also Calculates the saturation and lightness to display the correct Hex color.
Styling your google map has never been easier.
mapstylr.com