Google Maps API : Display location with Marker and Description - javascript

I am working on my own website, and everything is starting to come together except for the buttons. Currently, when the location button is clicked, a JS alert message appears. This is unacceptable! What I would like to do instead is have a little box appear with the Google Maps map of some location with a pin. This could be a jpg or png for all it matters. The important thing is to have it appear and have an X to close it in the top right. To see what I mean, go to my site: http://andreihetman.com and click on the location pin.

Check out the Google Maps API Documentation relative to markers
Anyway here is a sample:
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
NOTE: By reading the API you will find out even how to add a detail box.

Related

display a shop's marker which is already on google

okay, there is a shop on the map. and I am trying to display that shop's marker on my map. I am a bit confused about passing the marker's location.
this is the location that I got from marker on google map.
https://www.google.com/maps/place/Starbucks/#34.6748217,135.4293592,12z/data=!3m1!5s0x6000e693a22a809f:0xa230d50a2bd936b4!4m8!1m2!2m1!1sstarbucks!3m4!1s0x0:0xe83a23a6e585f341!8m2!3d34.7037647!4d135.499835
and at the line here: /Starbucks/#34.6748217,135.4293592 I took the geo and put it my location. But I am not sure is it the right way to do it? Because I don't want to create new marker. I want to put a marker which is ALREADY on google map.
this is simple map:
function initMap() {
var starbucks = {lat: 34.6748217, lng: 135.4293592};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: starbucks
});
var marker = new google.maps.Marker({
position: starbucks,
map: map,
// title: 'starbucks'
});
}
This will just put a marker on your map. If that's all you need, you might consider using the Google Maps Embed API instead which can generate a link directly to the place you mentioned by using its place ID and can be easily embedded on any webpage.
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJYaAqopPmAGARQfOF5aYjOug&key=AIzaSyA-n9P6rX_0r8ySKnttYTVLAdh3SMcJaKE" allowfullscreen></iframe>
You need to generate and use your own API key (replace the one in the above code) and enable the Maps Embed API in the console.

Google Maps API marker move on scroll and layout style

I'm new in the Google Maps API, I am trying to embed a marker with the address on google maps but I have errors.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map#map
I'm using this documentation and I have copied this code but it doesn't work properly because when you scroll the marker it's not fixed in the map but its move and doesn't stay in the correct place.
Also, the buttons in the left corner MAP and SATELLITE doesn't appear properly, they appear with a background line in the whole map and don't together smaller.
Finally, the + and - button doesn't appear.
Someone could tell me why I have all this problem?
Here is my code:
<script>
function initMap() {
var blitz8 = {lat: 45.806510, lng: 10.109520};
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 18,
center: blitz8
});
var marker = new google.maps.Marker({
position: blitz8,
map: map
});
};
</script>
And here the Live Page:
https://sebalaini.github.io/Blitz8/
Hi I resolve that problem by disabled some css option in your base.scss please check and fix that, check my picture uploaded below

Google map acting weird

I have the most basic google map embeded in my website and this is what I ended up with when I included google maps api in the and wrote this piece of code in the external script which I include in the after the google maps api:
I can't do anything with it (zoom in or out, move the view around with the mouse..) except for switching between map and satellite. When I paste the exact same code in the w3schools "Try it yourself" area, everything works fine.
JavaScript:
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(45.1676, 14.7589),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map=new google.maps.Map(mapCanvas, mapOptions);
var marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Don't know if it has to do anything with my css settings but I can't paste the code here cause it's quite large.
Thanks for any suggestions
If anyone wants to know the problem was that the parent div of the map was set to height: 100% and that is what caused that glitch to happen.

Set Google maps coordinates as center screen

I wrote a script which allows an admin to click on a map (google maps api v3) setting up as many locations as he wants, naming them. That is, clicking on the map shows an information window with a form for naming that location. These locations are saved in a database (LatLng coordinates) and show as markers on the map.
Then, users (admin or not) may choose any of these locations from a select box (by name). Once this is selected, there's an option for showing a map with a marker on the selected location. The marker shows correctly, but I would like the map to be centered in that location. That is, the marker in the center of the screen but, instead, it shows in the extreme upper left corner. Actually, initially, the marker isn't even visible. You have to drag the map up and left a little for it to show.
This is rather strange, as I use the same coordinates for both the marker and the center screen. Here's my code (or the relevant part, at least):
var latlng = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.ltn));
var latlng2 = new google.maps.LatLng(parseFloat(location.lat) + 0.025, parseFloat(location.ltn) - 0.05);
var map = new google.maps.Map($('.modal-body', modal)[0], {
'center': latlng,
'zoom': 13,
'mapTypeId': google.maps.MapTypeId.ROADMAP,
});
var marker = new google.maps.Marker({
'position': latlng,
'map': map,
'title': location.name,
});
marker.setMap(map);
Notice how in this sample I don't use the latlng2 value. This is what I tried, but it seems to only work for a given resolution. How can I center the map in those coordinates?
Best regards
Edit:
$(map).focus();
modal.on('shown', function() {
$(window).resize(function() {
google.maps.event.trigger(map, 'resize');
});
google.maps.event.trigger(map, 'resize');
});
I'm not sure if this will work... If that window resize is cause than it might help. I don't know how it will interact with other code.
Add event listener for resize event:
...
marker.setMap(map);
google.maps.event.addListener(map, 'resize', function() {
map.setCenter(latlng);
});

Google maps not display entire map on the div container

I have a div with a google map inside but the map is not showing entirely.. just shows a part of the map and the other it's all grey and if i move the map with the cursor, the maps visual part moves fine but the size changes but not taking the entire div size.
This is the div and a snapshot:
<div style="height: 275px; width: 715px;" id="map_display"></div>
You need to trigger a resize event in Google maps like
google.maps.event.trigger(myMap, 'resize');
After initializing the Google maps
The answer provided Here may be of use to you, the problem is likely that the map has been loaded prior to the sizing of the div (is it perhaps dynamically sized?).
Loading the map after the rest of the page elements should help.
Working Fiddle
function InitializeMap() {
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_display"), myOptions);
}
$(document).ready(function () {
InitializeMap();
});

Categories