All geek questions in one place

Google Maps API: Create Storage Locator

Today I am trying to create a storage locator using api. The store’s locator should be configured as follows: two areas, one of which contains a map containing all the stores in the area (measured in a selectable radius from the center point), and one area with a list of all stores on the map, their information and, of course, a link to their website. When a person clicks on the store’s name in the list of stores, he focuses on the store on the map and opens an information window above the store’s marker.

I have a javascript variable to which I made an effort to assign some json data from a php script (which selects this data on the fly from the database)

locations = [{"siteurl":"http:\/\/localhost.localdomain\/5","address":"260 Test St","city":"Brooklyn","state":"New York","zip_code":"11206"},{"siteurl":"http:\/\/localhost.localdomain\/4","address":"3709 Testing St.","city":"Austin","state":"Texas","zip_code":"78705"}];

Now, I know that there are five different functions that I need to run, listed below with their obvious use:

  • geocoder.getLocations: used to convert address data (from json object) to latitude and longitude data object
  • addElementToList: Used to add address information to the list of stores and bind centerOnStorethe onclick function
  • centerOnStorewhen the store list item is clicked in the list area, this function center is located in the store that was clicked in the map area. This function also opens an information window above the centered repository.
  • placeMarker map marker function called as soon as the geocoder returns latitudeLongitude objects
  • eventListener it has something to do with clicking on a list item, and it further centers the map in the corresponding store

, . javascript, , , . , ,

.

, - .

    var map = null;
    var geocoder = null;
    var locations = null;
    var center_on = null;
    var zoom_level = null;
    var markerList = [];

    function initialize()
    {
            if(GBrowserIsCompatible())
            {
                    // Assign vars
                    map = new GMap2(document.getElementById("map_canvas"));
                    geocoder = new GClientGeocoder();
                    locations = <?php echo(json_encode($my_vars['locations'])); ?>;
                    center_on = "<?php echo($my_vars['center_on']); ?>";
                    zoom_level = <?php echo($my_vars['zoom_level']); ?>;
                    var currentLocation = 0;

                    geocoder.getLatLng(center_on, function(myPoint)
                    {
                            map.setCenter(myPoint, zoom_level);
                    });
                    map.setUIToDefault();


                    var list = document.getElementById('center_list');

                    for(var i = 0; i < locations.length; i++)
                    {
                            var address = locations[i]['address'] + ', ' + locations[i]['city'] + ' ' + locations[i]['state'] + ', ' + locations[i]['zip_code'];
                            geocoder.getLocations(address, addAddressToMap);
                    }

            }




            function addAddressToMap(response) {

                    if (!response || response.Status.code != 200) {
                            currentLocation++;
                    } else {
                    var place = response.Placemark[0];
                    var point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
                    marker = new GMarker(point);
                    GEvent.addListener(marker, 'click', function(){
                            this.openInfoWindowHtml("<strong>" + place.address + "</strong><br /><a href='" + locations[currentLocation]['siteurl'] + "'>" + locations[currentLocation]['siteurl'] + "</a>");
                    });
                    map.setCenter(point, 13);
                    markerList.push(marker);
                    map.addOverlay(marker);
                    li = document.createElement('li');

                    li.innerHTML = "<strong>" + place.address + "</strong>";
                    li.setAttribute('onclick', 'center_on_center(' + place.Point.coordinates[1] + ',' + place.Point.coordinates[0] + ')');
                    li.setAttribute('id', 'center_');
                    li.style.fontSize = '1.4em';
                    document.getElementById('center_list').appendChild(li);
                    // alert(currentLocation) here says 0,0,0,0
                    currentLocation++;
                    // alert(currentLocation) here says 1,2,3,4
                    }
            }
    }

. . , . .

currentLocation , , 0. , , "1,2,3,4" .. , .

+3
4

. , . , , , , .

, , , - . , addElementToList geocoder.getLocaitons. , , , getLocations() , addElementToList getLocations() addElementToList. addElementToList html .

, : Google Geocoding Service.

, , ( ) . , . , . , , API Google, , .

+1

@Rushyo, , Javascript API Google Maps . , .

, , lat/lon . , .

: , , , addAddressToMap(), Geocoder. markerList. , addAddressToMap().

for(var i = 0; i < locations.length; i++) { 
    var address = locations[i]['address'] + ', ' + locations[i]['city'] + ' ' + locations[i]['state'] + ', ' + locations[i]['zip_code'];
    geocoder.getLocations(address, addAddressToMap); 
}

var markerList = new array();

function addAddressToMap(response) {
    if (!response || response.Status.code != 200) {
        alert("\"" + address + "\" not found");
  } else {
      place = response.Placemark[0];
      point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
      marker = new GMarker(point);
      markerList.push(marker);
      map.addOverlay(marker);
  }
}

2: , , , , currentLocation - . , getLocations() , .

0

, .

, . .

for(var i = 0; i < locations.length; i++) {
    var address = locations[i]['address'] + ', ' + locations[i]['city'] + ' ' + locations[i]['state'] + ', ' + locations[i]['zip_code'];
    var text = locations[i]['address']; // or whatever you want the text to be
    getLocation(address, text);
}

...

function getLocation(address, text) {
    geocoder.getLocations(address, function(response) {
        var place = response.Placemark[0];
        var point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
        marker = new GMarker(point);
        marker.bindInfoWindowHtml(text); // note that if you want to use GEvent.addListener() instead - you'll need to create another function to get proper closure
        map.addOverlay(marker);
    });
}

Google . :

0

Source: https://habr.com/ru/post/1716361/

More articles:


All Articles