Click here to Skip to main content
15,884,047 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi,

I'm looking to create map programmatically which will fetch the location details dynamically from the user.
Say suppose the user enters 5 location the program will fetch the location on map and sketch out the route as per the sequence of location. Once the route is create the map should be available to be saved as an image.

Looking out something as this Example for visualization-
http://i.telegraph.co.uk/multimedia/archive/02556/map_2556208b.jpg[^]

Which technology will be best suited or any plugin which is available.

Please help me with any pointers with respect to such an implementation.
Any help is appreciated.
Thanks.
Posted
Updated 3-Feb-15 20:11pm
v2

Hi, you must use google API for using Map, please have a look on the links below:

https://developers.google.com/maps/web/[^]

Google Maps API V3 for ASP.NET[^]
 
Share this answer
 
Comments
sagar wasule 4-Feb-15 2:12am    
Hi Thanks for your response, I'm looking for visualtization something like below mentioned URL
http://i.telegraph.co.uk/multimedia/archive/02556/map_2556208b.jpg
deepankarbhatnagar 4-Feb-15 5:51am    
This thing also present in google map, just explore it once.
sagar wasule 5-Feb-15 0:41am    
ok thanks
You can use Google Maps API, but be aware, you will have an 8 waypoint limit between start and finish:

JavaScript
/// <reference path="http://maps.google.com/maps/api/js?v=3.exp" />
/// <reference path="jquery-2.1.3.js" />
$(document).ready(function () {
    getLocation();
    showRoute();
});

function getLocation() {
    showPosition();
}

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function showPosition() {
    var mapcanvas = document.getElementById('map');
    directionsDisplay = new google.maps.DirectionsRenderer();

    // Bloemfontein, ZA
    var coords = new google.maps.LatLng(-29.1210600
                      , 26.2140000);
    var options = {
        zoom: 6,
        center: coords,
        mapTypeControl: false,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(mapcanvas, options);
    directionsDisplay.setMap(map);
}

function showRoute() {
    // Cape Town, WC, ZA
    var start = 'Cape Town, WC, ZA';
    var end = 'Pretoria, GP, ZA';
    var waypnts = [];
    waypnts.push({
        location:'Worcester, WC, ZA',
    });
    waypnts.push({
        location: 'Beaufort West, WC, ZA',
    });
    waypnts.push({
        location: 'Three Sisters, NC, ZA',
    });
    waypnts.push({
        location: 'De Aar, NC, ZA',
    });
    waypnts.push({
        location: 'Oranjerivier, NC, ZA',
    });
    waypnts.push({
        location: 'Kimberley, NC, ZA',
    });
    waypnts.push({
        location: 'Warrenton, NC, ZA',
    });
    waypnts.push({
        location: 'Bloemhof, NW, ZA',
    });
//    waypnts.push({
//        location: 'Klerksdorp, NW, ZA',
//   });
//    waypnts.push({
//        location: 'Vereeniging, GP, ZA',
//    });
//    waypnts.push({
//        location: 'Johannesburg, GP, ZA',
//    });

// Seems there's an 8 waypoint limit for free users.

    var request = {
        origin: start,
        destination: end,
        waypoints: waypnts,
        optimizeWaypoints: true,
        travelMode: google.maps.TravelMode.DRIVING
    };

    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);     
        }
    });
}
 
Share this answer
 
Comments
sagar wasule 4-Feb-15 2:13am    
Thanks for the response,
I looking for the map as in this image below,
http://i.telegraph.co.uk/multimedia/archive/02556/map_2556208b.jpg

For the code that you gave can you please let me know how can I convert this into an image ?
Gideon van Dyk 4-Feb-15 16:09pm    
I reckon a bit of Googling on the Google Maps API should give you an answer ;)
sagar wasule 5-Feb-15 0:41am    
ok thanks

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900