How to change the map location

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

Tagged: ,

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)

This topic is marked as "RESOLVED" and can not rceive new replies.