I have been developing a site using Adobe muse, I have chosen to implement a customised Google Map on the pany's contact page. I have done so using some basic javascript, inserted into the Muse document by inserting 'HTML Element' within there I have my JS.
I should also mention I have the Google Maps API (with my relevant key) linked in the 'head' of the page, via the page's Metadata (accessed via Page > Page Properties > Metadata within Muse).
Following the guides supplied by Google, I have created a custom map and then applied some extra styling, using JS generated through [].
My problem arises in trying to replace the default marker icon, with my own marker created in illustrator (stored locally on my iMac), I've followed a load of different guides and tried multiple ways of implementing the custom icon, but have had no luck whatsoever - can someone please show me where I'm going wrong? It'd be much appreciated.
Here's how my JS looks within the Muse HTML Element >
<script>
function initMap() {
var myLatLng = {lat: 51.454137, lng: -2.473673};
var map = new google.maps.Map(document.getElementById('u64615'),{
zoom: 16,
center: myLatLng,
styles:
[
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#444444"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#f2f2f2"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f10019"
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "simplified"
},
{
"color": "#f10019"
}
]
},
{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.attraction",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "simplified"
},
{
"color": "#f10019"
}
]
},
{
"featureType": "poi.business",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
},
{
"weight": "0.01"
}
]
},
{
"featureType": "poi.government",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.medical",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.place_of_worship",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.school",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.sports_plex",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
},
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#163742"
},
{
"visibility": "on"
}
]
}]
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Precision Profiles Manufacturing'
});
var contentString =
'<div>'+
'<div>'+
'</div>'+
'<h1 style = "font-size:20px;padding-bottom:10px;"><b>Precision Profiles Manuafcturing</b></h1>'+
'<div id="bodyContent">'+
'<p>The regions leading supplier of aircraft and precision engineering solutions.<p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200,
maxHeight: 400,
});
marker.addListener('click', function() {
infowindow.open(map, marker);
}); } </script>
I have been developing a site using Adobe muse, I have chosen to implement a customised Google Map on the pany's contact page. I have done so using some basic javascript, inserted into the Muse document by inserting 'HTML Element' within there I have my JS.
I should also mention I have the Google Maps API (with my relevant key) linked in the 'head' of the page, via the page's Metadata (accessed via Page > Page Properties > Metadata within Muse).
Following the guides supplied by Google, I have created a custom map and then applied some extra styling, using JS generated through [https://snazzymaps.].
My problem arises in trying to replace the default marker icon, with my own marker created in illustrator (stored locally on my iMac), I've followed a load of different guides and tried multiple ways of implementing the custom icon, but have had no luck whatsoever - can someone please show me where I'm going wrong? It'd be much appreciated.
Here's how my JS looks within the Muse HTML Element >
<script>
function initMap() {
var myLatLng = {lat: 51.454137, lng: -2.473673};
var map = new google.maps.Map(document.getElementById('u64615'),{
zoom: 16,
center: myLatLng,
styles:
[
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#444444"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"color": "#f2f2f2"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f10019"
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text",
"stylers": [
{
"visibility": "simplified"
},
{
"color": "#f10019"
}
]
},
{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.attraction",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "geometry",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "simplified"
},
{
"color": "#f10019"
}
]
},
{
"featureType": "poi.business",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
},
{
"weight": "0.01"
}
]
},
{
"featureType": "poi.government",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.medical",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.place_of_worship",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.school",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.sports_plex",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
},
{
"visibility": "on"
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#163742"
},
{
"visibility": "on"
}
]
}]
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Precision Profiles Manufacturing'
});
var contentString =
'<div>'+
'<div>'+
'</div>'+
'<h1 style = "font-size:20px;padding-bottom:10px;"><b>Precision Profiles Manuafcturing</b></h1>'+
'<div id="bodyContent">'+
'<p>The regions leading supplier of aircraft and precision engineering solutions.<p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 200,
maxHeight: 400,
});
marker.addListener('click', function() {
infowindow.open(map, marker);
}); } </script>
5 Answers
Reset to default 2A quick look through the Google Maps API would get you to this page.
Delving deeper into the API, you can see that when you instantiate a new google.maps.Marker there will be an optional property named icon:. This is where you can specify a string path to the directory in which you store the image you'd like to use.
So in full, the code to instantiate a new marker class would be:
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: "https://your_domain./your_directory/your_image.jpg",
title: 'Precision Profiles Manufacturing'
});
If we want to apply width and height to custom icon,
Refer to the below code,
let icon = {
url: './path/path/custom_icon.png',
scaledSize: { width: 69, height: 41 }
}
marker = new google.maps.Marker({
position: pos,
map: map,
title: 'sample title',
icon: icon
});
marker.setMap(map);
In the "var marker" object, there is an "icon" parameter. According to the documentation here, you want to make another variable with your icon stored in it, and then set the icon inside of the marker object you currently have.
There are two ways to set an icon on a marker. You can set the icon during the initialization of the marker or after (with marker.setIcon (yourUrl)).
Witch give:
Initialization
var image = 'https://developers.google./maps/documentation/javascript/examples/full/images/beachflag.png'; var beachMarker = new google.maps.Marker({ position: {lat: -33.890, lng: 151.274}, map: map, icon: image }); }After initialization
var image = 'https://developers.google./maps/documentation/javascript/examples/full/images/beachflag.png'; var beachMarker = new google.maps.Marker({ position: {lat: -33.890, lng: 151.274}, map: map, }); } beachMarker.setIcon (image);
Here is the plete doc and here the google maps api reference.
You cannot modify the default Google Maps markers, you can only hide them.
So Maybe you can :
1/ Hide the default markers :
const styles = {
hide: [
{
featureType: "poi",
stylers: [{ visibility: "off" }],
},
],
};
map.setOptions({ styles: styles['hide'] });
2/ Then make a nearby Place request.
3/ And add your own marker with your custom image.