I have data of a location's latitude and longitude. I want to display it into a map in my application. I planned to use Google Maps to display this location to user.
To do this, would I need the Google Maps API? or the Google Maps Coordinate?
I've looked into their website, but all those varieties just makes me confused.
I only need it to display the data (latitude and longitude) into visual (map) to make my application more user-friendly.
I have never used Google Maps API before, so for those that have experience in it, please guide me.
Google Maps API : http://www.google.com/enterprise/mapsearth/products/mapsapi.html#
Google Maps Coordinate: http://www.google.com/enterprise/mapsearth/products/coordinate.html?rd=1#
On a side note, I might sell the application (using subscription), so I would need the Google Maps API license. Anyone know how much it is and how is the procedure? (e.g., monthly or yearly basis, per user or per use, etc.)
EDIT
Or is there any other API for the mapping? something like Google Maps API.
We have to give latitude and longitude .
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
window.onload = function () {
var mapOptions = {
//give latitude and long
center: new google.maps.LatLng("18.9750", "72.8258"),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
//give latitude and long
var myLatlng = new google.maps.LatLng("18.9750", "72.8258");
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Mumbai"
});
}
</script>
<div id="dvMap" style="width: 500px; height: 500px">
Related
I have a custom map I created by adding lots of location markers. These are
the branch locations.
Next, I have created an excel file where the user can enter a customer location and a link will be created that opens the above custom map. Right now it centers on the customer location, but doesn't show a marker. The url looks something like this:
https://www.google.com/maps/d/viewer?mid=**mycustommap**-&hl=en&ll=22.9860302%2C-11.2430203&z=15
The lat/long are the coordinates I would like to mark on the custom map.
How do I add a marker with those coordinates to my custom (my places) map?
One option is to use the "Exported KML" from your custom My Maps map to render the data on a Google Maps Javascript API v3 KmlLayer. Then add your marker to it, the normal Google Maps Javascript API v3 way. You would have to host your map somewhere and process the query string for the coordinates to load the marker.
Most of the example is from this related question: Render a My Maps using Google Maps JavaScript API, with the exception of the marker code.
code snippet: (data from this MyMap)
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.KmlLayer({
url: "http://www.google.com/maps/d/kml?mid=zNPjLbo835mE.k3TvWfqGG-AU",
map: map
});
// Add a marker
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(32.735316, -117.149046),
title: "My Marker"
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
I have to put a Map from Google (Google Maps or GoogleMyMaps) in a website. I need the map to show a lot of different places all over my country (about 200 places). I already have a GoogleMyMaps with all the places.
But I need the map to have a zoom limitation/restriction : I want people NOT TO KNOW exactly where the places are, which means the zoom must stop before it gets accurate enough.
I know you can control the zoom with GoogleMaps JS API with something like
var opt = { minZoom: 6, maxZoom: 9 };
map.setOptions(opt);
But I dont know how to add places on a Google Maps (still I have them all on a GoogleMyMaps).
Thank you for your time
Thank you everyone for your help.
So most of the time, GoogleMyMaps uses .KML files (as import or export), and it is possible to upload the data from a .KML file into Google Maps.
Here is an example :
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: {lat: 1, lng: 1}
});
var kmlLayer = new google.maps.KmlLayer({
url: 'THE_KML_FILE_URL',
suppressInfoWindows: true,
map: map
});
kmlLayer.addListener('click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap"
async defer></script>
But note that the KML file has to be online, it does not work on local (Google's API needs to have access to your file).
Then you can customize your Google Map using Google Map Javascript API (https://developers.google.com/maps/documentation/javascript/tutorial).
Thank you everyone for your time
I'm using google maps API to determine a building(Place) which is a Google Point of interest. I'm trying to get the place reference for future use. but due to API limitation or whatever limitation. I can't get the exact place. As an example below latitude longitude belongs to "The university of Sydney". Using this code I could derive University of Sydney but as second result and also I tried many lat long but sometime appropriate result comes in the end or first. These places are prominent to Google Places Search system. The radius of this request looks lame to me. Is there any way to retrieve the exact place ?
var pyrmont = new google.maps.LatLng(-33.88858402464521, 151.18735671043396);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: 1,
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
Advanced Thanks
Code with V3 API.
function initialize ()
{
if (GBrowserIsCompatible())
{
var ch = new GLatLng (0,0);
var myOptions = {
zoom:7,
center: ch,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay = new google.maps.DirectionsRenderer(map, document.getElementById("map"));
directionsDisplay.setMap(map);
}
}
Code with V2 API.
function initialize ()
{
if (GBrowserIsCompatible())
{
map = new GMap2 (document.getElementById("map"));
map.setCenter (new GLatLng(0,0),1 );
}
}
The V2 API code worked flawlessly, the V3 API code is NOt displaying any map.
What's the point that I am missing?
EDIT
Modified the V3 code as follows, but still no maps:
var chicago = new google.maps.LatLng (0, 0);
var myOptions = {
zoom:1,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
Make sure you are loading the correct Google Maps API, that you have a div tag with an id of map, and (for good measure) that you give the div a height and width. (Perhaps better to put the height and width in a stylesheet, but for clarity, I'm including it inline here.)
Here's a web page with your post-edit code. Try it. Works for me.
<html>
<head>
<title>Google Map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map" style="height:500px;width:500px"></div>
<script>
var chicago = new google.maps.LatLng (0, 0);
var myOptions = {
zoom:1,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
</script>
</body>
</html>
In V3, all the names have changed. For example, GLatLng is now google.maps.LatLng. You will need to revise your code to use the new names.
A link to the docs in case you don't have it
There is no GLatLng in v3, change it to google.maps.LatLng
center: chicago,
I had the same symptoms, my v2 maps would not display with V3. When I look in the browser console logs, I'm seeing the error: Uncaught ReferencedError: GBrowserIsIncompatible is not defined.
Per the Google V2 to V3 Migration Guide, GBrowserIsIncompatible is no longer supported. I haven't found an alternative and just removed the logic related to this function. This site suggests just removing the function.
I found other problems with migrating which are addressed in the Google Migration Guide link above.
1- ensure your google map API key is correct.
2- it's may be not enabled in your google map console.
3- wrongly enabled the location API instead of the map API.
I am building an accommodation website where users can advertise their room with their address.
I want to know if i can use the zipcode to show the exact location in Gmaps which i believe would be much cooler.
I would be very thankful if someone can guide me with simple set of steps to do the same.
thanks in advance!
You may want to use the Client-side Geocoder in the Google Maps API, as in the following example:
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
var geocoder = new GClientGeocoder();
geocoder.setBaseCountryCode("us");
geocoder.getLatLng(
"90210",
function(point) {
if (point) {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
}
}
);
}
}
// ...
<div id="map_canvas" style="width: 500px; height: 300px"></div>
Simply change the "90210" parameter with the zip code of your users.
Check out the Google Maps API. You can use their geocoding service to convert a full address into coordinates, and then display a marker in a Google Map.
There are libraries available for various languages and platforms.
For PHP, here's an article on Geocoding in PHP (it refers to V2 of the Maps API, though; V3 is the brand-newest.)