Google map marker does not show up

[tumanoff69]

Hello,
I cannot get the marker showed up on google map. API is valid, the map itself is rendered properly, but the marker is absent.
Here’s my code:
// Map Markers
var mapMarkers = [{
address: "525 S Main St, Tulsa, OK 74103",
html: "GDP<br>525 S. Main Street, Suite 680<br>Tulsa, OK",
icon: {
image: "img/contact-us/pin-light.png",
iconsize: [26, 46],
iconanchor: [12, 46]
},
popup: true
}];

// Map Initial Location
var initLatitude = 36.15078466484151;
var initLongitude = -95.98927653827039;

// Map Extended Settings
var mapSettings = {
controls: {
draggable: (($.browser.mobile) ? false : true),
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true
},
scrollwheel: false,
markers: mapMarkers,
latitude: initLatitude,
longitude: initLongitude,
zoom: 16
};

var map = $('#googlemaps').gMap(mapSettings),
mapRef = $('#googlemaps').data('gMap.reference');

// Map text-center At
var mapCenterAt = function(options, e) {
e.preventDefault();
$('#googlemaps').gMap("centerAt", options);
}

// Create an array of styles.
var mapColor = "#cfa968";

var styles = [{
stylers: [{
hue: mapColor
}]
}, {
featureType: "road",
elementType: "geometry",
stylers: [{
lightness: 0
}, {
visibility: "simplified"
}]
}, {
featureType: "road",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}];

// Styles from https://snazzymaps.com/
var styles = [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#090A0D"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#090A0D"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#090A0D"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#090A0D"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#090A0D"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#090A0D"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#090A0D"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#090A0D"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#090A0D"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#090A0D"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#090A0D"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#090A0D"},{"lightness":17}]}];

var styledMap = new google.maps.StyledMapType(styles, {
name: 'Styled Map'
});

mapRef.mapTypes.set('map_style', styledMap);
mapRef.setMapTypeId('map_style');

</script>

Thank you

---

[Support]

Hello, thanks for your purchase.

Normally this kind of issue is related to Geolocation/Geocoding API’s not enabled.

You need activate the Geocoding API and Geolocation API in your google maps account:

1) Go to Google Cloud Account -> APIs & auth -> APIs

2) Search for Geocoding and click on Google Maps Geocoding API -> Enable API.

3) Search for Geolocation and click on Google Maps Geolocation API -> Enable API.

If even so the issue still persists, please send for us a online test link with your website, so we can inspect the code and discover where’s the issue.

Please, try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Author]

Posts