Hello i try to add google map to my project but when u render page it looks like this.
Code of showed above,page looks like this.
#using OnlineShop.Models;
#{
Layout = "~/Views/Shared/_MainPageLayout.cshtml";
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="~/Content/MainPage.css?Wednesday 20th of July 2016 07:45:21 AM" />
<script src="~/Scripts/jquery-3.1.0.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?key=MyKey" type="text/javascript"></script>
<meta name="viewport" content="width=device-width" />
<title>Contacts</title>
</head>
<body>
<div id="showProduct">
<p>Email:inimicos471#gmail.com</p>
<p>Phone:555-555-555</p>
<p>City:Kiev</p>
<p>Adress:Fiskulturi 6</p>
<div id="canvas" style="height:500px;width:500px"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
GetMap();
})
function GetMap() {
var Kiev = google.maps.LatLng(50.4126106, 30.5444569);
var mapOptions = {
zoom: 15,
center: Kiev,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("canvas"), mapOptions);
}
</script>
I tried to find solution in internet but there are advices to render div first ,then add map to it.But is seems that i did it.
You are missing the new keyword when you assign a value to Kiev:
var Kiev = new google.maps.LatLng(50.4126106, 30.5444569);
^
On a side note; you are loading both jquery.js and jquery.min.js. You should only ever load one version. Same for jquery.unobtrusive-ajax.js
Related
When I try to run this code in a browser, the google maps window appear, but the satelite or map image doesn`t show properly. I can hardly see the map or satelite image.
<DOCTYPE html>
<html lang="no">
<head>
<title>Kontakt</title>
<meta charset="utf-8">
<link rel="stylesheet type=text/css" href="stylesheetfgross.css">
</head>
<body>
<header>
<h1>Kontakt</h1>
</header>
<div id="map" style="width:400px;height:400px">
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(59.234389, 11.137546),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
</body>
I just deleted function myMap() from your code and google script looks like that right now: <script src="https://maps.googleapis.com/maps/api/js"></script>, just deleted callback from url and it works now. Check jsFiddle
I used this, and it worked for me.
<iframe width="600" height="450" frameborder="0" style="border:0"
src="key" allowfullscreen="">
</iframe>
am struggling the last 3 hours
am trying to update my google maps markers positions from database without refresh the page so the user can track updated movement
i used jquery to extract all the data from database from page called data.php that give me everything i need to type it directly into the javascript code to add the markers.
but when i put or inside the javascript initialization function everything is not working
so i don't know how to get the html.(output).show to div without crashing the whole code
here is the code of the page that i want to display google markers
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>GLOBAL CLEANERS</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript">
function get()
{
$.post('data.php',function(output)
{$('#age').html(output).show();}
);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(33.3146996,44.3772661);
var mapOptions = {
zoom: 11,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = 'zbala.png';
<?php echo '<div id="age">var myLatlng500 = new google.maps.LatLng(33.3146996,44.3772661);</div>'; ?>
}
google.maps.event.addDomListener(window, 'load', initialize);
// ??? ????? ????? ???? ???????
</script>
</head>
<body bgcolor="002022">
<form name="form"><input type="button" name="submit-button"value="submit-button"onclick="get();"></form>
<img src="logo-global.jpg" style="height: 100px;width:90%;position: absolute;left:150px;top:0%; opacity: 1.0;"/>
<div id="map-canvas" style="width:100%;height:100%px;top: 100px;left:150px"></div>
</body>
</html>
I am using Google Maps JavaScript API to load map inside my mobile website. When I navigate from the previous page map won't load but if I refresh the page map load as expected. If I use the JavaScript inside the body even the page is not loading. I can't figure out the problem. Is it something with the previous page code ?
Here is my code in Head tag.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.0.min.css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<script src="./js/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=xxxxxxxx&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(<?php echo $longtitude ?>, <?php echo $latitude ?>);
var mapOptions = {
zoom: 10,
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: 'Location'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).delegate('#content', 'pageinit', function () {
navigator.geolocation.getCurrentPosition(initialize);
});
</script>
</head>
Here is my Body Tag
<body >
<div id="wrapper">
<div class="header">
<img src="images/logo-small.png" alt="logo"/>
</div>
<div class="back">
<a data-rel="back"><img src="images/back.png"/></a>
</div>
<div id="content">
<div class="list">
<div class="list-items" id="info">
<?php echo "<h3>$sa1<span>$postcode<span>$sa2</span></span></h3><h2>$price</h2>";?>
<br class="clear" />
<br class="clear" />
</div>
</div>
<br class="clear" />
<div id="map-canvas">
</div>
</div>
</div>
</body>
I refer question This and This but it's not working with my code.
Problems
First of all, why are you using jQuery Mobile? I don't see the point in your current example.
In this case jQuery Mobile is the main problem. Because jQuery Mobile is used everything will be loaded into the DOM. When you "navigate from the previous page" page is not refreshed and this line:
google.maps.event.addDomListener(window, 'load', initialize);
can't trigger. It will trigger only if you manually refresh the page.
Second thing, you cant use jQuery Mobile page events without having any page what so ever. In your code you have this part:
$(document).delegate('#content', 'pageinit', function () {
navigator.geolocation.getCurrentPosition(initialize);
});
For it to initialize successfully div with an id content MUST have another attribute called data-role="page", like this:
<div id="content" data-role="page">
</div>
Third thing. Lets assume everything else is ok. Pageinit will not trigger from the HEAD. When jQuery Mobile loads pages it loads them into the DOM and only BODY part will be loaded. So for your map to work you need to move our javascript to the BODY (including a css). In you first example it didnt worked because you were triggering page even on a non-page div container.
And last thing, if you want to use jQuery Mobile properly you will need to take care correct version of jQuery is used with a correct version of jQuery Mobile. If you want to be safe use jQ 1.8.3 with jQM 1.2
Solution
Here's a working solution:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<style>
#map-canvas {
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(33.89342, -84.30715);
var mapOptions = {
zoom: 10,
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: 'Location'
});
}
//google.maps.event.addDomListener(window, 'load', initialize);
$(document).on('pageshow', '#wrapper', function(e, data){
initialize();
});
</script>
<div id="wrapper" data-role="page">
<div class="header">
<h3>Test</h3>
<img src="images/logo-small.png" alt="logo"/>
</div>
<div id="content">
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
Working examples and much more information regarding this topic can be found in this ARTICLE.
just add: data-ajax="false" to the link tag which redirects to the page that contains your map. for example, if map.aspx contains your map, you can link to it like this:
<a href="map.aspx" data-ajax="false">
I was having same problem but I have no any jquery-mobile libraray or any other which would conflict the map. Struggling a hard time, I found a solution for my project:
Doesn't work:
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer>
</script>
Works (Removing async and defer attributes):
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
Hope! This helps someone if the other solutions doesn't work. Try this only if none of other solution work because it is not good suggestion as we know google page speed guide or google map api guide says to use it.
I have also same problem with
google.maps.event.addDomListener(window, 'load', initialize); where initialize is my method .
I just add few line of code before google.maps.event.addDomListener(window, 'load', initialize);
Code is
$(document).ready( function () {
initialize();
});
and this code is working for me
You should use the pageloadevent to load everything. This way everything is loaded once jquery Mobile has done all the DOM changes it needs. I've had this same problem and that's what helped.
$(document).on('pageload', function() {
initialize();
});
It's in the docs: http://api.jquerymobile.com/pageload/
EDIT: Sometimes it also helps to load the markers in a separate function than the one loading the map.
<!DOCTYPE html>
<html>
<head>
<title>RJI Events</title>
<link rel="stylesheet" type="text/css" href="stylesheets/scrollbar.css">
<link rel="stylesheet" type="text/css" href="stylesheets/app.css">
<style type="text/css">
#import url("http://www.google.com/uds/css/gsearch.css");
#import url("gmlocalsearch.css");
</style>
<script type="text/javascript" src="jslibs/cubiq-iscroll/iscroll.js"></script>
<script src="jslibs/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jslibs/jquery-ui-1.8.14.custom/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="jslibs/cubiq-iscroll/iscroll.js" type="text/javascript"></script>
<script src="jslibs/phonegap-1.0.0.js" type="text/javascript"></script>
<script src="jslibs/handlebars.1.0.0.beta.3.js" type="text/javascript"></script>
<script src="app/start.js" type="text/javascript"></script>
<script>
var myScroll;
function OnLoad() {
//GSearch.execute("google");
//I feel like it should go here
}
function loaded() {
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyCrw28V3lIOj9Rav9_7fVWrB2sKUzoqKkc"
type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
// Create and Center a Map
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(38.95, -92.32), 15);
// bind a search control to the map, suppress result list
map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT));
}
}
GSearch.setOnLoadCallback(initialize);
</script>
</head>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
<div id="header">Event Name</div>
<div id="wrapper">
<div id="scroller">
<div id="map_canvas" style="width:99%;height:500px"></div>
</div>
</div>
<div id="footer">
<div id="footerInfo">
<div id="footerEvents-active"><a class = "footer-link" href = "index.php">Events</a></div>
<div class="footerSpacer">|</div>
<div id="footerRJI"><a class = "footer-link" href = "aboutRJI.html">RJI</a></div>
<div class="footerSpacer">|</div>
<div id="footerAbout"><a class = "footer-link" href = "about-us">About</a></div>
</div>
</div>
</body>
</html>
Im sort of new to stack overflow, so sorry if im not specific enough. Im using the localsearch from here http://code.google.com/apis/ajax/playground/#localsearch and would like to have it have a default search value, and search it on load like in this example http://code.google.com/apis/ajax/playground/#center_localsearch. Thank you, i appreciate all of the help. Also, this is for a mobile phone app, although if it works in the browser it will work on the phone
I am trying to use the ArcGIS 2.1 JS API to create a custom interface that looks similar to Google Maps.
What is confusing me (particularly with Dojo's layout scheme) is how Google Maps has a map pane that extends the whole width of the page and has a left search results panel that seems to be floating above the map pane.
How does this work in terms of Dojo layouts? I have frustratingly worked with BorderContainers and looked at the documentation for a FloatingPane with no avail.
Any direction is appreciated.
Not sure what problem you're running into - either troubleshooting or design, but, here is a rigid construct example that might work:
<html>
<head>
<title>dojo/google map example</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/resources/dojo.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dijit/themes/claro/claro.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script djConfig="parseOnLoad:true" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5.0/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require( "dijit.layout.BorderContainer" );
dojo.require( "dijit.layout.ContentPane" );
dojo.addOnLoad( function() {
var myLatlng = new google.maps.LatLng(38.887, -77.016);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
});
</script>
</head>
<body class="claro" style="height:100%;padding:0;margin:0; overflow:hidden">
<div dojoType="dijit.layout.BorderContainer" style="height:100%">
<div dojoType="dijit.layout.ContentPane" region="left" splitter="true" style="width:200px">
Left search thing
</div>
<div dojoType="dijit.layout.ContentPane" region="top" style="height:100px">
Top
</div>
<div dojoType="dijit.layout.ContentPane" region="center" style="overflow:hidden">
<div id="map_canvas" style="height:100%; width:100%"></div>
</div>
</div>
</body>
</html>
You can substitute components for expando panes, and other gizmos, but this should technically work and look like:
http://imgur.com/ASlGG.png
Or you could just use the ArcGIS Extension for Google Maps :)
http://resources.esri.com/arcgisserver/apis/javascript/gmaps/