Google Maps auf Kasse Magento

Question

Ich möchte google map auf einer Seite anzeigen Zur Kasse Seite in magento auf Lieferadresse Form magento hinzufügen auch Breite und Länge von Kunden erfassen

I magento 1.9.2

Answer 1

Sie verwende können Integriere Google Maps Geocoding API, um den Längen- und Breitengrad des Kunden zu erhalten.

Geocoding ist der Prozess der Konvertierung von Adressen (wie „1600 Amphitheatre Parkway, Mountain View, CA“) in geographischen Koordinaten (Breitengrad wie 37,423021 und Länge -122,083739), die Sie platzieren Markierungen auf ein verwenden können Karte, oder positionieren Sie die Karte.

Musteranfrage:

https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=YOUR_API_KEY 

Musterantwort:

<GeocodeResponse> 
<status>OK</status> 
<result> 
    <type>street_address</type> 
    <formatted_address>1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA</formatted_address> 
    <address_component> 
    <long_name>1600</long_name> 
    <short_name>1600</short_name> 
    <type>street_number</type> 
    </address_component> 
    <address_component> 
    <long_name>Amphitheatre Pkwy</long_name> 
    <short_name>Amphitheatre Pkwy</short_name> 
    <type>route</type> 
    </address_component> 
    <address_component> 
    <long_name>Mountain View</long_name> 
    <short_name>Mountain View</short_name> 
    <type>locality</type> 
    <type>political</type> 
    </address_component> 
    <address_component> 
    <long_name>San Jose</long_name> 
    <short_name>San Jose</short_name> 
    <type>administrative_area_level_3</type> 
    <type>political</type> 
    </address_component> 
    <address_component> 
    <long_name>Santa Clara</long_name> 
    <short_name>Santa Clara</short_name> 
    <type>administrative_area_level_2</type> 
    <type>political</type> 
    </address_component> 
    <address_component> 
    <long_name>California</long_name> 
    <short_name>CA</short_name> 
    <type>administrative_area_level_1</type> 
    <type>political</type> 
    </address_component> 
    <address_component> 
    <long_name>United States</long_name> 
    </viewport> 
    </geometry> 
    <place_id>ChIJ2eUgeAK6j4ARbn5u_wAGqWA</place_id> 
</result> 
</GeocodeResponse></address_component> 
    <address_component> 
    <long_name>94043</long_name> 
    <short_name>94043</short_name> 
    <type>postal_code</type> 
    </address_component> 
    <geometry> 
    <location> 
    <lat>37.4217550</lat> 
    <lng>-122.0846330</lng> 
    </location> 
    <location_type>ROOFTOP</location_type> 
    <viewport> 
    <southwest> 
    <lat>37.4188514</lat> 
    <lng>-122.0874526</lng> 
    </southwest> 
    <northeast> 
    <lat>37.4251466</lat> 
    <lng>-122.0811574</lng> 
    </northeast> 
    </viewport> 
    </geometry> 
    <place_id>ChIJ2eUgeAK6j4ARbn5u_wAGqWA</place_id> 
</result> 
</GeocodeResponse> 

Answer 2

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> 

<div id="map_canvas" style="height: 500px;width: 100%; margin: 0.6em;"></div> 



<!--Script Starts Here--> 
<script> 
    jQuery(function() { 
    var lat = 44.88623409320778, 
     lng = -87.86480712897173, 
     latlng = new google.maps.LatLng(lat, lng), 
     image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; 

    //zoomControl: true, 
    //zoomControlOptions: google.maps.ZoomControlStyle.LARGE, 

    var mapOptions = { 
      center: new google.maps.LatLng(lat, lng), 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      panControl: true, 
      panControlOptions: { 
       position: google.maps.ControlPosition.TOP_RIGHT 
      }, 
      zoomControl: true, 
      zoomControlOptions: { 
       style: google.maps.ZoomControlStyle.LARGE, 
       position: google.maps.ControlPosition.TOP_left 
      } 
     }, 
     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions), 
     marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      icon: image 
     }); 

    var input = document.getElementById('billing:street2'); 
    var autocomplete = new google.maps.places.Autocomplete(input, { 
     types: ["geocode"] 
    }); 

    autocomplete.bindTo('bounds', map); 
    var infowindow = new google.maps.InfoWindow(); 

    google.maps.event.addListener(autocomplete, 'place_changed', function (event) { 
     infowindow.close(); 
     var place = autocomplete.getPlace(); 
     if (place.geometry.viewport) { 
      map.fitBounds(place.geometry.viewport); 
     } else { 
      map.setCenter(place.geometry.location); 
      map.setZoom(17); 
     } 

     moveMarker(place.name, place.geometry.location); 
     jQuery('#billing\\:{{textbox name for latitude}}').val(place.geometry.location.lat()); 
     jQuery('#billing\\:{{textbox name for longitude}}').val(place.geometry.location.lng()); 
    }); 
    google.maps.event.addListener(map, 'click', function (event) { 
     jQuery('#billing\\:company').val(event.latLng.lat()); 
     jQuery('#billing\\:fax').val(event.latLng.lng()); 
     infowindow.close(); 
     var geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({ 
      "latLng":event.latLng 
     }, function (results, status) { 
      console.log(results, status); 
      if (status == google.maps.GeocoderStatus.OK) { 
       console.log(results); 
       var lat = results[0].geometry.location.lat(), 
        lng = results[0].geometry.location.lng(), 
        placeName = results[0].address_components[0].long_name, 
        latlng = new google.maps.LatLng(lat, lng); 

       moveMarker(placeName, latlng); 
       jQuery("#billing\\:street2").val(results[0].formatted_address); 
      } 
     }); 
    }); 

    function moveMarker(placeName, latlng) { 
     marker.setIcon(image); 
     marker.setPosition(latlng); 
     infowindow.setContent(placeName); 
     infowindow.open(map, marker); 
    } 
});