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 :)
Related
JavaScript:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=mykey"type="text/javascript"></script>
JavaScript Function:
<script type="text/javascript">
var geocoder;
var map;
var latlng;
function codeAddress(address) {
geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latlng=results[0].geometry.location;
latlng = new google.maps.LatLng(latlng);
var myOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
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);
}
});
}
}
</script>
I reads following questions but my problem is not solved.
Google Maps JavaScript API RefererNotAllowedMapError
Google maps API referrer not allowed
Google Maps API error: Google Maps API error: RefererNotAllowedMapError
The problem is , when i open my website like this.
http://mysiste.com/contactus
it is not showing map and showing following error.
Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: http://comprettainsurance.com/contactus"
while if i open my site like this.
http://www.mysiste.com/contactus
the maps are working perfectly.
My Credential Page where i add domain like this.
so why it is not showing maps without www?
*.comprettainsurance.com/* does not match http://comprettainsurance.com/contactus (it matches any subdomain of comprettainsurance.com, but not the domain itself).
You need to add an additional referrer line:
comprettainsurance.com/*
Use simple like this this worked for me everywhere
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=key&libraries=places,drawing,geometry"></script>
when you use defer the script will be loaded when the document is closed- the content has been loaded. Furthermore external deffered scripts will be parsed after inline defferred scripts.
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
This question already has answers here:
Google Maps : Issue regarding marker icons and geocoding
(1 answer)
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 8 years ago.
I am working on Google Maps API v3 javascript. I am using the Geocoder feature where I am passing a city name and plotting it on the map. Along with this marker, I want to add a separate info window for every marker but I am not able to do that. All the infowindows are displaying the content that was set for the last marker instead of setting a different info window for each. Please find the javascript code below:
function initialize() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
var jString = JSON.parse(address);
var infowindow;
for (var key in jString) {
contentStr = JSON.stringify(jString[key]); //This is step where I am setting the content which is independent for every maker
if (jString.hasOwnProperty(key)) {
geocoder.geocode( { 'address': key}, 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
});
infowindow = new google.maps.InfoWindow({
content: contentStr//Not able to access 'contentStr' set above.
});
infowindow.open(map,marker);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
}
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);
}
google.maps.event.addDomListener(window, 'load', initialize);
After debugging I understood that for some reason, the value of the variable 'contentStr' being set during the last iteration of 'for' loop is only being used for all the below function calls made:
geocoder.geocode( { 'address': key}, function(results, status) {
So basically, I am not able to pass the variable 'contentStr' into the function defined in the argument of another function. I think I am missing something basic here. Could anyone please guide me about this?
Thank you!
I have had the same problem many times. Stolen from link below. You need to attach the infowindow to your marker.
Marker content (infoWindow) Google Maps
function createMarker(lat, lon, html) {
var newmarker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: html
});
newmarker['infowindow'] = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(newmarker, 'mouseover', function() {
this['infowindow'].open(map, this);
});
}
A second way of doing this. :
Google Maps API V3 infoWindow - All infoWindows displaying same content
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
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