Error - Hotel Detail (map)

rogeriomp
Offline
Last seen: 11 months 4 weeks ago
Fri, 08/12/2016 - 01:29
#1
Error - Hotel Detail (map)

Hi, I'm implementing the layout for Hotel Details, but the map is not working. I've checked the .css and .js files and all the required files are being loaded.

You can check the result in: http://travelshopper-uat.azurewebsites.net/Hotel/Detalhe/681/1347

The error I get in Fire bug is:
"TypeError: n(...).mdMapExtend is not a function"

The line of "scripts-NewTheme.js" file is the 627:
if ($('.product-map').length) {
$('.product-map').mdMapExtend({
appendTo: '.product-map',
autoCenter: true,
zoom: 10,
style: 'shadesOfGrey',
iconMarker: 'images/marker-product-map.png',
scrollwheel: false
});

Thank you!

cindy
cindy's picture
Offline
Last seen: 10 hours 38 min ago
Fri, 08/12/2016 - 09:46

Hi,

Because Script Api Google Map is missing. Please add the following code under link angular scrip in footer:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
rogeriomp
Offline
Last seen: 11 months 4 weeks ago
Sat, 08/13/2016 - 03:00

Thanks! 

I add the script as you said. But I'm still getting 2 error messages, the first is the same as the previous and a new one:

Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messag...

I've checked the link at the error message and it says something related to authentication parameter. There's an updated version at:

http://travelshopper-uat.azurewebsites.net/Hotel/Detalhe/681/1347

cindy
cindy's picture
Offline
Last seen: 10 hours 38 min ago
Wed, 08/17/2016 - 15:01

Hi,

Please replace the link we suggested in comment #2 with the following one:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyCXi6x5-3bVVXUnF7TNZtCOCigNPeNgnsw&callback=initMap"></script>

linhpeter0508
linhpeter0508's picture
Offline
Last seen: 1 month 5 days ago
Thu, 08/18/2016 - 09:29

Hi Rogeriomp,

You save this code to the last line in style.css file:

.check-availability:after {
content: "";
display: block;
clear: both;
}


.product-tabs__content .ui-tabs-panel .check-availability {
overflow: visible;
}

linhpeter0508
linhpeter0508's picture
Offline
Last seen: 1 month 5 days ago
Tue, 08/23/2016 - 16:33

Hi Rogeriomp,

Sorry, i had support too late. Please send to me your ftp account. I'll fix for you.

linhpeter0508
linhpeter0508's picture
Offline
Last seen: 1 month 5 days ago
Wed, 08/24/2016 - 11:11

Hi Rogeriomp,

I had sent for you file js fix bug google map API. You remove old file md-map-extend.js and add link new file in your html.

DEMO HTML:

<div id="map" data-lat="21.0227358" data-lng="105.8194541" data-zoom="15" data-style="shades-of-grey" style="height: 480px;">
<div data-map="marker">Click me!</div>
</div>

JS code:

$(function() { JFFUtils.gMapInit('#map'); });
linhpeter0508
linhpeter0508's picture
Offline
Last seen: 1 month 5 days ago
Thu, 08/25/2016 - 14:31

Hi,

I had sent for you new file jff-utils.js. You try again.

Log in or register to post comments