How to draw route map in angular - html

Problem 1: In my project, I have to add the route of a person. for that I have two drop-down from that I can choose the location then add that to my route map by clicking another button called 'ADD'. each time I click 'ADD' after selecting the trips the trip should append the existing route map as shown in the image.
I searched on google but I couldn't find any solution. all are talking about adding line route in google map
Problem 2: we can add Any number of trips, the design should respond accordingly to adjust within the defined dimension.

Related

How to show one place as active when embedding google maps?

I built a map for our website. There are different pages where we want to show a different places. Therefore i build this one map with all the needed places within. When i embed the card, it shows the summary of all pins in this map. Is there a way, to show one active pin, with its informations?
I searched for different parameters, with which you can alter the display of the card. But none of them is showing an explicit place.
This is a test map showing 4 pins. What should i do to show one chosen pin?
Hope this is understandable.
Thank you in advance.
When you say you want to "show one chosen pin" does it mean you have an info window for this marker and you want to display it?
If so, you can add unique ids for each infowindow and pass the chosen infowindow id to the url with url params such as https://mymapssite?chosenMarkerId=markerId
And then you can check if this param is given and if so do something like
document.getElementById("markerId").open(yourMapsRef, yourMarkerRef);

Show Info Windows of the elements which are clicked hide the others

Am trying to display the locations in map which i have in my array i have listed the locations on the left side. if user click any of the locations on the list the map should display that particular location and info Window. The problem here is if i click on any other location the previous clicked info Window still appears on the map how can i hide it in the map?
My code
you are creating a new infoWindow instance every time you click one of those locations and not saving them for further use.
i have modified your code inside two functions
1. populateInfoWindow
(added condition here to check if there is an infoWindow created already,
if yes then use that else create new and save it under the same marker)
2. showListings
(if marker visibility is false then call close function of its infoWindow)
working CodePen

Showing sets of markers on different layers of Google map

I need to show a set of markers on a Google map.
I know markers can be added directly on a Google map but given that I have 3 sets of markers, one for shops, one for parks and another one for hotels, how can I show them on 3 different layers and so that later on using javascript, I be able to hide one set of markers by doing sort of:
myLayer2.setMap(null);
I have checked Panoramio layer but it needs the images first to be uploaded to panoramio, but in my case for some particular security reason I cannot upload them to panoramio. I will have images locally and set those at runtime based upon some criteria.
Is there some way to do layer based work without using panoramio approach?
The Maps-API doesn't support this kind of custom layers(as you maybe know them from other map-API's like e.g. leaflet).
But it's not hard to achieve a similar feature.
You may use a google.maps.MVCObject. for every "layer" create a property for this MVCObject and set the value of this property to null or the google.maps.Map-instance(
depending on the desired initial state of the "layer")
var myLayers=new google.maps.MVCObject();
myLayers.setValues({parks:null,shops:null,hotels:map});
//hotels initially are visible
When you want to add a Overlay...e.g. a Marker, to a "layer", bind the map-property of that Overlay to the related property of the MVCObject:
parkMarker=new google.maps.Marker({/*options*/});
parkMarker.bindTo('map',myLayers,'parks');
To toggle the display of all features within that "layer" you only need to set the property of the MVCObject:
//show the parks
myLayers.set('parks',map);
//hide the hotels
myLayers.set('hotels',null);
Demo: http://jsfiddle.net/doktormolle/UA85N/

Show data(numbers) instead of pins on google map

I want to show data (numbers) from database on the map, instead of just pointing the place and clicking on the pin to show data, I want it shown already where the pin is. I use this example to make the google map with pins: http://tips4php.net/2010/10/use-php-mysql-and-google-map-api-v3-for-displaying-data-on-map/
I cannot show images because I'm a new user, so here is an example of what I want to show on map, information about prices instead of usual pins: http://www.norc-imobiliare.ro
You may use the dynamic icons of the Image Charts -API. But this API is deprecated, it may(but must not) stop working in 2015.
The other options:
create an own serverside script that takes the strings(prices) as argument and delivers the desired image based on the input.
create a overlay instead of a marker, it may contain any HTML. e.g. infoBox would be usable.

how to dispose googlemap object?

I am using the Google Maps Control for ASP.Net. I am adding one point which is current point of bus & polyline of the points from current point to last 10 points on the page load with showing popup on current point by default.
I am using update panel for the the refresh button. There is also one input field which takes number of record to show on polyline from current point. Now I want to reset my googlemapObject on refresh button click event so that in every refresh click completely new set of points, polylines should add and shown on google map.
Is there is any method like dispose to dispose current object of goolemap.
How to resolve this problem?
Regards,
Girish
I'm assuming that you are using the Google Maps Control for ASP.NET found at:
http://en.googlemaps.subgurim.net/
If that is the case - there is an example found on their site that will walk you through how to erase icons that are added to the map.
The sample code can be found right here:
http://en.googlemaps.subgurim.net/ejemplos/ejemplo_99000_Custom-Javascript.aspx
By implementing a custom Javascript Event you will be able to change the data on your map with the refresh button - without needing to do a whole page refresh.