Home › Forums › Porto – Responsive HTML5 Template › FAQ’s › How to change the map location
- This topic has 0 replies, 1 voice, and was last updated 11 years, 10 months ago by
Support. This post has been viewed 22899 times
-
AuthorPosts
-
March 20, 2013 at 12:48 pm #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); });
-
AuthorPosts
This topic is marked as "RESOLVED" and can not rceive new replies.