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>
Related
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
});
});
I have been looking at an example of geocoding on the Google maps dev website. I found this example and would like to as an experiment hard code a postal code instead of using the input box to get the address (the overall aim is to have an xml place the postal address inside here). Is it just a case of hard coding the postal address inside of the 'address' tags? I did try this but to no joy. Hope that makes sense?
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
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);
}
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);
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>
</head>
<body>
<div id="panel">
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
</body>
https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
If I understood well, you can try like this:
http://jsfiddle.net/7g7qG/
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
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);
codeAddress('London')
}
function codeAddress(address) {
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);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Daer All I have set Google Maps in my project and work fine. Now I would like to initialize the following script with "Street View Panorama" instead of stardard map.
I have found an exemple on google developers but I'm not able to combinate it with the geocoding function.
So what if I would like to initialize street view instead of standard map in this code?
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}//*I need street view instead of standard map (StreetViewPanorama)
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);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
html
<div id="map-canvas" style="width: 600px; height: 450px; float:right"></div>
<div>
<input id="address" type="text" value="Milan, Italy Viale Tunisia 30">
</div>
Following is my code which i am using to populate marker from the array address but its not showing any marker nor map to the respective div, Kindly let me know what i did wrong and how can i resolve this issue.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function(){
var myOptions = {
center: new google.maps.LatLng(54, -2),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var addressArray = new Array("41 Green Ln, Handsworth, Birmingham, West Midlands B21 0DE, UK","BT27 4SB","Norwich");
var geocoder = new google.maps.Geocoder();
var markerBounds = new google.maps.LatLngBounds();
for (var i = 0; i < addressArray.length; i++) {
geocoder.geocode( { 'address': addressArray[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
markerBounds.extend(results[0].geometry.location);
map.fitBounds(markerBounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
</script>
<div id="map_canvas"></div>
In order for the map to display, you'll need to give #map_canvas an absolute width/height using CSS.
Example fiddle: http://jsfiddle.net/sCvJk/
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);
}
});
}