I am trying to write this in HMTL https://developers.google.com/places/documentation/actions#PlaceReportRequests but I have really big difficulties. Can you help me, what is the HTML code for creating a new places ? I have got API key but I don't know how to put things together.
See this eg. You can get an idea.
Google Maps API Sample
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function() {
alert("You clicked the map.");
});
}
}
</script>
You can get more examples in this link.
http://code.google.com/apis/ajax/playground
Related
I have an application that I wrote years ago in Google Map v2 that displayed a map from a given initial lat/long and placed an icon on the map. This webpage was a form with a text box for the lat and long. The page allowed the user to drag the icon to actual location of where a wildfire was located. The new lat/long was placed into the text box and the user could submit the form. I have not found a suitable replacement in v3 for this process. And now I get an error message that a new API key is required from Google Maps. But I also know that in May that v2 may no longer work. So I would like to update this app to v3. Any ideas of where I can find this? Here is an example of the old page http://nfsdata.unl.edu/wildfire/testmap.asp The page is writen in ASP. And we do not have access to PHP on this server. Thanks
That is a very straightforward application.
Your v2 code:
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var center = new GLatLng(41.33,-96.95);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(center, 13);
var marker = new GMarker(center, {draggable: false});
map.addOverlay(marker);
GEvent.addListener(map, "click", function(overlay, point) {
if (overlay) {
map.removeOverlay(overlay);
} else {
map.clearOverlays()
map.addOverlay(new GMarker(point));
document.getElementById("loclats").value = point.lat();
document.getElementById("loclongs").value = point.lng();
}
});
}
}
//]]>
</script>
Simple translation to v3 (not tested):
<script type="text/javascript">
//<![CDATA[
function load() {
var center = new google.maps.LatLng(41.33,-96.95);
map = new google.maps.Map(document.getElementById("map"),{
center:center,
zoom: 13
});
var marker = new google.maps.Marker({
map: map,
position:center
});
google.maps.event.addListener(marker, "click", function() {
marker.setMap(null);
});
google.maps.event.addListener(map, "click", function(evt) {
var point = evt.latLng;
marker.setPosition(point);
document.getElementById("loclats").value = point.lat();
document.getElementById("loclongs").value = point.lng();
});
}
}
//]]>
</script>
working example
It's exactly the example code of the maps API documentation found here:
Google maps API documentation
I have set up an map and it is showing.
Next step was showing the marker with geocoding..
But it's not working? Can anyone help me out?
Thanks!!
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAS1COH5SeJCKhZ6i6nTi0Fx2qsdvWbAfA&sensor=false"></script>
<script type="text/javascript">
var loMap;
var loGeocoder;
$(document).ready(function()
{
var loOptions =
{
center: new google.maps.LatLng(51.9645, 5.1965),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
loMap = new google.maps.Map(document.getElementById('map'), loOptions);
loGeocoder = new google.maps.Geocoder();
showMarkers();
});
function showMarkers()
{
console.log('World');
loGeocoder.geocode( { 'address': 'Den Bosch'}, function (results, status)
{
if(status == google.maps.GeocoderStatus.OK)
{
console.log('Hello?');
loMap.setCenter(results[0].geometry.location);
console.log(results[0].geometry.location);
var marker = new google.maps.Marker(
{
map: loMap,
position: results[0].geometry.location
});
}
else
{
console.log('Error');
}
});
}
</script>
<div id="map" class="search_map" style="width: 220px; height: 240px"></div>
An old question but as I recently hit the problem I thought I would share my solution. I found that something in the Javascript on the rest of my site was interfering with Google Maps. I was not getting any errors in Firebug or Chrome Console so I could not track down exactly what the conflict was.
I found that if I put the Google Map onto a blank ASPX page (i.e. no MasterPage with all of the Javascript and CSS from the rest of my site) that it worked fine.
The solution? I put the Google Map into an Iframe and now it works just fine. If you inspect the source of the Google Map example code, they use an Iframe too so there must be something to that.
you need to change the line new google.maps.LatLng(51.9645, 5.1965) to
var place = new google.maps.LatLng(51.9645, 5.1965);
and then use place as center in loOptions .
same as in marker also it really works :)
And import jquery as well
at the start of page.
I am trying to create a site that has option to add maps to the site using google maps api. I found hundreds of tutorial and blog posts on embeding map in the site. But what I actually want is a way to give the user choose a place on the map and add marker. Then get the co-ordinates of the marker and store it in the database of retrieving and showing in the front-end. I have seen this option given wordpress plugins like mappress. But now I'm trying to achieve this in codeigniter. I can't find any thing to start on. Can any one point out some one tell me where to start?
This is really easy the 3rd version of the Google maps API. Versions before that where much more complicated, and most of the tutorials floating around are for those versions. Have a look through the API documentation and examples.
Adding a marker is as simple as:
var marker=new google.maps.Marker({/* ... see API */});
Adding an event (eg click) to a marker is as simple as:
var marker_click=new google.maps.event.addListener(
marker,
'click',
function() {/*...*/});
Sounds like you'd want a click event for the map, which you'd translate into a latlong, then (a) generate a marker on the map with JS, and (b) post that back to your server using AJAX, or by storing the values in a hidden form field to be submitted after.
Update:
Mostly from the API documentation # http://code.google.com/apis/maps/documentation/javascript/events.html:
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
/*Do your processing here:
* eg. ajax.post('addMarkerDB&lat='+location.lat+'&long='+location.long);
*/
}
Note: There is no ajax.post function by default, but there could be :)
I have Google Maps on a website that sets the marker based on an address.
Here's an example (click the location tab): http://www.weddinghouse.com.au/wedding-directory/zoning-in-personal-training/
As you can see there is no marker on the map. But if you scroll upwards the marker is sitting just out of view.
Is there something wrong with my code? The weird thing is very few addresses actually show correctly but the majority don't. Is there something wrong with my code or is it Google?
Here is my JavaScript Code:
<script type="text/javascript">
$(document).ready(function(){
load('Zoning In Personal Training', '27 Sitella Drive, berwick, VIC, 3806');
});
</script>
-
function load(title, address, type) {
if (GBrowserIsCompatible()) {
var map;
var geocoder;
map_id = document.getElementById("map");
map = new GMap2(map_id);
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(24, 0), 17);
map.enableDoubleClickZoom();
if (type == 'sat') {
map.setMapType(G_SATELLITE_MAP);
map.addControl(new GHierarchicalMapTypeControl());
} else {
map.setMapType(G_NORMAL_MAP);
}
geocoder = new GClientGeocoder();
geocoder.getLocations(address, function (response) {
map.clearOverlays();
if (!response || response.Status.code != 200) {
//map_id.innerHTML('Could not find address on Google Maps');
} else {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
map.setCenter(point, 17);
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
// Creates one of our tiny markers at the given point
function createMarker(point, index) {
var marker = new GMarker(point, icon);
var myMarkerContent = "<div style=\"width:200px; overflow:auto;\"><strong>" + title + "</strong><br />" + address + "</div>";
map.addOverlay(marker);
marker.openInfoWindowHtml(myMarkerContent);
GEvent.addListener(marker,"click",function() {
marker.openInfoWindowHtml(myMarkerContent);
});
}
createMarker(point);
}
});
}
}
If you load the page in google maps and then click on the "link" function, it gives you code to embed the site as an iFrame instead of messing about with the API- you could try this?
There is also a bug with this that sometimes the marker is not centered, particularly on a hidden div. My best way to overcome this is to put the iFrame of the google map in a separate file (e.g. pages/map.html) and then to make that the source of the iFrame in your page.
E.g.- instead of iFrame src="maps.google.com/ etc etc"
have it as src="pages/map.html"
Anyway, this post is 6 months old but better late than never!
For me, the problem was the iframe having size 0 (display:hidden) when the map was loaded. I added a delay to load the map after the iframe was loaded. This race condition could explain why some of the addresses rendered correctly.
Perhaps try this:
<script type="text/javascript">
$(document).ready(function(){
setTimeout("delayedLoad()",100);
});
function delayedLoad() {
load('Zoning In Personal Training', '27 Sitella Drive, berwick, VIC, 3806');
}
</script>
(thanks to https://groups.google.com/forum/#!topic/google-maps-api/nN0y2pSr2dQ)
I have a town name, gmap modules and plg. i want to focus desired location in gmap by giving town name as input instead of longitude and latitude. Is there any way to do this in Joomla 1.5.x.
Thanks in advance
naveen
You will need a GeoCoder to get the location based on the city name. Don't know nothing about Joomla, but here is and example using JavaScript.
The HTML
<div id='myMap' style="position:relative; width:740px; height:400px;"></div>
The script
You have to complete with the Google API Key and the city you want
<script src="http://maps.google.com/maps?file=api&v=2.x&key=XXXXX">
</script>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function')
{ window.onload = func; }
else {
window.onload = function()
{ oldonload(); func(); }
}
}
var map = null;
var geocoder = null;
addLoadEvent(initialize);
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("myMap"));
map.setCenter(new GLatLng(-12.08, -53.08), 4);
map.addControl(new GSmallMapControl());
map.addControl(new GOverviewMapControl());
geocoder = new GClientGeocoder();
showAddress('YourCity, YourCountry');
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
$("#myMap").hide();
} else {
map.setCenter(point, 8);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
</script>
I was looking for a way to do something similar myself. I tried using the Google Maps API to search for the location, but it was sometimes wrong. Eventually I ended up querying the Wikipedia page relating to the town and parsing the coordinates, then using those. Probably not the solution you were looking for, but it works for me. I would advise trying to search the Maps API first as Eduardo details, but if that doesn't work, this might.
You can make a HTTP call from Javascript to Google's geocoding service, passing it a place name/postcode, and getting lat/long back.
I do this using the CSV option as I am calling it from ASP, but I think you can get back XML or JSON too.
Fire off this URL if you have a Google maps API key:
http://maps.google.com/maps/geo?gl=uk&q=guildford,+uk&output=csv&key=XXXXXXXXXXX
First parameter back is response code. 200 means success.
Then you get latitude and longitude, comma seperated.