javascript - Adding multiple custom markers on Google Maps API after returning back from backend -
i have add multiple markers on google maps api after data gets returned backend sql table. here code.
<%@ page language="c#" autoeventwireup="true" codefile="publicmapnew.aspx.cs" inherits="webcontent_applicatorareas" %> <head runat="server"> <title>geolocation</title> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 70%; } </style> <style type="text/css"> #map_canvas { width: 400px; height: 300px; } .contextmenu { visibility: hidden; background: #ffffff; border: 1px solid #8888ff; z-index: 10; position: relative; width: 140px; } .contextmenu div { padding-left: 5px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="css/mapstyling.css" /> <link rel="stylesheet" type="text/css" href="/webcontent/css/publicmap.css" /> <link href='css/custom.css' rel='stylesheet' type='text/css' /> <link href='css/registercrop.css' rel='stylesheet' type='text/css' /> <script type="text/javascript" src="../javascript/bootstrap.js"></script> <script type="text/javascript" src="/webcontent/javascript/map.js"></script> <script type="text/javascript" src="/webcontent/javascript/publicmapnew.js"></script> <!-- website font style --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" /> <!-- google fonts --> <link href='https://fonts.googleapis.com/css?family=passion+one' rel='stylesheet' type='text/css' /> <link href='https://fonts.googleapis.com/css?family=oxygen' rel='stylesheet' type='text/css' /> <link rel="stylesheet" type="text/css" href="css/landingpage.css" /> </head> <script> $.get("header.html", function(data) { $("#header").replacewith(data); }); </script> <script type="text/javascript"> var user = null; var serverval = null; var usrapparea = null; var usrcroploc = null; //window.onload = init_publicmap; </script> <body> <form id="form1" runat="server"> <asp:scriptmanager id="scriptmanager1" runat="server" enablepagemethods="true" /> <div> <!-- /.header --> <div id="header"></div> <div id="wrapper" style="height: 677px; width: 1923px;"> <input id="pac-input" class="controls" type="text" placeholder="search box" /> <div id="map_canvas" style="height: 677px;"></div> </div> <script> var map = "" function init_publicmap() { pagemethods.queryproducers("all", "all", queryproducers_success, fail); } function customfeature(lat, long, type) { this.type = type; this.pos = new google.maps.latlng(lat, long); } function queryproducers_success(val) { var featuresloc = json.parse(val[1]); (var = 0; < featuresloc.length; i++) { var customfeatureloc = new customfeature(); customfeatureloc.type = featuresloc[i].croptype; customfeatureloc.pos = new google.maps.latlng(featuresloc[i].lat, featuresloc[i].long); addmarker(customfeatureloc, map); } } function fail(val) { } function initialize() { var mapoptions = { zoom: 12, center: new google.maps.latlng(36.5007041, -93.5080389), disabledefaultui: false, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid('map_canvas'), mapoptions); var customcontroldiv = document.getelementbyid("choicemenucrop"); var customsearch = document.getelementbyid("adv-search"); map.controls[google.maps.controlposition.left_center].push(customcontroldiv); map.controls[google.maps.controlposition.top_left].push(customsearch); init_publicmap(); //createpolygons(map); } function addmarker(feature, map) { var iconbase = '/webcontent/images/iconsbase/'; var iconhoneybees = { url: iconbase + "honeybeesicon.jpg", // url scaledsize: new google.maps.size(35, 40), // scaled size origin: new google.maps.point(0, 0), // origin anchor: new google.maps.point(0, 0) // anchor }; var iconfruitnuts = { url: iconbase + "fruits&nuts.jpeg", // url scaledsize: new google.maps.size(35, 40), // scaled size origin: new google.maps.point(0, 0), // origin anchor: new google.maps.point(0, 0) // anchor }; var iconforagegrass = { url: iconbase + "forage_grass.jpg", // url scaledsize: new google.maps.size(35, 40), // scaled size origin: new google.maps.point(0, 0), // origin anchor: new google.maps.point(0, 0) // anchor }; var iconfieldcrops = { url: iconbase + "fieldcrops.png", // url scaledsize: new google.maps.size(35, 40), // scaled size origin: new google.maps.point(0, 0), // origin anchor: new google.maps.point(0, 0) // anchor }; var iconnurserygreen = { url: iconbase + "nursery_greenhouse.jpg", // url scaledsize: new google.maps.size(35, 40), // scaled size origin: new google.maps.point(0, 0), // origin anchor: new google.maps.point(0, 0) // anchor }; var iconvegetable = { url: iconbase + "vegetable.png", // url scaledsize: new google.maps.size(35, 40), // scaled size origin: new google.maps.point(0, 0), // origin anchor: new google.maps.point(0, 0) // anchor }; var icons = { "vegetables": { icon: iconvegetable }, "greenhouse , nursery": { icon: iconnurserygreen }, "field crops": { icon: iconfieldcrops }, "fruits , nuts": { icon: iconforagegrass }, "forage, grassland": { icon: iconfruitnuts }, "honeybees": { icon: iconhoneybees } }; var marker = new google.maps.marker({ position: feature.pos, icon: icons[feature.type].icon, map: map }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=aizasyd7ftne22wl6s6dtqf83stztqbffpzekmu&libraries=drawing,places,geometry&callback=initialize"> google.maps.event.adddomlistener(window, 'load', initialize); </script> </div> </form> </body>the main part focus on queryproducers_success function because have tested ,it returning data , adding marker not appearing on map. please me.
Comments
Post a Comment