So i checked out all the relating posts. I was wondering, which i have yet to be able to find with about 20 google searches and about 45 website visits, if it is possible, based on users information that i could load a google map to display the users desired location.
Your probably asking, "Give me more details, that could mean anything!"
Your right, it could. So say i have a user that gives me (i got it from the database)
var stuffIGotFromMyWebServerWithPHPandMySQL = {
myComment: "Hey Everyone, party at my place!",
country: "US",
state: "MT",
city: "Bozeman",
address: "Emerson Cultural Center"
};
Now that i have the information of what city/state/country the event is in, and the name of a place, The Emerson is a real place in bozeman that google maps will recognize, is there a way to load a map with a marker at that location? I have the latitude/longitude for bozeman, MT, but i do not have such information about the Emerson. Is there a way i could provide the just the words, and have it bring up the place with a marker, on a static, no user interaction allowed map?
and i would probably want to load it through js
Thanks,
Michael B Paulson
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var marker;
function initialize() {
var geocoder = new google.maps.Geocoder();
geocoder.geocode(
{
'address': 'Emerson Cultural Center, Bozeman, MT'
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 6,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker = new google.maps.Marker({
map:map,
draggable:false,
animation: google.maps.Animation.BOUNCE,
position: results[0].geometry.location
});
}
}
);
}
</script>
<div id="map_canvas" style="height:300px;width:300px"></div>
try this code and see if helps, you can use the Geocoder fro the google maps api to convert text to latlang.
you can see the following example from the documentation here http://code.google.com/apis/maps/documentation/javascript/examples/geocoding-simple.html
Related
I'm trying to make a Google Map that only shows the Netherlands. But when I use zoom level 6 it shows Belgium and Germany as well and when I use zoom level 7 it zooms too far in that it doesn't show the complete country.
How can I make The Netherlands show only, and not germany and belgium (or at least a very tiny part of them).
Currently it looks something like this:
go to http://www.gadm.org/download, download the adm0 file for the Netherlands
Combine that polygon (as the inner ring(s)) with a polygon that covers the whole earth
use the winding reversal tool to reverse any inner polygons that don't wind opposite the outer ring.
zip up the resulting kml, rename to kmz. Display on the map using geoxml3
Code:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(85.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var geocoder = new google.maps.Geocoder();
var geoXml = new geoXML3.parser({
map: map,
zoom: false,
});
geoXml.parse("http://www.geocodezip.com/geoxml3_test/kmz/nld_adm0_inverted.kmz");
google.maps.event.addListener(geoXml,'parsed', function() {
geocoder.geocode( { 'address': "Netherlands"}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.fitBounds(results[0].geometry.viewport);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
})
}
google.maps.event.addDomListener(window, "load", initialize);
Working example
To restrict it to be always displayed on the map see this page from Mike Williams' v2 tutorial
working example
I want to add a map to my site to show a local business, but I don't want to use an image, I wanted to use google maps like I have seen on some websites.
I tried using this:
https://developers.google.com/maps/documentation/javascript/reference#MapOptions
But it doesn't work (do you need to have it up on a server to work? I am just testing it local at the moment)
EDIT: Works now, I don't know what I did but it works.
there are few things you need to add ADD LAT, ADD LONG and ADD YOUR ADDRESS HERE
<div id="map-canvas" style="height:300px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script></script>
<script>
jQuery(document).ready(function($){
codeAddress();
});
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(ADD LAT, ADD LONG);
var mapOptions = {
zoom: 14,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
geocoder.geocode( { 'address': 'ADD YOUR ADDRESS HERE'}, 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());
</script>
If you just want to create a map to show where is your business as most the websites the answer is much simpler.
1 - Go to Google maps website and search for the address you want to add.
2 - Once you find the address in the button right of the screen click in settings
3 - Select share a embedded map.
4 - Select the size of the map and you will get something like this on the bar in the side
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3192.61190945592!2d174.74475940000002!3d-36.85176959999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d0d4793eebb1d67%3A0x6830f22a202256c9!2sPonsonby+Rd!5e0!3m2!1sen!2snz!4v1393896861642" width="400" height="300" frameborder="0" style="border:0"></iframe>
Put into your website and job done :)
I have a Google Maps Application and I want to put custom Icons instead of the generic red icon that usually shows up. But no matter what I do I can not set a different icon it always shows up as the red one. I read that you can not have https in the url for icons so I uploaded it to an image host but I still can't get the icon to change. How do I get a custom icon on the map or do I have to go with bing?
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
function codeAddress() {
initialize();
var address = document.getElementById("address").value;
range = document.getElementById("distance").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,
icon: "http://labs.google.com/ridefinder/images/mm_20_red.png"
position: results[0].geometry.location
});
lat1 = results[0].geometry.location.lat();
lng1 = results[0].geometry.location.lng();
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
load();
}
Notice where it says:
icon: "http://labs.google.com/ridefinder/images/mm_20_red.png"
Not matter what I change that too it always shows the red generic icon.
You can load marker images over both HTTP and HTTPS on your page. However, you will want to make sure that the scheme matches the containing page's scheme (or at least, make sure that you use HTTPS if the page does too).
It seems you have typo in your MarkerOptions object: a missing comma after the icon string.
var marker = new google.maps.Marker({
map: map,
icon: "http://labs.google.com/ridefinder/images/mm_20_red.png",
position: results[0].geometry.location
});
At the moment I serve pages showing a google map with a marker using an address retrieved from my database. I currently use a fairly simple piece of javascript code to add that marker by geocoding. My js code is dynamically generated by php. All is static except the "query" definition which gets initialized with the address search string.
I new to OSM and did some research to see if it can achieve this. At the moment I'm not sure it can. I found there are several js api's like OpenLayers which I'd need to use.
To sum it up :
How to add and show a single marker to an OSM, where the location is based on an address instead of a latitude/longtitude pair?
My current google based code is:
<script>
var geocoder; var map; var marker;
var query = 'Deutschland, Berlin, Platz der Republik 1, 11011';
function initialize()
{
var companyLocation = new google.maps.LatLng(51.964577109947506, 5.07568359375);
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = { zoom: 11, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
codeAddress();
}
function codeAddress()
{
var address = query;
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,
title: "Bundestag",
labelContent: "",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
} else {
$('#map_canvas').html('<p style="margin: 15px">Address could not be found</p>');
}
});
}
</script>
See http://wiki.openstreetmap.org/wiki/Nominatim
Not going to write the code for you, but that wiki page has detailed information on how to call the Nominatim geocoding service.
I have profile pages for users of my little card game, like this one - where I display their position by looking up their city. My current jQuery code is here:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// the city name is inserted here by the PHP script
findCity('New-York');
});
function createMap(center) {
var opts = {
zoom: 9,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
return new google.maps.Map(document.getElementById("map"), opts);
}
function findCity(city) {
var gc = new google.maps.Geocoder();
gc.geocode( { "address": city}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var pos = results[0].geometry.location;
var map = createMap(pos);
var marker = new google.maps.Marker({
map: map,
title: city,
position: pos
});
}
});
}
</script>
......
<div id="map"></div>
and it works well, but I only get a simple red marker with a dot displayed:
Is there please a way to display the user avatar instead of the simple marker?
I have URLs for user pictures in my database (together with names, cities, etc.)
They are mostly big images (bigger than 200x300).
The Google maps API does support custom icons, and it's explained in their documentation here.
An example can be found here