I want embed fully Google map into my website. It mean includes search bar in left.
google map
The link directly on browser address bar will be work https://www.google.com/maps/search/Automation+Supplies+Limited/#53.4455454,-7.5863638,8z?hl=en-IE But when I place it in iframe it not work.
<iframe src="https://www.google.com/maps/search/Automation+Supplies+Limited/#53.4455454,-7.5863638,8z?hl=en-IE"></iframe>
Thanks
You can't.
This isn't offered by Google. All you can do is link to Google Maps.
In the google map link that you have mentioned above, open it and click on Menu bar. Choose Share or embed map and you may find your html code for website.
Here is an example of your map: <iframe src="https://www.google.com/maps/embed?pb=!1m12!1m8!1m3!1d1212742.5438103776!2d-8.069837255079928!3d53.59579689997422!3m2!1i1024!2i768!4f13.1!2m1!1sAutomation%20Supplies%20Limited!5e0!3m2!1sen!2s!4v1573529617789!5m2!1sen!2s" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen=""></iframe>.
If you want to show the map in your website and put a search bar in the left side, as an alternative, you can use Google Maps Platform's Maps JavaScript API to do this.
Here is a sample code I made that looks similar to the implementation that you want which is in the image in your link.
In this example, I used the Maps JavaScript API to show the map
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 53.467079, lng: -6.719628},
zoom: 8,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
});
and use the Google Maps Places API library to put the Autocomplete
var autocomplete = new google.maps.places.Autocomplete(input);
as a search mechanism on the map.
Hope this helps.
Related
Trying to use the Google Map Javascript API.
I have the 3 things on the page which I believe are required to display a map.
The script tag in the header:
<script src="https://maps.googleapis.com/maps/api/jskey=APIKEY&map_ids=MAPID&callback=initMap"
async>
</script>
The div tag with an id of map:
<div id="map"></div>
Create a new map in js:
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAPID' });
But when the page loads a request URL that is getting blocked. Blocked URL is:
https://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent?1shttp://127.0.0.1...APIKEY...
Been googling 'QuotaService.RecordEvent google maps blocked' but I haven't been able to find a solution.
The API is attached to a project that has billing enabled.
Any idea why it is getting blocked? I'm sure I did something wrong, but can't figure out what.
Found what was causing the URL to be blocked.
uBlock Origin
I turned it off and the URL is no longer blocked. Which is weird since a lot of people use uBlock. I'm a Google Maps API rookie so I will figure it out but the URL is no longer blocked. :)
Anybody understand how to use the "Cloud Based Map Styling" for the Google Maps Javascript API?
I've been following the documentation but it doesn't actually explain how to to use the Map ID once it's been associated with the styling.
The only advice I could find was this this answer, but I'm trying the script below and although a map appears, there is no style applied to it.
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
mapId: "t43vt7y4ct837ytv", //not my real Map ID
disableDefaultUI: true,
center: { lat: 51.4765924, lng: -0.003 },
zoom: 15.5
});
}
As pointed out by #ecg8 (and from a more careful read of the question How do I change the mapId of a Google vector map?) I also needed to supply the Map ID as with the map_ids query parameter in url of the script loading.
As an example see url in the script tag below.
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&v=weekly&callback=yourInitMapMethod&map_ids=abcd1234mymapid,efgh5678myothermap"></script>
I'm assuming this will be added back into the official documentation for the API, but at the moment I can't seem to find it, so answering my own question here.
Since a few days our users can only zoom when they hit the "ctrl" key while scrolling which doesn't make sense in our applications.
Is there a way to allow zooming only with scrolling (as it was before) in Google Maps?
I've seen that this "ctrl + scroll" force now also is in the google maps api reference (screenshot).
Screenshot from the Google Maps Javascript API reference which shows the new message
Add gestureHandling: 'greedy' to your map options during instantiation.
E.g:
var map = new google.maps.Map(document.getElementById('map'), {
center: {0, 0},
zoom: 8,
gestureHandling: 'greedy'
});
}
gestureHandling: "cooperative",
This the updated version from google maps.
I have used the new embed code for the new google maps as documented here:
https://developers.google.com/maps/documentation/embed/guide
My code is:
<iframe width="500"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=KEY&q=Space+Needle,Seattle+WA">
</iframe>
This works fine and displays the map correctly
When I try to add the "center" parameter using the below code it zooms the map out to the whole world view
<iframe width="500"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=KEY&q=Space+Needle,Seattle+WA¢er=47.620467,-122.349116">
</iframe>
What I ultimately want to do is move the map so it is not centered on the actual marker, but at the moment I am testing with a lat and long that are very close to the marker.
Am I using the ¢er parameter correctly? Has anyone else got the ¢er parameter working?
I have checked that the lat and long I used are in the map displayed
Alas this seems to be a bug with the current Embed API. The documentation indicates that it's possible to use 'center=' with /place but in practise this doesn't work.
I ran into the same problem, adding 'center=' to the iframe URL broke the map. It worked flawlessly when I changed '/place' into '/view' and removed the 'q=...' part. I've sent feedback to Google about this. You can do this through the 'Feedback on this document' link on this page:
https://developers.google.com/maps/documentation/embed/guide#optional_parameters
To work around this I've switched to the Google Maps Javascript API v3. This API is quite a bit more flexible and as a bonus it also rids you of the iframe.
In your case this should do the trick:
Put this just before
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(47.620467,-122.349116),
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var myLatlng = new google.maps.LatLng(47.620614, -122.348880);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Space Needle, Seattle WA'
});
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?key={API_KEY}&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
And add
<div id="map-canvas" style="width: 500px; height: 450px;"></div>
to your HTML somewhere.
A disadvantage is that you need to manually adjust the Lat/Lon for the marker by searching Google Maps, right click and then "What's here". You already need to do this for the center coordinates so this shouldn't be a big problem. If you want to automate this you can use the Google Maps Geocoding service but that would happen on every view:
https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
if you want to do this without having to use the API, you can still use the old Google Maps Classic coding. for centering, you can add the following to the "src" code:
&ll={latitude}, {longitude}
so for instance "&ll=44.013922, -88.342259". just make sure it is INSIDE the quotes for the src.
you can also set a custom zoom by using
&z=#
for example: "&z=20" will get you close to Street View.
who knows how long this will last though, so use at your own risk, and be sure to check on it regularly...
Another workaround using Google MyMap web GUI that has worked for me. Go to the create/edit map page, using mouse or cursors drag a map while it's centered as you want it to be when opened via embedded link, then click "Set default view" (same dialog where new/open/save map can be found).
So, having been recently somewhat dissapointed with lack of customizability of the regular google maps "embed" (iframe) code; I have started tinkering with the Google Maps API v3. Really, all I want to do is show a marker for a business on the map, so that you can click it and go to that "place" at mapsgoogle.com.
So pretty much, I just want to recreate the functionality of the iframe code below. I put in about an hour of reading the docs, but it seems extremely complicated just to get the marker associated with a 'place'
The place
https://maps.google.com/maps?cid=1311411133662139490
The standard Embed
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?cid=1311411133662139490&ie=UTF8&hq=&hnear=&t=m&iwloc=A&ll=41.097905,-73.405006&spn=0.006295,0.006295&output=embed"></iframe><br /><small>View Larger Map</small>
It appears as though there is no functionality in the api to use the cid.
To Elaborate a little
Generally I would use this just for small business websites. I was frustrated with the regular iframe embed and lack of customizability. Essentially I want a starting point from which I can play with stuff and heavily customize the look/feel, but have been unable to put a marker in that's associated with the data for a "place" - allowing for the little pop-up window, etc..
Honestly, I didn't really do enough research before asking this question - and came in with some misconceptions. I think, and I may be wrong, that the API is still what I want to be using ultimately, but had I know about the functionality in Rick's answer, I probably would have settled on that and procrastinated longer on learning the gmaps API.
Allow me to explain one option of achieving your goal. I use the marker and infoWindow objects that Google Maps API v3 offers, which you can find in the document I attached in the link. Feel free to follow along in the jsFiddle I created: http://jsfiddle.net/bgvYH/
First thing is first, you want to initiate your map with its options - I'm going to assume you know what the different variables in following code snippet represent:
var myLatlng = new google.maps.LatLng(41.097905,-73.405006);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
If you want to customize your map even more to your liking, have a look at the different options you can set in the API reference, you'll set these options in the myOptions object ( https://developers.google.com/maps/documentation/javascript/reference#MapOptions ).
Note: I set the center of the map to the Lat/Long coordinates of the restaurant - which I took from the URL you provided in the iframe ll=41.097905,-73.405006.
Now what you want to do next is determine the content you want to display in your infoWindow, so the restaurant information:
var contentString = "<div id='content'>";
contentString += "<div id='title'>Mr. Frosty's Deli and Grill</div>";
contentString += "<div id='info'><p>10 1st Street</p><p>Norwalk, CT 06855</p><p>(203) 956-5767</p><p><a href='http://thebeachburger.com/'>thebeachburger.com</a></p></div></div>";
You may even end up pulling this information from a database or JSON object in the future, depending on how deep you go into this project (for now I have it as static HTML).
Next we initialize the infoWindow object and set the contentString to the content option of the infoWindow. There are other options you can customize here (just like the map options, again look at the reference for InfoWindowOptions: https://developers.google.com/maps/documentation/javascript/reference#InfoWindowOptions )
var infowindow = new google.maps.InfoWindow({
content: contentString
});
After setting up your infoWindow object, you initialize your marker object - which will place the drop the bubble on the map. Once again, you set up the options for the marker when initializing much like you did with the map object and the infoWindow object - you can further customize it to your liking by looking at the reference (I think there's even an option in there for the marker where you can use custom icons - you can get pretty creative here).
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Mr. Frosty's Deli and Grill"
});
And finally, you need to bind the Marker and the infoWindow together - so that when a user clicks on the marker the info pops up. This is achieved by using the event listener, and you listen for a "click" action on the marker variable. Read this document for information on events on google maps https://developers.google.com/maps/documentation/javascript/events. Likewise look through the API Reference for the different events you can listen to on an object.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
That should do it, you should have a working alternative to the iframe you include - except now you can customize the map and the actions you perform on it to however you want. In the jsFiddle I also included some styling, just to make things look nice inside the infoWindow.
Now, I want to let you know - I believe there is another option to what your looking for - but I have yet to experiment with this API. It is the Google Places API, which you'll have register for. But from what I read through the documents, I think you may be able to achieve what you want to do. Have a look at it ( https://developers.google.com/maps/documentation/places/ ), and see what's good.
It looks like this was created through 'My Places' and made public. If you don't want to mess with the API then that's your best bet.
Visit maps.google.com, click 'My Places' and 'Create Map'. Customize and grab the embed code.
If the map doesn't need to be interactive (beyond the click action), use a static map. It's just an image so you can wrap it in an anchor that points exactly where you want.