Hello I am working on this example (example above)
and if I add a new map to this code, it will work, but only on this same page, if I add a map to the new page, then it crashes (map doesn't appear on the new page, it only works on the first page.
How can I achieve this?
To edit your jsfiddle, do the following:
Add to the html:
<div id="map_canvas_3" style="top: 10px; left: 125px; width:210px; height:220px"></div>
Add to the javascript:
var latlng3 = new google.maps.LatLng(29.579943,78.330006);
var myOptions3 =
{
zoom: 15,
center: latlng3,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map3 = new google.maps.Map(document.getElementById("map_canvas_3"), myOptions3);
var myMarker3 = new google.maps.Marker(
{
position: latlng3,
map: map3,
title:"TEST"
});
Should work fine.
Fiddle: http://jsfiddle.net/56HMR/2/
Related
I am implementing a system in MVC 5 whereby a user can pick their coordinates from a google map and save them, the coordinates are stored to a database and then a separate page in the application retrieves the coordinates and displays the map with that Marker displayed.
My Problem is that while one map is functioning the other will not show up on a separate page.
Here is my Javascript Code:
$(document).ready(function () {
initialize();
});
function initialize() {
var latlng = new google.maps.LatLng('#ViewBag.Latitude', '#ViewBag.Longitude');
var myLatLng2 = new google.maps.LatLng(53.88484, -9.28484);
var mapOptions = {
center: latlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapOptions2 = {
zoom: 5,
center: myLatLng2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var map2 = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions2);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: '#ViewBag.data'
});
var marker2 = new google.maps.Marker({
map: map2,
position: myLatLng2,
draggable: true
});
new google.maps.event.addListener(marker2, 'drag', function () {
var pos = marker2.getPosition();
$("#Lat").val(pos.lat());
$("#Lon").val(pos.lng());
});
}
and in my First View
<div id="map_canvas" style="float:left; width: 600px; height: 250px; margin-top:15px; margin-bottom:20px; margin-left:30px;">
and the Other View
<div id="map_canvas1" style="float:left; width: 600px; height: 250px; margin-top:15px; margin-bottom:20px; margin-left:30px;">
I can make "map2" work by commenting out the line
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
and vice versa but they will not seem to run along side each other,
only the first var map or var map2 that is declared seems to run when both remain uncommented,
Any help would be greatly appreciated,
Thanks.
This is because
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
Is most likely erring out. map_canvas doesn't exist, so the next line is never reached. If you comment it out, then the second view works as expected.
When calling document.getElementById(), make sure the element exists FIRST before creating a map.
BTW: That also means that map_canvas1 does't exist on your first view either, so be careful there as well.
Try this:
var map_canvas = document.getElementById("map_canvas");
if (map_canvas)
var map = new google.maps.Map(map_canvas, mapOptions);
var map_canvas1 = document.getElementById("map_canvas1");
if (map_canvas1)
var map2 = new google.maps.Map(map_canvas1, mapOptions2);
I am having a very hard time coping with AngularJS and its way of setting up maps and markers.
Right now I have the following code:
<map data-ng-model="mymapdetail" zoom="11"
center="{{item.coordinates}}" style="heigth:375px">
<div data-ng-model="mymarker"></div>
</map>
This correctly shows a centered map. Then I am trying to add a marker this way.
$scope.mymarker = new google.maps.Marker({
map: $scope.mymapdetail,
position: new google.maps.LatLng(item.coordinates),
title: woa.title
});
This code does not produce any results. Where is it wrong?
Here's working solution with marker appearing on click and this one with marker already visible - using your code (well almost - I didn't use map directive), but you should be able to adapt it to your code with very little changes.
Probably the main reason why it wasn't working in your case was using new google.maps.LatLng(item.coordinates)
Here's the code:
//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {
var item = {
coordinates: [40.6423926, -97.3981926]
};
var woa = {
city: 'This is my marker. There are many like it but this one is mine.'
};
//set up map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
$scope.mymapdetail = new google.maps.Map(document.getElementById('map'), mapOptions);
//add marker
$scope.mymarker = new google.maps.Marker({
map: $scope.mymapdetail,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(item.coordinates[0], item.coordinates[1]),
title: woa.city
});
});
Let me know if it works for you.
I'm trying to set a contact page in which I display google's map to indicate the place of a meet. I'm currently using using these codes:
js
(function(){
document.getElementById('map_canvas').style.display="block";
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(0.0, 0.0)
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
})();
html
<script type="application/javascript" src="/js/google-map.js">
<div id="map_canvas" style="width:80%; height: 400px; margin:auto;"></div>
The problem is that I couldn't be able to mark the indicated place like in google map to precise to the user the indicated place. Any brilliant idea, please?
First you need to define the Latitude and Longitude of the mark
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
Then you need to add a marker:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
Take a look at
https://developers.google.com/maps/documentation/javascript/examples/marker-simple?hl=es
I want to create a map in mobile app and then user has the ability to mark boundry i.e polygon on it. So is it possible to make like that aor is there any library available
Here is an example in which user create polygon on click event how can i manage it in mobile app
Here is a demo in a jQM page: http://jsfiddle.net/ezanker/8TK6a/1/
Inside the standard page layout is a div for the map: <div id="map"></div> with this CSS;
#map{
width: 100%;
height: 300px;
border: 2px solid black;
}
Then in code:
var map;
var elevator;
var myOptions = {
zoom: 6,
center: new google.maps.LatLng(36.231719,-113.030911),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], myOptions);
var dm = new google.maps.drawing.DrawingManager({map: map, polygonOptions: {editable:true,fillColor:'#777777',strokeColor:'#595959',strokeWeight:2}});
UPDATE: added polygonOptions editable:true so you can see dots at each vertex.
Trying to create a PhoneGap mobile app. Totally new to mobile apps, phonegap, and JS so bear with me. This is where I'm at:
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.710,-73.994), //New york, NY
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions)
};
With that, the map renders in the browser just fine. When adding the following that I've found in a number of tutorials it refuses to render anything. I am trying to do all of this in the googlemap/index.html page that I have created.
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.710,-73.994), //New york, NY
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var LatLng = new google.maps.LatLng(40.710,-73.994)
var marker = new.google.maps.Marker({
position: myLatLng,
title: "hello world!"
});
marker.setMap(map);
};
When I add the following, the entire page refuses to render.
Basically, I'm using the above method to display a google map, and I'm trying to add a pin to the center location. Seems simple enough but proving to be beyond my abilities.
You have a syntax error on this line:
var marker = new.google.maps.Marker({
Notice that there is a dot between the new operator and the class name.
To fix, replace the line above with:
var marker = new google.maps.Marker({
Happy mapping!
PS: The error was reported in the (desktop) browser's console, I'm not sure how you'd see the same on an Android device.