Home Forums Porto Template FAQ’s How to change the map location

Tagged: ,

This topic contains 0 replies, has 1 voice, and was last updated by  Support 5 years, 8 months ago. This post has been viewed 13806 times

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #129

    Support
    Keymaster

    *How to setup Google Maps API Key: http://www.okler.net/forums/topic/how-to-setup-google-maps-api-key/

    Method 1:

    Open the file contact-us.html and go to the bottom of the content and you will see this javascript code:

    Change the latitude and longitude in the markers array.

    You also need to set the initial position of the map and the zoom by changing the “center” and “zoom” attributes in the map initializer.

    Here’s a good website to find the coordinates of your address: http://universimmedia.pagesperso-orange.fr/geo/loc.htm

    Method 2:

    If you want to set the locations using Latitude and Longitude:
    Replace the JS script in the HTML to this one:

    // Map Markers
    var mapMarkers = [{
    	latitude: 30.44792,
    	longitude: -86.72963,
    	content: "<strong>Alabama Office</strong><br>217 Summit Boulevard, Birmingham, AL 35243<br><br><a href='#' onclick='mapCenterAt({latitude: 33.44792, longitude: -86.72963, zoom: 16}, event)'>[+] zoom here</a>",
    	icon: {
    		image: "img/pin.png",
    		iconsize: [26, 46],
    		iconanchor: [12, 46]
    	}
    },{
    	latitude: 31.44792,
    	longitude: -86.72963,
    	content: "<strong>Alabama Office</strong><br>217 Summit Boulevard, Birmingham, AL 35243<br><br><a href='#' onclick='mapCenterAt({latitude: 33.44792, longitude: -86.72963, zoom: 16}, event)'>[+] zoom here</a>",
    	icon: {
    		image: "img/pin.png",
    		iconsize: [26, 46],
    		iconanchor: [12, 46]
    	}
    }];
    
    // Map Initial Location
    var initLatitude = 37.09024;
    var initLongitude = -95.71289;
    
    // 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);
    });

Viewing 1 post (of 1 total)