I am displaying google map on my asp.net page using jquery.I have Nation name,company name,Address and Longitude and latitude.
Right now i have add all addresses in dropdown,on the basis of dropdown selection i have passed longitude and latitude in code.this part is working as it display map on the basis of latitude and longitude.But i have no longitude and latitude for some comapnies.So i want to use directly address of comapnies to display map.
Here is the code that i have used:
<script src="js/jquery/jquery-1.9.0.min.js"></script>
<!-- <msdropdown> -->
<link rel="stylesheet" type="text/css" href="css/msdropdown/dd.css" />
<script src="js/msdropdown/jquery.dd.js"></script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places">
</script>
</head>
<body onload="initialize()">
<select id="countries" style="width:300px;" onchange="updateMap(this.options[this.selectedIndex].value)">
<option value='TVSH - Rruga Ismail Quemali 11>TVSH - Rruga Ismail Quemali 11, Tirana</option></select>
function updateMap(selectControl) {
alert(selectControl);
switch (selectControl) {
case 'TVSH - Rruga Ismail Quemali 11, Tirana':
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(41.321102, 19.823112)],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
var latLng = new google.maps.LatLng(41.321102, 19.823112)
break;
default:
break;
}
initialize(polyline, latLng);
}
function initialize(polyline, schoolLatLng) {
var myLatLng = schoolLatLng;
var myOptions = {
zoom: 13,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
polyline.setMap(map);
}
Now map is displaying on the basis of latitude and longitude.Is there any way so i can directly show map on the basis address.I have address of all comapnies like this:EURONEWS - 60, chemin des Mouilles - 69130 Lyon-Écully, France
Can i show map on the base of this address.Please ask me more description if you need.
You can do something like:
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': 'chemin des Mouilles - 69130 Lyon-Écully, France'}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
But watch out cause the geocoder is asynchronous.
https://developers.google.com/maps/documentation/javascript/geocoding
Or you could check these 2 services for alternatives. I have most of the data printing out that they send back to you, just hit the find me button. But pull your console up to see it all.
Codepen.io Example
You can use Geocoding API, the API purpose is exactly the transformation of an adress into coordinates, then with this coordinates you can render the map, as you already did.
Example:
var geocoder = new google.maps.Geocoder();
//convert location into longitude and latitude
geocoder.geocode({
address: 'chemin des Mouilles - 69130 Lyon-Écully, France'
}, function(locResult) {
var lat1 = locResult[0].geometry.location.lat();
var lng1 = locResult[0].geometry.location.lng();
});
Related
I have one html file like Map.Html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript" src="http://maps.google.com.mx/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var address = "Ahmedabad, India" //change the address in order to search the google maps
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var infoWindow = new google.maps.InfoWindow({
content: 'Hello'
});
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.open(map, marker);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
then i load this html file in webbrowser control DocumentText using below code:
using (StreamReader reader = new StreamReader(System.Windows.Forms.Application.StartupPath + "\\Map.html"))
{
_mapHTML = reader.ReadToEnd();
}
webBrowser1.DocumentText = _mapHTML;
but map not load properly.
zoom in/out, Map/Satellite option, Marker are showing but one white layer on map display.
SOLVED -- for me at least.
For some reason, the Webbrowser control is defaulting to a bad version (experimental?). I changed my initialization script to specify the current 3.3 version and everything is back to normal.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.3"></script>
I am using Markclusterer extension with Google Map API v3 and i ran into certain trouble, The map shows perfectly and also the cluster works but my problem is that certain address share the same Longitude and latitude hence groups the address and show the number of address as a group but i cannot zoom any further into the group. I have tried to increase the zoom but that did not help. Any ideals or solution would be appreciated thanks.
var map;
var markers = new Array();
var locations = new Array();
var infowindow = new google.maps.InfoWindow();
function initialize() {
var center = new google.maps.LatLng(<%= GetCenterLatLng() %>);
// var center = new google.maps.LatLng(52.6500, 1.2800);
var infowindow = new google.maps.InfoWindow();
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
initialiseMarkers();
var mcOptions = { gridSize: 50, maxZoom: 15 };
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
}
function addMarker(marker, content) {
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(content); // this is the trick: html attribute on markerOptions :), I used a array here
infowindow.open(map, this);
});
}
<script type="text/javascript">
var script = '<script type="text/javascript" src="../Scripts/markerclusterer';
if (document.location.search.indexOf('compiled') !== -1) {
script += '_compiled';
}
script += '.js"><' + '/script>';
document.write(script);
</script>
if you have any question please contact me thanks
After days of cranking my brain and maybe some sleepless night. The solution was to group address that contain the same longitude and latitude as one marker and on click it shows all the address within the same vicinity on the popup window(infoWindow)
if you are not familiar with google's geo-autocomplete plugin let me just explain how mine works, i have a text-box, when you type a location inside the text-box the auto-complete plugin gives you a dropdown list of places with similar names. Upon selecting the place you want, the map is generated for you.
What i want is to get the full address of the returned location into a text-box.
During some research i did online i cam across the:
getPlace()
function and the property i want:
formatted_address
but my problem is this is my first time using google's 'geo-autocomplete' plugin so i have no idea how to use these functions correctly. Please help me if you have ever implemented something similar.
This is my code:
<!-- Google Maps API -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<!--
jquery.autocomplete.js requires a minor modification for geo_autocomplete to work
the following script includes the required mod
-->
<script type="text/javascript" src="geo-autocomplete/lib/jquery.autocomplete_geomod.js"></script>
<script type="text/javascript" src="geo-autocomplete/geo_autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="geo-autocomplete/lib/jquery.autocomplete.css" />
<!-- Google Maps API -->
<script type=text/javascript">
$(document).ready(function () {
$('#dialog-form').hide();
$('#btnCancel').css('cursor', 'pointer');
$('#btnPostAlert').css('cursor', 'pointer');
$('#btnCancel').click(function () {
$('#dialog-form').hide();
alert(place.name)
});
$('#btnPostAlert').click(function () {
$('#dialog-form').show();
});
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$("#location").geo_autocomplete(new google.maps.Geocoder, {
mapkey: 'ABQIAAAAbnvDoAoYOSW2iqoXiGTpYBTIx7cuHpcaq3fYV4NM0BaZl8OxDxS9pQpgJkMv0RxjVl6cDGhDNERjaQ',
selectFirst: false,
minChars: 3,
cacheLength: 50,
width: 300,
scroll: true,
scrollHeight: 330,
details: $('#details'),
}).result(function (_event, _data) {
if (_data) map.fitBounds(_data.geometry.viewport);
)};
});
});
</script>
Can you please check it out.
I'm not sure what you mean by "geo-autocomplete plugin", but when you mean the places-autocomplete, you must observe the place_changed event of the autocomplete-instance (which fires when the user selects a place from the dropdown).
Inside the callback you may access the placesResult by using this.getPlace(), formatted_address is (when available) a property of the placeRsult, so you may retrieve it by using this.getPlace().formatted_address
Sample-code:
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var address = this.getPlace().formatted_address||'';
alert(address);
});
I was trying to customize google Column chart to add my own data from controller.
I found easy solution but if someone knows better approach I am happy to modify my code.
Assuming that we copy the code from https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width:50%;float:left"></div>
So the first think I wanted to amend was to display Category name and number of orders.
Solution was simple, I just removed Expensed so it looked like this:
['Category', 'Orders'],
['2004', 1000,],
['2005', 1170, ],
['2006', 660, ],
['2007', 1030, ]
But those are hard coded data and I wanted to have my own category names and name of orders from my Data base.
I created in controller custom string and then pass it to script.
Controller:
foreach (var d in model.DinerCategoryOrders) // Build string for google chart js
{
// ['Pre-School', 1000], Template
GoogleOrdersCount += "['" + d.CategoryName + "', " + d.OrdersCount + "],";
}
model.OrdersForGoogleChart = "google.visualization.arrayToDataTable([['Category', 'Orders']," + GoogleOrdersCount +" ]);";
return model;
In View
I replaced data variable definition simply with my string that I built in controller:
#Html.Raw(Model.OrdersForGoogleChart)
so final build looks like that:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = #Html.Raw(Model.OrdersForGoogleChart)
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
I found amazing that Razor in Asp.Net MVC speaks with js and js will digest string that was passed through razor without any issues.
If you find a beter solution to I believe common problem let us know!
I want to implement the google map in my page. In my page there is one textbox and one button. User need to enter the location for which he want to have the map. Then on clicking of the button the map should appear in a div.
Could anyone provide me the steos to do so?
Thanks in advance.
This is quite easy if you use the google api js file. As a reference you can use this link:
http://code.google.com/apis/maps/documentation/javascript/reference.html
Add the jQuery and GoogleMaps API library in the HEAD section:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
Add new tag to create the google maps object in the div:
var geocoder;
var map;
$(document).ready(function() {
/* Create the geocoder */
geocoder = new google.maps.Geocoder();
/* Some initial data for the map */
mapOptions = {
zoom: 10,
center: new google.maps.LatLng(48.13, 13.58),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
};
Add on click handler for the button:
$('#idMyButton').click(function() {
if (geocoder) {
var address = $('#idMyTextbox').val();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
/* Position the map */
map.panTo(results[0].geometry.location);
/* Put a marker */
new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: address,
});
}
else
alert('Address not found');
};
}
});
I hope this will help.
You some C# control for .NET, for example this one: http://sourceforge.net/projects/gmapdotnetctl/