I have a application where the images are coming has base64 encoded string where i am decoding it and showing on the google map,but for few images only part of the image is displayed so can i create a thumbnail of the image and make it visible more properly
sample input of image data:
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
and i am decoding has
var iconResize = new google.maps.MarkerImage(
"data:image/png;base64,"+data.Photo, //url
new google.maps.Size(70, 70)//size
);
please say how to go about
In order to scale image, the scaledSize property of google.maps.MarkerImage object needs to be specified explicitly, for example:
var icon = new google.maps.MarkerImage();
icon.size = new google.maps.Size(128, 128);
icon.scaledSize = new google.maps.Size(128, 128);
icon.url = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...";
Working example
var iconScaling = function (base64) {
return {
url: base64,
scaledSize: new google.maps.Size(50, 50),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 0)
};
};
var createMarker = function (info) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(info.Lat, info.Lon),
map: $scope.map,
animation: google.maps.Animation.NONE
});
marker.setIcon(iconScaling(info.icon_name));
/////----//////
createMarker({ Lat: value.LocationDetails.Lat, Lon: value.LocationDetails.Lon, icon_name: 'data:image/jpeg;base64,' + value.CustomerInfo.Photo, CustomerID: key });
Related
I am trying to re create a google heat-map in wps. I managed to have it on a web form but I cannot use any web application only wpf.
How can I inject the code below into a browser control and also passing data from a server side method
<script>
var map, heatmap;
function initMap() {
var CenterLat = 56.816918399;
var CenterLong = -4.1826492694;
var ArrMarkers = [];
var ServerData =<%=GetJsonData(); %>;
var Latitude;
var Longitude;
for (var i = 0; i < ServerData.length; i++) {
Latitude = ServerData[i].Latitude;
Longitude = ServerData[i].Longitude;
var marker = { location: new google.maps.LatLng(Latitude, Longitude) };
ArrMarkers.push(marker);
}
var mapCoordinates = {
center: new google.maps.LatLng(CenterLat, CenterLong),
zoom: 7,
mapTypeId: 'satellite'
};
map = new google.maps.Map(document.getElementById('map'), mapCoordinates);
heatmap = new google.maps.visualization.HeatmapLayer({
data: ArrMarkers,
radius: 15,
opacity: 0.5,
map: map
});
}//end InitMap
function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
</script>
<script type="text/javascript" async defer src="<%=GetJavaScriptUrl()%>">
</script>
So the first script is what google need to produce a staic map with an overlay and the second script is the google API url which also contains the google API key
When I need to clear map layer on directionsUpdated seting new driving route or change route by drag & drop, the function map.layers.clear() removes the route line.
Any ideas?
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(47.606209, -122.332071),
zoom: 12
});
addPushpins();
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Set Route Mode to driving
directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: 'Redmond', location: new Microsoft.Maps.Location(47.67683029174805, -122.1099624633789) });
var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: 'Seattle', location: new Microsoft.Maps.Location(47.59977722167969, -122.33458709716797) });
directionsManager.addWaypoint(waypoint1);
directionsManager.addWaypoint(waypoint2);
// Set the element in which the itinerary will be rendered
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('printoutPanel') });
directionsManager.calculateDirections();
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', onUpdateDirections);
});
function onUpdateDirections() {
map.layers.clear();
addPushpins();
}
function addPushpins() {
// Generate an array of 10 random pushpins within current map bounds
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds());
var layer = new Microsoft.Maps.Layer();
layer.add(pushpins);
map.layers.insert(layer);
}
This is by design. The route data is rendered using a layer of it's own. If you clear all layers on the map, then the directions will disappear as well. For your data, reuse a layer instead like this:
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key',
center: new Microsoft.Maps.Location(47.606209, -122.332071),
zoom: 12
});
var layer = new Microsoft.Maps.Layer();
map.layers.insert(layer);
addPushpins();
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// Set Route Mode to driving
directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: 'Redmond', location: new Microsoft.Maps.Location(47.67683029174805, -122.1099624633789) });
var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: 'Seattle', location: new Microsoft.Maps.Location(47.59977722167969, -122.33458709716797) });
directionsManager.addWaypoint(waypoint1);
directionsManager.addWaypoint(waypoint2);
// Set the element in which the itinerary will be rendered
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('printoutPanel') });
directionsManager.calculateDirections();
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', onUpdateDirections);
});
function onUpdateDirections() {
layer.clear();
addPushpins();
}
function addPushpins() {
// Generate an array of 10 random pushpins within current map bounds
var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds());
layer.add(pushpins);
}
I am working with ionic and i want to display map marker with store logo. I constructed a default marker and I have lots of store pics or logos which need to be placed within the marker show in above image. I have used cordova geolocation plugin for get current location of user.
Response array like this :
var markers = [{
storeName: "Dib Dab Extract",
profilePic: "img/dibdab.png",
address: "420 Mary Jane Way",
rating: "4",
reviews: "4379",
offer: "100 Free Coins with 1st Purchse",
lat: "53.896408",
long: "-105.991427"
}]
Custom Marker Icon :
var image = {
url: 'img/ic_map_pin_gray.png', // image is 512 x 512
scaledSize: new google.maps.Size(80, 80),
};
Marker set on map like this :
var markerPos = new google.maps.LatLng(record.lat, record.long);
// Add the markerto the map
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: markerPos,
icon: image,
});
Issue is resolved using Custom Marker. I have done code like this and i get exact marker like i want in above question. So i posted this answer that help anyone who want custom marker like this. i have refer https://humaan.com/blog/custom-html-markers-google-maps/
// Map Initilize function
function initMap() {
var options = {
timeout: 10000,
enableHighAccuracy: true
};
$cordovaGeolocation.getCurrentPosition(options).then(function(position) {
var latLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 15,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
//Wait until the map is loaded
//Load the markers
loadMarkers();
//});
}, function(error) {
console.log(error);
console.log("Could not get location");
//Load the markers
loadMarkers();
});
}
//load marker using rest api
function loadMarkers() {
CommonService.ShowLoader();
YOUR REST API SERVICE.then(function(res) {
angular.forEach(res, function(value, key) {
var record = value;
console.log(record);
var image = {
url: 'img/ic_map_pin_gray.png', // custom background image (marker pin)
scaledSize: new google.maps.Size(70, 70),
};
var markerPos = new google.maps.LatLng(record.lat, record.long);
//Add the markerto the map
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: markerPos,
icon: image,
});
var img_src = record.profilePic;
var overlay = new CustomMarker(
markerPos,
map, {image: img_src}
);
});
}).catch(function(error, status, headers, config) {
console.log(error);
});
}
//CustomMarker function
function CustomMarker(latlng, map, args) {
this.latlng = latlng;
this.args = args;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var self = this;
var div = this.div;
if (!div) {
div = this.div = document.createElement('img');
div.src = self.args.image;
div.className = 'marker';
div.style.position = 'absolute';
div.style.cursor = 'pointer';
div.style.width = '35px';
div.style.height = '35px';
div.style.borderRadius = '50%';
if (typeof(self.args.marker_id) !== 'undefined') {
div.dataset.marker_id = self.args.marker_id;
}
google.maps.event.addDomListener(div, "click", function(event) {
google.maps.event.trigger(self, "click");
});
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
if (point) {
div.style.left = (point.x - 18) + 'px'; // set custom (i set it as i want to set in map )
div.style.top = (point.y - 56) + 'px'; //set custom (i set it as i want to set in map )
}
};
This worked for me.
marker = new MarkerWithLabel({
position: new google.maps.LatLng(item.latitude, item.longitude),
animation: google.maps.Animation.DROP,
labelContent: "My Job Location",
labelAnchor: new google.maps.Point(10, 38),
labelClass: "markLabelsJob", // the CSS class for the label
labelInBackground: false,
icon: 'img/active-job-pin.png',
map: map
});
I am trying to make an application which displays a map with your current location marker and several markers related to data from the server which location is closed to your current location. So far I can render the map, show the current location and get the data related to this location. The problem arise when I try to add markers about the location of this data.
I´ve read through a lot of forums and pages but I found no solution.
I use this piece of code to add markers (to try to add them ..):
var marker = new google.maps.Marker({
map: map._map,
position: new google.maps.LatLng(bookletMarker[i].location[1],bookletMarker[i].location[0]),
title : bookletMarker[i].title,
draggable:false,
icon: "point.png"
});
//This code renders a map with 2 points and displays the route to travel from point A to point B
//On Map Render
onMapMaprender: function(map, gmap, eOpts) {
var record = Ext.getCmp('Panel').getData();
var map = Ext.ComponentQuery.query('#LocationMap')[0].getMap();
var polyline = new google.maps.Polyline();
var markerImage = new google.maps.MarkerImage(
'marker.png',
new google.maps.Size(32, 31),
new google.maps.Point(0, 0),
new google.maps.Point(16, 31)
);
var lat = record.data.latitude;
var lon = record.data.longitude;
console.log(lat,lon);
var destinationMarker = new google.maps.Marker({
icon: markerImage,
position: new google.maps.LatLng(lat,lon),
title : 'destination',
map: map,
})
var latSrc = localStorage.getItem('lat');
var lonSrc = localStorage.getItem('lon');
var sourceMarker = new google.maps.Marker({
icon: markerImage,
position: new google.maps.LatLng(latSrc,lonSrc),
title : 'source',
map: map,
})
function dir_callback(a,b){
g=a;
route_no=0;
if(b=="OK"){
var polyarr = a.routes[route_no].overview_path;
polyline.setPath(polyarr);
polyline.setMap(map);
}
}
var dirS = new google.maps.DirectionsService();
var req = {
origin: sourceMarker.getPosition(),
destination: destinationMarker.getPosition(),
travelMode: google.maps.DirectionsTravelMode.DRIVING,
provideRouteAlternatives : true
};
dirS.route(req,dir_callback);
},
//Setting the Map
var cr = new google.maps.LatLng(lat,lon);
Ext.getCmp('LocationMap').setMapCenter(cr);
You should be able to get the map instance from your map with getMap() and then add the pointer as described in the google maps api docs:
marker.setMap(map);
You can use map.getMap() to get the google map instance and use it when you create markers.
Here, you have directly added icon image path, instead use MarkerImage object as follow,
var imageIcon = new google.maps.MarkerImage(
"point.png",
new google.maps.Size(32, 32),
new google.maps.Point(0, 0),
new google.maps.Point(16, 31)
);
var marker = new google.maps.Marker({
map: map._map,
position: new google.maps.LatLng(bookletMarker[i].location[1],bookletMarker[i].location[0]),
title : bookletMarker[i].title,
draggable:false,
icon: imageIcon
});
I want have the info window content for a marker just a s below
My code so far is
loadEmbeddedMap : function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initEmbeddedMap";
document.body.appendChild(script)
},
initEmbeddedMap : function() {
var myLatlng = new google.maps.LatLng(40, -80);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("embeddedGoogleMap"), myOptions);
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': $('#userMapAddress').val()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
console.debug(results[0]);
infowindow = new google.maps.InfoWindow();
var infoWindowContent = "<div><strong>Address:</strong></div>";
infoWindowContent += "<div>"+results[0].address_components[0].short_name+","+results[0].address_components[1].short_name+"</div>";
infoWindowContent += "<div>"+results[0].address_components[5].short_name+","+results[0].address_components[7].short_name+"</div>";
//infoWindowContent += results[0].formatted_address;
infowindow.setContent(infoWindowContent);
infowindow.open(map, marker);
} else {
//alert("Geocode was not successful for the following reason: " + status);
}
});
$('#embeddedGoogleMapWrapper').show();
},
Code above outputs this
How to get those 'Directions', 'Search near by' stuffs..? Any helps appreciated..
I would start by reading
http://code.google.com/apis/maps/documentation/localsearch/devguide.html#hiworld
As i can see it is possible to do what you want. I cant get you a straight answer but maybe a clue.
I would create my own form in infowindow at least pretty close to the original google one and handle click events by sending those search queries.
Than you need to handle search results
http://code.google.com/apis/maps/documentation/localsearch/devguide.html#handle_search_results
Do some testing with
http://code.google.com/apis/ajax/playground/#the_hello_world_of_local_search
For example you can get lat from localSearch.results[i].lat and so on.
I hope you can get something out of this