0

my script as below. I have to search the pincode and based on search i have to show locations on map

Ques 1: if i have 2 results for same pincode, then also one marker is coming on the map. i want to show seperate markers.

Ques 2: i want to radar search as well using pincode. like if pincode 07201 and 07202 are very near areas then i should get results for both. i tried using radius in my response, but its not working

<script>
      var map;
      <!-- var marker; -->
    function initialize() 
    { 
        var mapOptions = {
        center: new google.maps.LatLng('40.71338', '-74.193246'),
        zoom: 8,
        scrollwheel: false,
        disableDefaultUI: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
     };

      map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

      marker = new google.maps.Marker({
                    position: new google.maps.LatLng(40.71338, -74.193246),
                    map: map,
                });


     }



    jQuery('#searchPincodeForm').submit(function (event) {
       event.preventDefault();

       var geocoder = new google.maps.Geocoder();
        var search_val=$('#country').val();

        jQuery.ajax({
                type: 'post',
                data:{
                    'pincode':search_val,                
                },
                url: 'searchPincode.php',           
                success:function(response){
                if(response != ''){

                $("#result").html(response).show();
                    geocoder.geocode({ 
                    'address': search_val }, function (results, status) {


                    if (status == google.maps.GeocoderStatus.OK) {

                    var position = results[0].geometry.location;
                        map.setCenter(position);
                        marker.setPosition(position);

                }

                })
                } else{

                    $("#result").html("Sorry Dealer not available at this location. For more information please mail at info@movemaxoil.com").show();

                }
                }


            });
            });


     </script>

Response i get from geocode:

{
    "results": [{
        "address_components": [{
                "long_name": "07108",
                "short_name": "07108",
                "types": ["postal_code"]
            },
            {
                "long_name": "Newark",
                "short_name": "Newark",
                "types": ["locality", "political"]
            },
            {
                "long_name": "Essex County",
                "short_name": "Essex County",
                "types": ["administrative_area_level_2", "political"]
            },
            {
                "long_name": "New Jersey",
                "short_name": "NJ",
                "types": ["administrative_area_level_1", "political"]
            },
            {
                "long_name": "United States",
                "short_name": "US",
                "types": ["country", "political"]
            }
        ],
        "formatted_address": "Newark, NJ 07108, USA",
        "geometry": {
            "bounds": {
                "northeast": {
                    "lat": 40.73179289999999,
                    "lng": -74.1830549
                },
                "southwest": {
                    "lat": 40.713114,
                    "lng": -74.21835
                }
            },
            "location": {
                "lat": 40.7235275,
                "lng": -74.197388
            },
            "location_type": "APPROXIMATE",
            "viewport": {
                "northeast": {
                    "lat": 40.73179289999999,
                    "lng": -74.1830549
                },
                "southwest": {
                    "lat": 40.713114,
                    "lng": -74.21835
                }
            }
        },
        "place_id": "ChIJK0xWNjlTwokRLb_3zFLt8zM",
        "types": ["postal_code"]
    }],
    "status": "OK"
}

1 Answers1

0

So the issue is here:

var position = results[0].geometry.location;
map.setCenter(position);
marker.setPosition(position);

Your ajax response may contain more than one location point in it, but in the above code you are using only the first location point results[0].geometry.location here. So instead of results[0] you have to loop through all the results array so that multiple points are mapped on your mark.

Mayank Pandeyz
  • 25,704
  • 4
  • 40
  • 59
  • i tried doing this. getting error on setCenter for (var i=0; i <= results.length; i++){ var position = results[i].geometry.location; map.setCenter(position); marker.setPosition(position); } – Pallavi Aggarwal May 11 '17 at 07:04
  • Check this example for multiple markers: https://wrightshq.com/playground/placing-multiple-markers-on-a-google-map-using-api-3/ – Mayank Pandeyz May 11 '17 at 07:13
  • http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example – Mayank Pandeyz May 11 '17 at 07:13