Home Forums Porto Template google map

This topic contains 5 replies, has 3 voices, and was last updated by  Support2 3 weeks, 4 days ago. This post has been viewed 133 times

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #10023502

    stefkouf
    Participant

    Hi
    I am tryiing really hard to make it work
    I did made it work on the 1 method , but in Skiathos island google doesnt have street so is difficult to locate to exact position
    SO i copy and paste in the html the script you are giving in this poage

    But even your is not working
    Please what i am doing wrong
    Thank you
    Stef

    the page is here
    http://demo.euphoriaskiathosapartments.com/location.html

    and the location i want to put is
    https://drive.google.com/open?id=1fMwzILlcO7901kDEYGw__FXBFzC6_Z6_&usp=sharing

    Thank you
    Stef


    #10023505

    Support
    Keymaster

    Hello, thanks for your purchase.

    The problem is that Google Maps is not finding your address.
    In that case, we need to set the position of marker with latitude and longitude.
    Change the map marker code to this below:

    var mapMarkers = [{
    	latitude: 37.09024,
    	longitude: -95.71289,
    	html: "<strong>...</strong><br>....",
    	icon: {
    		image: "img/pin.png",
    		iconsize: [26, 46],
    		iconanchor: [12, 46]
    	},
    	popup: true
    }];

    *** Change the latitude and longitude with the correct values.

    Find the Latitude and Longitude of your address:
    http://universimmedia.pagesperso-orange.fr/geo/loc.htm
    http://www.findlatitudeandlongitude.com/find-address-from-latitude-and-longitude/

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

    Kind Regards,

    Jonas


    #10023506

    stefkouf
    Participant

    Hi Jonas and thank you very much for your quick reply !
    I did what you said but is still not working . That is the code below i use

    // Map Markers
    var mapMarkers = [{
    latitude: 39.16392,
    longitude: -23.48346,
    html: “<br>….”,
    icon: {
    image: “img/pin.png”,
    iconsize: [26, 46],
    iconanchor: [12, 46]
    },
    popup: true
    }];
    // Map Initial Location
    var initLatitude = 39.16392;
    var initLongitude = -23.48346;

    // Map Extended Settings
    var mapSettings = {
    controls: {
    panControl: true,
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: true,
    streetViewControl: true,
    overviewMapControl: true
    },
    scrollwheel: false,
    latitude: initLatitude,
    longitude: initLongitude,
    zoom: 4
    };

    var map = $(“#googlemaps”).gMap(mapSettings);

    // Map Center At
    var mapCenterAt = function(options, e) {
    e.preventDefault();
    $(“#googlemaps”).gMap(“centerAt”, options);
    }

    // Add Markers
    $.each(mapMarkers, function(index, value) {
    $(“#googlemaps”).gMap(“addMarker”, value);
    });

    And this is the page i try to install it
    http://demo.euphoriaskiathosapartments.com/location.html

    If is to difficult maybe i will embed a google map , but ofcource it will not be as beautifull as your theme have it

    Thank you again
    Stef


    #10023508

    Support2
    Keymaster

    Hello Stef,

    1) Change the HTML of maps to:

    <div id="googlemaps" class="google-map m-none" style="height: 400px;"></div>

    2) Change the javascript code of maps to:

    // Map Markers
    var mapMarkers = [{
    	latitude: 39.16392,
    	longitude: -23.48346,
    	html: "<strong>...</strong><br>....",
    	icon: {
    		image: "img/pin.png",
    		iconsize: [26, 46],
    		iconanchor: [12, 46]
    	},
    	popup: true
    }];
    
    // Map Initial Location
    var initLatitude = 39.16392;
    var initLongitude = -23.48346;
    
    // Map Extended Settings
    var mapSettings = {
    	controls: {
    		panControl: true,
    		zoomControl: true,
    		mapTypeControl: true,
    		scaleControl: true,
    		streetViewControl: true,
    		overviewMapControl: true
    	},
    	markers: mapMarkers,
    	scrollwheel: false,
    	latitude: initLatitude,
    	longitude: initLongitude,
    	zoom: 4
    };
    
    var map = $("#googlemaps").gMap(mapSettings);
    
    // Map Center At
    var mapCenterAt = function(options, e) {
    	e.preventDefault();
    	$("#googlemaps").gMap("centerAt", options);
    }

    3) Please check your latitude and longitude values, in my tests here it’s resulting a localization in the middle of ocean.

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

    Kind Regards,

    Rodrigo.


    #10023510

    stefkouf
    Participant

    Hey Jonas!!!!
    It worked !! great you are really good and you will get 5 stars when i finish the project
    Only one think
    I had to remove the ( – ) from the front of the var initLongitude = -23.48346; because it was showing the pin near italy 🙂 . When i removed the – then it worked perfectly !!

    Thank you , take a look in the demo page http://demo.euphoriaskiathosapartments.com/location_original.html

    I dont ask about the grey color , irs ok if it works
    Best regards
    Stef


    #10023515

    Support2
    Keymaster

    Hello Stef, thanks for the kind words.

    Great that resolved your issue 🙂

    If you need further assistance, please contact us.

    Kind Regards,

    Rodrigo.


Viewing 6 posts - 1 through 6 (of 6 total)