I am a developer of Magento Store Locator, and today I want to share some secrets with you. If you have clicked Store Locator link, read the extension description and navigated through its demo store (I encourage you to do that), you may have found, that I use marker points a lot, which show customers the closest store to their location. I will tell you how to calculate the distance between points and build & scale markers, using Google Maps service application.
Function of calculating the distance between points, considering the curvature of the Earth.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
public function calculateTheDistance ($fA, $lAA, $fB, $lAB) { $lat1 = $fA * M_PI / 180; $lat2 = $fB * M_PI / 180; $long1 = $lAA * M_PI / 180; $long2 = $lAB * M_PI / 180; $cl1 = cos($lat1); $cl2 = cos($lat2); $sl1 = sin($lat1); $sl2 = sin($lat2); $delta = $long2 - $long1; $cdelta = cos($delta); $sdelta = sin($delta); $y = sqrt(pow($cl2 * $sdelta, 2) + pow($cl1 * $sl2 - $sl1 * $cl2 * $cdelta, 2)); $x = $sl1 * $sl2 + $cl1 * $cl2 * $cdelta; $ad = atan2($y, $x); $dist = $ad * self::EARTH_RADIUS; return $dist; } |
Frontend : building, scaling, markers events
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
//Enabling Google Maps script <script src="http://maps.google.com/maps?file=api&v=2&key=&hl=en" type="text/javascript" encoding="utf-8"> // Creating marker points array and scaling markers array var bounds = new GLatLngBounds(); var markers = new Array(); //Creating the map and control elements var map = new GMap2(document.getElementById("mapgoogle")); var map_ctrl=new GLargeMapControl3D(); var map_type_ctrl=new GMapTypeControl(); var map_scale_ctrl=new GScaleControl(); map.addControl(map_ctrl); map.addControl(map_type_ctrl); map.addControl(map_scale_ctrl); // Function of building markers on the map function showMarkerByAddress(address,title_place,from,point) { …. // Change the marker default image var blueIcon = new GIcon(G_DEFAULT_ICON); blueIcon.image = “----Image url-----” // Specify extra marker options for the marker markerOptions = { title:title_place, icon:blueIcon}; // Create a new marker point, based on the point and marker options var marker = new GMarker(point,markerOptions); … // Assign an event.addListener for click on the marker GEvent.addListener(marker, "click", function() { //Display the marker in a new tab on Google Maps var adr_url="http://maps.google.com/?q="+encodeURIComponent(marker['address']); window.open(adr_url,'new'); }); // event.addListener GEvent.addListener(marker, "mouseover", function() { var li_id="item_store_"+marker['id']; //Backlight the store jQuery(“li_id”).css("backgroundColor ","#F0F2FF ") //Set a new marker image marker.setImage("----Image url-----"); }); // event.addListener GEvent.addListener(marker, "mouseout", function() { var li_id="item_store_"+marker['id']; //Remove store backlight jQuery(“li_id”).css("backgroundColor ","#FFF") marker.setImage("----Image url-----"); }); //Add the marker on the map map.addOverlay(marker); //Add the point to scaling array bounds.extend(point); //Scale the map map.setZoom(map.getBoundsZoomLevel(bounds)); //Set the center map.setCenter(bounds.getCenter()); ); } |
What do you think of Store Locator extension and how do you find these tips? Drop a comment here.
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Andrey
Andre,
No, I don’t use. User location is defined by IP address from the file. This file contains corresponding IP addresses and country/region/city.
Nice! Do you use the geolocation services in browser, if available?
Thanks, nice to hear that, guys ;)
Thanks!
It’s cool!:)