Question

103

How to show multiple areas by location in google maps using php

rated 0 times [ 109] [ 6] / answers: 1 / hits: 24979 / 11 Years ago, wed, august 28, 2013, 12:00:00

Here is the Initialise function.....

        function initialize() {

Here the variables $Latitude,$Longitude are array values so how can i store them in Javascript Variables so that they can store the above array values....

var lat='<?php echo $Latitude?>';

var lon='<?php echo $Longitude?>';

var latlng = new google.maps.LatLng(lat,lon);

var myOptions = {

    zoom: 10,

    center: latlng,

    mapTypeId: google.maps.MapTypeId.ROADMAP

};

Here how can i loop the geocoder to show multiple areas using above array variables...

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

  geocoder = new google.maps.Geocoder();



  var marker = new google.maps.Marker({

      position: latlng,

      map: map,

      title: Hello World!

  });

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dillionsalvadorg

Add To Favorites

Follow

Total Points: 288

Total Questions: 103

Total Answers: 75

Location: South Korea

Member since Sat, Oct 2, 2021

3 Years ago

answered 11 Years ago jazminkyrap · Accepted Answer

Its my sample code to plot multiple areas in google map by using area name or lat,lng.

        var map;

        var geocoder;

        var marker;

        var people = new Array();

        var latlng;

        var infowindow;



        $(document).ready(function() {

            ViewCustInGoogleMap();

        });



        function ViewCustInGoogleMap() {



            var mapOptions = {

                center: new google.maps.LatLng(11.0168445, 76.9558321),   // Coimbatore = (11.0168445, 76.9558321)

                zoom: 7,

                mapTypeId: google.maps.MapTypeId.ROADMAP

            };

            map = new google.maps.Map(document.getElementById(map-canvas), mapOptions);



            // Get data from database. It should be like below format or you can alter it.



            var data = '[{ DisplayText: adcv, ADDRESS: Jamiya Nagar Kovaipudur Coimbatore-641042, LatitudeLongitude: 10.9435131,76.9383790, MarkerId: Customer },{ DisplayText: abcd, ADDRESS: Coimbatore-641042, LatitudeLongitude: 11.0168445,76.9558321, MarkerId: Customer}]';



            people = JSON.parse(data); 



            for (var i = 0; i < people.length; i++) {

                setMarker(people[i]);

            }



        }



        function setMarker(people) {

            geocoder = new google.maps.Geocoder();

            infowindow = new google.maps.InfoWindow();

            if ((people[LatitudeLongitude] == null) || (people[LatitudeLongitude] == 'null') || (people[LatitudeLongitude] == '')) {

                geocoder.geocode({ 'address': people[Address] }, function(results, status) {

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

                        latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());

                        marker = new google.maps.Marker({

                            position: latlng,

                            map: map,

                            draggable: false,

                            html: people[DisplayText],

                            icon: images/marker/ + people[MarkerId] + .png

                        });

                        //marker.setPosition(latlng);

                        //map.setCenter(latlng);

                        google.maps.event.addListener(marker, 'click', function(event) {

                            infowindow.setContent(this.html);

                            infowindow.setPosition(event.latLng);

                            infowindow.open(map, this);

                        });

                    }

                    else {

                        alert(people[DisplayText] +  --  + people[Address] + . This address couldn't be found);

                    }

                });

            }

            else {

                var latlngStr = people[LatitudeLongitude].split(,);

                var lat = parseFloat(latlngStr[0]);

                var lng = parseFloat(latlngStr[1]);

                latlng = new google.maps.LatLng(lat, lng);

                marker = new google.maps.Marker({

                    position: latlng,

                    map: map,

                    draggable: false,               // cant drag it

                    html: people[DisplayText]    // Content display on marker click

                    //icon: images/marker.png       // Give ur own image

                });

                //marker.setPosition(latlng);

                //map.setCenter(latlng);

                google.maps.event.addListener(marker, 'click', function(event) {

                    infowindow.setContent(this.html);

                    infowindow.setPosition(event.latLng);

                    infowindow.open(map, this);

                });

            }

        }

    <script src=http://code.jquery.com/jquery-1.10.2.min.js type=text/javascript></script>

    <script src=http://maps.googleapis.com/maps/api/js?key=AIzaSyA7IZt-36CgqSGDFK8pChUdQXFyKIhpMBY&sensor=true type=text/javascript></script>



    <div id=map-canvas style=width: 800px; height: 500px;>

    </div>