Iam doing an MVC Bootstrap Google Map V3 application.
When user enter a Full Address it is shown in a Google Map. If the div when it is shown is in a Partial View. It looks fine.
But, when that Partial View is in a Bootstrap Modal View. It does not show anything.
This is the case when it Works..
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MyKey&sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var address = "Full Address ";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 14,
center: latlng,
// mapTypeControl: true,
// mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
// navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("dvMap"), myOptions);
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: '<b>'+address+'</b>',
size: new google.maps.Size(150,50)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
<div style="width: 600px; height:400px">
#Html.Partial("~/Views/Shared/_ShowMap.cshtml")
</div>
this is the call to my Partial View
My partial View in this case is simple
The case that does not work is like this.
I add this line at bootom of JavaScript function...
$("#myModalMapa").modal();
HTML Div is like this.
And my partial view looks like this.
As I sow in differents questions, I made same changes to my scripts
$(document).ready(function () {
$('#myModalMapa').on('shown.bs.modal', function () {
var currentCenter = map.getCenter(); // Get current center before resizing
google.maps.event.trigger(map, "resize");
map.setCenter(currentCenter); // Re-set previous center
});
});
Related
I'm working on a project which track GPS locations and should display in Google map as points. Therefore I use Reverse Geocoding.
I just put below code inside methods: in my Component.
initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 40.731, lng: -73.997}
});
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
document.getElementById('submit').addEventListener('click', function() {
this.geocodeLatLng(geocoder, map, infowindow);
});
},
geocodeLatLng(geocoder, map, infowindow) {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
}
Also I put below code in app.blade.php
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
</script>
My problem is when I use callback in parameter the initMap function is not identified. Therefore map is not loading on my view. How should I use it? and also should I need to use axios.get(my_url_here) to do this? I'm stuck in this case. If anyone can consider and help me for this matter would be grateful.
I want to use the title of a Wordpress post (a location) to become a visible marker on a Google map. This code from Google works fine to show a map (without marker):
<script>function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);</script>
However, when I try to implement the geocoding part the map doesn't show. The two solutions I've tried:
Solution 1
<script type="text/javascript">// <![CDATA[
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(54.00, -3.00),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var geocoder = new google.maps.Geocoder();
var address = '3410 Taft Blvd Wichita Falls, TX 76308';
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
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// ]]></script>
2012, March 17, http://manofhustle.com/2012/03/17/google-map-geocoding/
Solution 2:
var geocoder;
var map;
var address = "San Diego, CA";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
if (geocoder) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow({
content: '<b>' + address + '</b>',
size: new google.maps.Size(150, 50)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
2014, December 4, Using Address Instead Of Longitude And Latitude With Google Maps API
What am I doing wrong or not seeing?
EDIT: changes map to map-canvas in getElementByID, but still doesn't work.
EDIT 2: through an iframe it works (but you can't move in the map, only scroll)
<iframe width="195" height="195" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="https://maps.google.ca/maps?center=<?php the_title('Groningen'); ?>&q=<?php the_title('Groningen'); ?>&size=195x195&output=embed&iwloc=near"></iframe>enter code here
working example.........http://jsfiddle.net/vezkvkve/1/
html:
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<input type="text" id="mapaddress" />
<input type="submit" id="change" onclick="changeMap()">
<div id="map" style="width: 413px; height: 300px;"></div>
javascript
<script type="text/javascript">
function changeMap(){
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(54.00, -3.00),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var geocoder = new google.maps.Geocoder();
//var address = '3410 Taft Blvd Wichita Falls, TX 76308';
var address= document.getElementById("mapaddress").value;
if(!address) {
address = '3410 Taft Blvd Wichita Falls, TX 76308';
}
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
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
return false;
}
</script>
I have a function that gives the user directions from their location to a fixed location on a map. It is being loaded in as external content to populate a main div, the map shows fine on both IE and Firefox but when I view it in Chrome it does not show. The Chrome dev console shows that the content is being loaded into the div and it is not putting out any errors.
External map.html
<script type="text/javascript" src="JS/location.js"></script>
<div id="mapContainer"></div>
<div id="writtenDir"></div>
JS to load content:
$('#Contact').click(function () {
$('#centerPane').load('External/map.html');
$.getScript("JS/location.js");
});
Location.js
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoInfo, noGeoInfo);
} else {
noGeoInfo();
}
function geoInfo(position) {
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 15,
center: coords,
mapTypeControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById(''));
var request = {
origin: coords,
destination: '54.861283, -6.326805',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
});
}
function noGeoInfo() {
var location = new google.maps.LatLng(54.861283, -6.326805);
var mapOptions = {
center: location,
zoom: 15, //Sets zoom level (0-21)
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions);
marker = new google.maps.Marker({
position: location,
map: map
});
}
Div to be loaded into:
<div id="centerPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
Why is the map not showing in Google Chrome?
(live link, press "Contact Us" - http://scmweb.infj.ulst.ac.uk/~B00518833/DNA/View/index.php)
The problem resides inside the Nav.js file at line 59:
google.maps.event.trigger(map, 'resize');
The map is undefined when this line is executed.
Ensure that your js files are loaded in the right order and that the map is always defined before triggering the resize event.
I hope this helps.
I'm developing a web page with a Google Maps application and there is something that I'm having trouble with. As it stands, the web page has a functional map (without any layers) and a search bar. I'm new to programming so hopefully there is a quick fix that I'm missing.
When I look up an address, the placemark is is positioned where it is supposed to be. However, when I make a second search with a different address, the placemark of the first search remains visible so that there are two placemarks on the screen. How can I make a new placemark replace the old one?
<script type="text/javascript">
var geocoder;
var map;
var marker;
function initialize() {
geocoder = new google.maps.Geocoder ();
var latlng = new google.maps.LatLng (55.1667, -114.4000);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
marker = new google.maps.Marker({map:map});
}
function codeAddress () {
var address = document.getElementById ("address").value;
geocoder.geocode ( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results [0].geometry.location);
marker.setposition(results [0].geometry.location);
map.setZoom(16);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
One way to achieve what you describe is with a global marker variable. Since the codeAddress function is calling new google.maps.Marker every time it runs, you will get a new marker each time.
Instead, use the setPosition function of the global marker to move it around.
var geocoder;
var map;
// ADDED
var marker;
function initialize() {
geocoder = new google.maps.Geocoder ();
var latlng = new google.maps.LatLng (55.1667, -114.4000);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
// ADDED
marker = new google.maps.Marker({ map: map });
}
function codeAddress () {
var address = document.getElementById ("address").value;
geocoder.geocode ( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results [0].geometry.location);
// CHANGED
marker.setPosition(results [0].geometry.location);
map.setZoom(16);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
I don't know why this is.
But for some reason, my google maps script is loaded in the page, but it is not displayed.
I'm curious about what i'm doing wrong.
Here's my html.
<ul class="address">
<LI><STRONG>Titel:</STRONG><br/>Text
<div class="gmap" address="Stationsstraat 23 8780 Oostrozebeke"></div></LI>
</ul>
<ul class="address">
<LI><STRONG>Titel:</STRONG>Text
<div class="gmap" address="Eredekestraat 56 2000 Antwerpen"></div></LI></UL>
And here's my Javascript (with jQuery):
$(document).ready(function(){
var coll_gmap = $(".gmap");
if ( coll_gmap.length != 0 )
{
//initiate map
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//loop all addressen + insert into map
coll_gmap.each(function(index)
{
map = new google.maps.Map(coll_gmap[0], myOptions);
if (geocoder) {
geocoder.geocode( { 'address': $(this).attr("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
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}//end if status
}); //end if geocoder.geocode
} //end if geocoder
}) //end coll_gmap each
}//end if coll_gmap length
}); //end onload
var geocoder, map;
I found out what it was.
I have to set my width and height on the
<div> =>(becomes)=>
<div style="width:500px;height:150px"></div>
Simple to forget, i guess :(
broken HTML. None of your divs are closed, and this is just totally wrong: </ </LI></UL>