Morning all.
I'm am currently using the below code to load my Google Map's API V3 at a specific long-lat, it's for a client and I'm wondering if I can load an infoWindow similar to the one the pops up on Google Maps with the business information, review stars etc.
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(lat-long),
disableDefaultUI: true,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("location"),
mapOptions);
var point = new google.maps.LatLng(lat-long);
var marker = new google.maps.Marker({
position:point,
map: map,
});
}
</script>
Is this done in a different API? If so could anyone point me to some helpful information?
Sounds like you might be looking for the Places API/Library:
https://developers.google.com/maps/documentation/javascript/places#place_details_responses
Not sure if it has everything you find on Google Maps.
Related
I made a google map app use google map api v3 and kml file. However, sometime it work, and sometime it always zoom to the max level and center is not mine options.center(near Africa).
Why is it?
And my kml file was uploaded to mine Google Map account.
function initialize1() {
var myLatlng = new google.maps.LatLng(30.566991,114.315491);
var myOptions = {
zoom: 10,
center: myLatlng,
overviewMapControl:true,
overviewMapControlOptions: {
opened:true
},
scaleControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map1= new google.maps.Map(document.getElementById("map_canvas1"), myOptions);
var nyLayer = new google.maps.KmlLayer('https://maps.google.com/maps/ms? **************',
{suppressInfoWindows: true});
nyLayer.setMap(map1);
google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInDiv(text);
});
}
Thanks very much,
That behavior occurs when the kml file doesn't exist/can't be found. You haven't provided the URL of the file to allow testing that.
Another thing to check would be the validity of the file:
http://www.feedvalidator.org/
You could also check the KmlLayerStatus provided by the API to see what it reports.
I've been playing around with the google maps api through javascript (I'm also new to javascript).
I've experimented with adding info windows and markers to the map by following the api examples.
What I want to do is overlay a KML file onto a map of Ireland - and I searched the fusion tables for the KML file contains the information for the borders of the counties of Ireland.
The kml file came from a fusion table here:
http://www.google.com/fusiontables/DataSource?dsrcid=935280&search=ireland+counties&cd=0
I exported it to a kml file and uploaded it to a public site (see javascript - I'm not able to post more than 2 links)
I'm trying to load the kml file in the link below - that map I've selected appears but the KML overlay does not.
http://songsaboutsuperheroes.com/index.html
I've tried using a link to the fusion table ID and had no luck with that.
I've also tried to use the KML Network link and had no luck with that.
So I'm trying to load the KML file directly like I've seen in tutorials.
Can anyone point me in the right direction - I'm not sure what I'm doing wrong - thanks in advance!
Here is the Javascript I'm using:
function initialize() {
var latlng = new google.maps.LatLng(53.36942,-6.378288);
var myOptions = {
zoom: 7 ,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myLayer = new google.maps.KmlLayer(
'http://songsaboutsuperheroes.com/Ireland_Counties.kml');
myLayer.setMap(map);
}
This works - I accessed the fusion table that holds the kml data directly:
var latlng = new google.maps.LatLng(53.36942,-6.378288);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
layer = new google.maps.FusionTablesLayer(935280, {
suppressInfoWindows: true
});
layer.setQuery("select geometry,name_1 from 935280");
layer.setMap(map);
var kmlUrl = 'http://www.yoursite.com/YOUR_KML_FILE.kml';
var KML_single = new google.maps.KmlLayer(kmlUrl, {color:"#4385F1" } );
KML_single.setMap(map);
EXML_single = new GeoXml("EXML_single", map, kmlUrl, {
sidebarid:"sidebar",
iwwidth:280
});
EXML_single.parse('SOME LOADING TEXT HERE');
I am working on google map api v3 and want to add a feature of editing the polyline. As of the google documentation. There are 3 events fired when a polyline is in edit mode.
insert_at
set_at
remove_at
I know when first two events are fired and am able to get the edited coordinates as well. I also want to delete a node but not sure how it works?. Can anyone tell me when will the event "remove_at" will be fired ?
According to the documentation these events belong to class google.maps.MVCArray. You can find there also a description of remove_at event:
This event is fired when removeAt() is called. The event passes the
index that was passed to removeAt() and the element that was removed
from the array.
But I'm not sure you can use these events to handle changes while editing the Polyline. That's very interesting, please let us know if it works and how!
'remove_at' will be triggered when you undo an edit to an existing overlay that results in control point(s) getting removed.
I've created a fiddle to demonstrate this.
From the fiddle:
var myLatlng = new google.maps.LatLng(60.629765, 6.424094);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var drawMan = new google.maps.drawing.DrawingManager({
map: map,
drawingControl: false,
polygonOptions: {
editable: true,
draggable: true
}
});
drawMan.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
google.maps.event.addListener(drawMan, 'overlaycomplete', function (event) {
// When draw mode is set to null you can edit the polygon you just drawed
drawMan.setDrawingMode(null);
google.maps.event.addListener(event.overlay.getPath(), 'remove_at', function () {
alert('remove_at triggered');
});
});
i am new to google maps,
and i would like to integrate it into my website ( Yellow pages kind of site ).
i currently have the following code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
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);
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 500px; height: 300px; position: relative; background-color: rgb(229, 227, 223);"></div>
</body>
</html>
This code does work, and showing me the map for the specific Lat/Long
but, i want to be able to specifiy an address and not lat/long params,
since i do have the addresses of the companies in the phonebook, but do not have the lat/long values.
i tried searching for this, but i only found something similar on the V2 version, which was deprecated.
What you are looking for is Geocode feature in google service; first give an address to get a LatLng, then call setCenter to pan the map to the specific location. Google's API wrapped it very good and you can see how it works through this example:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').value;
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
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You can use the google geocoder: http://code.google.com/apis/maps/documentation/geocoding/ Be careful - you can be out of quota and so the request to the geocoder will failed
Use of the Google Geocoding API is subject to a query limit of 2,500 geolocation requests per day.
If you are okay with an iframe, you can skip the geocoding hassle and use the Google Maps Embed API:
The Google Maps Embed API is free to use (with no quotas or request
limits), however you must register for a free API key to embed a map
on your site.
For example you would embed this into your page (replacing the ellipsis with your own personal Google API key):
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?
q=301+Park+Avenue,+NY,+United+States&key=..."></iframe>
Obviously the usefulness of this will depend on your use case but I like this as a quick and dirty solution.
There is a plugin for jQuery that makes it, it's name is gMap3, and you can see it in action here:
http://gmap3.net/examples/address-lookup.html
and here
http://jsfiddle.net/gzF6w/1/
gmap3 doesn't actually do it for you, as suggested by another answer: it just gives you an API to abstract-away the geocoding part of the process.
The answer is: Google doesn't actually allow you to do that anymore. At least not in V3, and since that's been around for more than a year...
You could actually send addresses for driving directions, but their API has made it illegal to send an address for a normal (embedded, API-based) map of any sort. The daily quota on geocoding is their play at "still allowing" addresses while in reality completely disallowing them for any real website.
You can link to a map with an address, though I cannot find this in Google's docs either:
http://maps.google.com/maps?f=d&saddr=&daddr=this is my address, city state
Maybe I just have a problem with this because they don't provide any clear, easy documentation - I have to come to StackOverflow to get the answers I'm looking for. Ie. they vaguely mention you need an API key to bypass the anonymous limits, but do not link either to what those limits are or how to use their API without a key. Which is what I want to do for skunkworks or proof-of-concept development. Instead Google wants to push their Maps for Businesses, etc., instead of providing actual information.
At the moment I use Google Static Maps API:
<img src="http://maps.google.com/maps/api/staticmap?center={$listing.City},{$listing.State}&zoom=5&size=145x145&maptype=roadmap&sensor=false"></img>
As you can see I am using Smarty to populate the location with:
{$listing.City},{$listing.State}
I would like to add a marker and zoom control utilizing Google Maps API v3. What is the most efficient way to achieve this? I assume I need to use geocoding?
Thanks
I recently had a project that include a Google Map using API v3. I chose to wrap the API into a jQuery plugin. The API is pretty straight forward. Here is a link to a blog post where I talk about the jQuery plugin. More importantly, you can get the plugin code. That code shows all the details on how to create a map and add markers.
http://blog.bobcravens.com/2010/06/a-google-maps-version-3-jquery-plugin/
Here are a few snippets of importance:
Include the following in your header:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
This snippet creates a map:
var latlng = new google.maps.LatLng(lat, lng);
var settings = {
zoom: options.zoom,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
navigationControl: options.navControl,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var theMap = new google.maps.Map($("#div_id")[0], settings);
To add an overlay do the following:
var latlng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: latlng,
map: theMap,
title: "title"
});
I encourage you to look at the plugin for more details. Hope this helps.
Bob