I have some code for google maps autofilling a text box with Latitude and Longitude when you click on the map.
Now I would like to know if there's a way you can have the map appear in a popup? I searched for "google map" popup frame and things along the same line but I could not find anything.
For instance: Let's assume there is a textbox with id "Location". Once you click on the textbox, a google map popup will appear where you can click and the coordinates will be entered automatically into "Location" (already have this part of the code). If you click anywhere on the screen behind the popup, the google map popup must disappear.
What I had in mind was the google map is hidden; and once there is an "onclick" event for the textbox, it will show the popup and the user can choose the location.
I will add the code.
var map;
var marker = null;
function initialize() {
var mapOptions = {
zoom: 5,
disableDefaultUI: false,
center: new google.maps.LatLng(21.268899719967695, 39.2266845703125),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
$("#Coordinate1").val(event.latLng.lat() + ", " + event.latLng.lng());
$("#Coordinate1").select();
if (marker) { marker.setMap(null); }
marker = new google.maps.Marker({ position: event.latLng, map: map});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
width:350px;
height:200px;
}
#Coordinate1{
text-align:center;
border:1px #ccc solid;
}
<div id="map"></div>
<input type="text" id="Coordinate1" value="Latitude, Longitude">
Thank you.
You should consider implementing a page where you have that map separately. Use it as an iframe inside the main page and show/hide its container whenever you need to do that. So, steps to solve the problem:
implement the map page
add a popup container which will contain an iframe pointing to the map page
handle communication between iframe page and main page via Javascript
Related
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
I don't have experience with google map API, so I hope you can help me.
the problem is whenever I click on show button, the width of the map appear, but it doesn't load, I can't see the map at all.
but if i open the counsel in developer tools the map loads normally!
codepen url for better explanation
https://codepen.io/ahmadz12/pen/QdRQbE
html
<div id="map-canvas" class='hide'></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<a id='show'>show</a>
css
#map-canvas{
height: 500px;
width: 500px;
border: 3px solid black;
}
.hide{
display:none;
}
javascript
if (document.getElementById('map-canvas')){
// Coordinates to center the map
var myLatlng = new google.maps.LatLng(52.525595,13.393085);
// Other options for the map, pretty much selfexplanatory
var mapOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Attach a map to the DOM Element, with the defined settings
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
$('#show').click(function(){
$('#map-canvas').removeClass( "hide" )
});
Thanks
When you load a Google map into a hidden div and then display that div, you need to tell Google to repaint the map:
$('#show').click(function(){
$('#map-canvas').removeClass( "hide" );
google.maps.event.trigger(map, 'resize');
});
I suspect that Google is trying to be helpful by saving browser resources, not drawing maps in elements that can't be seen. By triggering a resize when you display your div, it causes Google to draw the map again in a now visible element.
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.
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);
});
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();
});