Hi there, I’m trying to embed two custom snazzy maps on my site, one for desktop and one for mobile, couldn’t get it to work so I took it into a test project and still can’t figure it out, for now I’ve just put two maps on the page to try and figure it out but no idea what it could be.
I’ve attached the code and screenshots.
P.S It’s on the dynamic page for the address collection
Thanks in advance,
Jamie
<style>
#map {
}
.gm-style-iw * {
display: block;
width: 100%;
color: #ff8d02;
}
.gm-style-iw h4,{
color: #ff8d02;
font-size: 10pt;
}
.gm-style-iw p {
color: #000000;
font-size: 8pt;
text-align: left;
padding-bottom: 5px;
padding-left: 5px;
}
.gm-style-iw a {
color: #0093d0;
}
</style>
<script src='https://maps.googleapis.com/maps/api/js?key=API KEY HERE&sensor=false&extension=.js'>
</script>
<script type="text/javascript">
var geocoder;
var map;
var address = "{{wf {"path":"name","type":"PlainText"\} }}";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeControl: false,
zoomControl: true,
disableDoubleClickZoom: true,
scaleControl: false,
scrollwheel: false,
panControl: false,
streetViewControl: false,
draggable : true,
overviewMapControl: false,
mapTypeControlOptions: {
styles: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": 36
},
{
"color": "#ffe58c"
},
{
"lightness": 40
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "all",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
},
{
"weight": 1.2
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 20
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 21
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 29
},
{
"weight": 0.2
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 18
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 16
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 19
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
},
{
"lightness": 17
}
]
}
]
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
if (geocoder) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow({
content: '<b>' + address + '</b>',
size: new google.maps.Size(150, 50)
});
var iconBase = 'https://daks2k3a4ib2z.cloudfront.net/597f0a54250f3500013ebc97/5992e4b5e91d6100019b55c5_'
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: address,
icon: iconBase + 'gmap_icon_bg.png',
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
My public share link: https://preview.webflow.com/preview/b-m-testing?preview=8bcd294ef54635bee2c191d537f23fc9
Page issue is occuring on: http://b-m-testing.webflow.io/address/bideford
