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/
Related
I'm working on ASP.Net MVC and we're using an external .JS file to place all javascript code.
I firstly placed the below Google Map code in the View and it is working nice displaying the map in the view page... but when I sent my code for code-review, code-review folks require me to reference it in the .JS file. I tried so many times to put it in a .JS file but I can't have it displayed in a view.
Seems like they want the google map initialization variable and the google map js script inside the js file airplanDetail.js and, only have the reference in the view page. They want clean code/view page
Can you please assist?
<div class="googleMapAPI">
#{
var googleAPIKey = ConfigurationSettings.AppSettings["CWU_GoogleAPI_Key"];
<script src="https://maps.googleapis.com/maps/api/js?key=#googleAPIKey&callback=initMap" type="text/javascript"></script>
}
So in the ASP.Net MVC view page, at the bottom, there's a the below code that refence to the JS file.
#section Scripts {
#Scripts.Render("~/Scripts/Views/Product/airplanDetail.js")
}
and inside the airplanDetails.js file there's a code looks like the below
$(function () {
Initialize();
});
function Initialize() {
google.maps.visualRefresh = true;
var propertyLatitude = document.getElementById("latitudId").value;
var propertyLongitude = document.getElementById("longitudId").value;
var propertyLocation = new google.maps.LatLng(propertyLatitude, propertyLongitude);
var mapOptions = {
zoom: 14,
center: propertyLocation,
mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var myLatlng = new google.maps.LatLng(propertyLatitude, propertyLongitude);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Location found'
});
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
}
Try putting the script tag in the section, ie:
<html>
<head>
#Scripts.Render("~/Scripts/Views/Product/airplanDetail.js")
</head>
<body>
</body>
</html>
I'm writing a program with AmMaps where I want a user to click on a map of a country, and to be able to select and save locations.
I'm stuck on getting data back after the user clicks on the map. I used the "clickMapObject" event on another page, but in this case they aren't clicking anything.
<script>
var map;
$(document).ready(function () {
map = new AmCharts.AmMap();
map.pathToImages = "ammap/images/";
var dataProvider = {
mapVar: AmCharts.maps.irelandHigh,
getAreasFromMap: false,
};
map.dataProvider = dataProvider;
map.areasSettings = {
autoZoom: false,
color: "#CDCDCD",
colorSolid: "#5EB7DE",
selectedColor: "",
outlineColor: "#666666",
rollOverColor: "#88CAE7",
rollOverOutlineColor: "#FFFFFF",
selectable: false,
};
map.addListener("click", click);
map.write("mapdiv");
function click() {
//Can i get long and lat here?
};
});
</script>
I didn't use this map control, but I ever used google map, so I think maybe you can try this:
map.addListener("click", function (e) {
//get lat and lng from e object
var latLng = e.latLng;
});
Ok, I found it.
Code:
map.addListener("click", function (event) {
var s = map.getDevInfo();
// then you can access s.Longitude or zoomLongitude
});
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();
});
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);
});