Here are the code i am using to get google Map, But i am a getting blank map on response.
function initialize(address) {
jQuery('#mapgoogle').show();
jQuery('#store_img_default').hide();
var myLatLng = new google.maps.LatLng( 50,50 ),
myOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map( document.getElementById( 'mapgoogle' ), myOptions ),
marker = new google.maps.Marker( {position: myLatLng, map: map} );
marker.setMap( map );
moveMarker( map, marker,address );
}
Below is the Response from googleMap.
http://i.stack.imgur.com/pcf22.png
This code was fully working since last 6 months, and suddenly this creating issues. Any help in this will be highly appreciable.
Related
I know the maps are loading, but for whatever reason I can't see them.
JS
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
MarkUp
<div id="map-canvas">
</div>
I know this must be simple and I'm a little confused why I can't work it out, but here is the link: http://stage.sexdiaries.co.uk/map
You need to give the map a size:
<div id="map-canvas" style="height:500px;width:600px;"></div>
I'm starting to develop an application that will have Google Maps.
I studied the help of Google Maps Api and I'm with doubt to add an overlay. The below is the correct way to do it:
Create maps
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
Add overload:
function add() {
var myLatlng = new google.maps.LatLng(-34.397, 150.646);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); /* It is correct?
var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});
marker.setMap(map);
};
Is there a way to get the mapsOptions, or rather not recaregar the map completely, or is this how it works?
remove the var-keyword when creating the map in initialize() .
When you do so, the map-variable is global accessible and you may call marker.setMap(map); inside add() without creating a new Maps-instance.
I have two Google Maps setups on a site that I'm developing, and I want to apply custom markers to both of them. This is what I have written -
var coordinates_1 = new google.maps.LatLng(x, x);
var coordinates_2 = new google.maps.LatLng(x, x);
var map_1_options = {
zoom: 14,
center: coordinates_1,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map_2_options = {
zoom: 14,
center: coordinates_2,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var marker_1 = new google.maps.Marker({
position: coordinates_1,
map: map_1,
icon: '/images/marker.png'
});
var marker_2 = new google.maps.Marker({
position: coordinates_2,
map: map_2,
icon: '/images/marker.png'
});
var map_1 = new google.maps.Map(document.getElementById('location_1'), map_1_options);
var map_2 = new google.maps.Map(document.getElementById('location_2'), map_2_options);
I guess the script can be optimised but that's not the important issue here. What happens is I don't get any error messages (or missing images), and I get both maps displayed at their right location but no markers are showing. The images are 32x32px if that matters.
Any help would be appreciated.
You must first create map_1 and map_2 before you use them as map-property for the markers.
I am working on a simple web app using jquery mobile. I am attempting to show a google map which shows the visitors gps location on a map. The code below is what i'm currently using, however it shows specific co-ordinates instead.
Can anyone help me change this so that it shows the visitors location? I have tried several solutions but have had no luck. Thank you!
<script>
$('#map_result').live('pageshow',function(event){
loadMap(48.870181,2.779852);
});
function loadMap(Lat, Long){
var myLatlng = new google.maps.LatLng(Lat, Long);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
Try this:
$('#map_result').live('pageshow', function (event) {
navigator.geolocation.getCurrentPosition(function (location) {
loadMap(location.coords.latitude, location.coords.longitude);
});
});
function loadMap(Lat, Long) {
var myLatlng = new google.maps.LatLng(Lat, Long);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
Im using google maps, and my code didn't work when I tried to add a marker, anyone can see what's wrong with my code here?
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(14.6084, 121.080258
);
var myOptions = {
zoom: 19,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng( 14.608037, 121.080236 ),
new google.maps.LatLng( 14.608154, 121.080277 ),
new google.maps.LatLng( 14.608245, 121.080298 ),
new google.maps.LatLng( 14.6084, 121.080258 ),
new google.maps.LatLng( 14.608543, 121.080148 ),
new google.maps.LatLng( 14.608699, 121.080113 ),
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
flightPath.setMap(map);
}
</script>
The script I just added is
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
When I removed that, the script goes well.
Many thanks for any help! :)
Please watch the spelling (capitalization) of myLatlng in the definition of the marker. It should be myLatLng.