Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • how to show multiple location from database using lat and long in google map?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 282
    Comment on it

    Hello Reader's ,

    Below is the code for showing multiple location .

    Just create a HTML file 'index.html' and put the below code inside the body tag.

    <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script><script type="text/javascript">
    
    var markers = [{"lat":"17.454000","lng":"78.434952"},{"title":"shilparamam","lat":"17.452665","lng":"78.435608","description":"Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra."},{"title":"image hospitals","lat":"17.452421","lng":"78.435715","description":"Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai."}];
    
    window.onload = function () {
    var mapOptions = {
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
    var infoWindow = new google.maps.InfoWindow();
    var lat&#95;lng = new Array();
    var latlngbounds = new google.maps.LatLngBounds();
    for (i = 0; i < markers.length; i++) {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    lat&#95;lng.push(myLatlng);
    var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: data.title
    });
    latlngbounds.extend(marker.position);
    (function (marker, data) {
    google.maps.event.addListener(marker, "click", function (e) {
    infoWindow.setContent(data.description);
    infoWindow.open(map, marker);
    });
    })(marker, data);
    }
    map.setCenter(latlngbounds.getCenter());
    map.fitBounds(latlngbounds);
    
    }
    
    // ]]></script></pre>
    <div id="dvMap" style="width: 500px; height: 500px;"></div>
    

    That's it when you will run the above code , you will see the multiple location displaying with different title and descriptions.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: